How to add styles and Javascript files to SharePoint page layout

How to add styles and Javascript files to SharePoint page layout

When you create new page layout, you will get 2 placeholders.
ContentPlaceholderID="PlaceHolderPageTitle"
ContentPlaceholderID="PlaceHolderMain"

we can not add styles and javascript reference in the above placeholders.
So to add styles and javascript files we have to add another placeholder called: PlaceHolderAdditionalPageHead

Ex:
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">

</asp:Content>

Add above after below code.
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>

Then we are good to add references...
Upload your css and js files to sharepoint.
Add that links in side PlaceHolderAdditionalPageHead
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
<link id="Link1" href="<% $SPUrl:~SiteCollection/Style Library/mystyle.css%>" runat="server" type="text/css" rel="stylesheet" />
</asp:Content>

Final Code.

<%@ Page language="C#" Inherits="Microsoft.SharePoint.Publishing.PublishingLayoutPage,Microsoft.SharePoint.Publishing,Version=16.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:webpartpageexpansion="full" meta:progid="SharePoint.WebPartPage.Document" %>
<%@ Register Tagprefix="SharePointWebControls" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingWebControls" Namespace="Microsoft.SharePoint.Publishing.WebControls" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="PublishingNavigation" Namespace="Microsoft.SharePoint.Publishing.Navigation" Assembly="Microsoft.SharePoint.Publishing, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceholderID="PlaceHolderPageTitle" runat="server">
<SharePointWebControls:FieldValue id="PageTitle" FieldName="Title" runat="server"/>
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">
<link id="Link1" href="<% $SPUrl:~SiteCollection/Style Library/mystyle.css%>" runat="server" type="text/css" rel="stylesheet" />
<link id="Link2" href="<% $SPUrl:~SiteCollection/Style Library/myjs.js%>" runat="server" type="text/script" />
</asp:Content>
<asp:Content ContentPlaceholderID="PlaceHolderMain" runat="server">

</asp:Content>