how to add Javascript and CSS in page layout with sharepoint 2013

Sometimes, we need create a custom page layout, at the time, if we want to add some javascript and css code, how to do it? we cannot add the code in page layout file directly, the syetem will  filter it and the code lost function. follow my steps to resolve it.

1. Open the page layout file, it is html file

2. you must add the javascript and css under the label  <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->. find the label

  <!--MS:<asp:ContentPlaceHolder id="PlaceHolderAdditionalPageHead" runat="server">-->

   <!--ME:</asp:ContentPlaceHolder>-->

3. You need handle your css label when add css label, or the css will be filter, the correct css label is :

 <!-- MS:<style type="text/css" >-->
 // add your css code<!--ME: </style>-->

4. Add javascript code, but you need focus on the document.ready, the document.ready will lost function for page layout is heriting from master page, so the body loading is difference. you must use the function named "_spBodyOnLoadFunctionNames.push"

 <script>

  _spBodyOnLoadFunctionNames.push("cutomFunction");
function cutomFunction(){
// ...
}


</script>

how to add Javascript and CSS in page layout with sharepoint 2013