Handling Common Markup Across Page Templates

One can make use of common components (ex. common header or footer CSS/JS resources) by the use of <apex:composition>. An Apex composition loads markup from another Visualforce page. The following markup shows four Visualforce pages being loaded as part of a Visualforce page template:

Page Template - prefix_t_Home.page

    <apex:define name="header">
        <apex:composition template="prefix_i_Common_Head" />
    </apex:define>
    <apex:define name="body">
        <div class="pg pgMyTemplate">
            <apex:composition template="prefix_i_Common_Content_Header" />
            <div class="myContentWrapper">
                 <!-- Markup/Panels -->
            </div>
            <apex:composition template="prefix_i_Common_Content_Header" />
        </div>
        <apex:composition template="prefix_i_Common_JavaScript" />
    </apex:define>

Common Head - prefix_i_Common_Head.page

    <apex:page controller="cms.CoreController" showHeader="false" sidebar="false" standardStylesheets="false">
        <apex:outputText rendered="{!api.page_mode == 'prev'}">
            <!-- Preview Mode CSS -->
            <link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.resourceName, 'css/styles.css')}"/>
        </apex:outputText>
        <apex:outputText rendered="{!api.page_mode == 'production'}">
            <!-- Production CSS -->
            <link rel="stylesheet" type="text/css" href="{!URLFOR($Resource.resourceName, 'css/styles.min.css')}"/>
        </apex:outputText>
    </apex:page>

Common Content Header - prefix_i_Common_Content_Header.page

    <apex:page controller="cms.CoreController" showHeader="false" sidebar="false" standardStylesheets="false">
        <header role="banner">
            <div class="section">
                <div class="headerWidgets_c">
                    <cms:Panel panelController="{!controller}" panelName="headerWidgets" panelLimit="2"/>
                </div>
                <nav class="innerPage">
                    <cms:Panel panelController="{!controller}" panelName="headerNav" panelContentLayouts="ClassStyledMenu" panelLimit="1"/>
                </nav>
            </div>
        </header>
    </apex:page>

Common Content Footer - prefix_i_Common_Content_Footer.page

    <apex:page controller="cms.CoreController" showHeader="false" sidebar="false" standardStylesheets="false">
        <footer class="mainSection">
            <div class="section">
                <div class="footerLogo">
                    <cms:Panel panelController="{!controller}" panelName="footerLogo" panelContentLayouts="ClassStyledMenu" panelLimit="1"/>
                </div>
                <nav class="footerMenu">
                    <cms:Panel panelController="{!controller}" panelName="footerNavMenu" panelContentLayouts="ClassStyledMenu" panelLimit="1"/>
                </nav>
            </div>
        </footer>
    </apex:page>

Common JavaScript - prefix_i_Common_JavaScript.page

    <apex:page controller="cms.CoreController" showHeader="false" sidebar="false" standardStylesheets="false">
        <apex:outputText rendered="{!api.page_mode == 'prev'}">
            <script type="text/javascript" src="{!URLFOR($Resource.resourceName, 'js/scripts.js')}"></script>
        </apex:outputText>
        <apex:outputText rendered="{!api.page_mode == 'production'}">
            <script type="text/javascript"src="{!URLFOR($Resource.resourceName, 'js/scripts.min.js')}"></script>
        </apex:outputText>
    </apex:page>