Example template, extended

Below is a basic HTML template example that uses 'Includes'.

You can see the CMSMS 'include' tags between the structure of the regular HTML components.
This 'include' base template is created using a 'Core::Page' template type in Design Manager.

The CSS code from the Basic Example Template can be used with this template. It should be pasted into a new stylesheet called 'CustomCSS' in Design Manager/Stylesheets.
The 'CustomCSS' stylesheet should be added to the default design in Design Manager/Designs.

 {strip}
{process_pagedata}{* 'process_pagedata' is a required CMSMS tag. It adds page specific metadata *}{* These are Smarty comments *}
{/strip}<!DOCTYPE html>
<html lang="{cms_get_language}"><!-- Check languages here: https://www.w3schools.com/tags/ref_language_codes.asp -->
<head>
    <title>{title} | {sitename}</title> <!-- Title of the page is from 'Content/Content manager/Page_Name' | Site Name is from 'Site Admin/Settings - Global Settings' -->
    {metadata} <!-- Adds Global Metadata to the page. Check admin page 'Site Admin/Settings - Global Settings'  -->
    
    <link rel="preconnect" href="https://fonts.googleapis.com"><!-- Adds Google Fonts to the page.  -->
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><!-- Adds Google Fonts to the page.  -->
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700&display=swap" rel="stylesheet"><!-- Adds Google Fonts to the page.  -->
    {cms_stylesheet} <!-- Adds attached stylesheets to the page. Check admin page 'Design Manager', and tab 'Stylesheets'  -->
</head>
<body>
 {include file='cms_template:header'}
<!-- See below for creating a generic template called 'header' -->
<main class="container">
<div class="row">
	<!-- Here is our page's main content -->
	<div class="col-8">
		<!-- It contains an article -->
		<article>
		<h2>{title}</h2>
		<!-- Title of the page is from 'Content/Content manager/Page_Name' Title field -->
		 {content} 
		<!-- Page content is from 'Content/Content manager/Page_Name' Content field -->
		</article>
	</div>
	<div class="col-4">
		<!-- The sidebar content can also be nested within the main content. See below for include template. -->
		 {include file='cms_template:aside'}
	</div>
</div>
</main>
<footer class="container">
<div class="row">
	<div class="col-12">
		<!-- If the page footer is the same throughout the website, create it once and 'include' it in your page template. -->
		 {include file='cms_template:footer'}
		<!-- See below for creating a generic template called 'footer' -->
	</div>
</div>
</footer>
</body>
</html>

Header Include Template

A Header 'Include' template is created using a 'Core::Generic' template type in Design Manager.
This template is included in the Main Template above.

 <!-- Create 'header' generic template, save as 'header'. Use 'Core::Generic' template in Design Manager -->
<header class="container">
<div class="row">
	<div class="col-4">
		<h1>{sitename}</h1>
		<!-- Site Name is from 'Site Admin/Settings - Global Settings' -->
	</div>
	<div class="col-8">
		<nav>
		{Navigator} 
		<!-- Outputs all the menu links. Use 'Navigator::Navigation' template in Design Manager -->
		<!-- A Search form is another way to navigate through your website. -->
		 {Search} 
		<!-- Use 'Search::Search Form' template in Design Manager. Check admin page 'Extensions/Search'  -->
		</nav>
	</div>
</div>
<div class="row">
	<div class="col-12">
		<div id="breadcrumbs">
			 {nav_breadcrumbs} 
			<!-- Show breadcrumbs pagelinks. Use 'Navigator::Breadcrumbs' template in Design Manager -->
		</div>
	</div>
</div>
</header>

Footer Include Template

A Footer 'Include' template is created using a 'Core::Generic' template type in Design Manager.
This template is included in the Main Template above.

 <!-- Create 'footer' generic template, save as 'footer'. Use 'Core::Generic' template in Design Manager -->
<p>© Copyright 2050 by CMSms. All rights reserved.</p>

Sidebar Include Template

A Sidebar 'Include' template is created using a 'Core::Generic' template type in Design Manager.
This template is included in the Main Template above.

 <!-- Create 'aside' generic template, save as 'aside'. Use 'Core::Generic' template in Design Manager -->
<aside>
<h2>Sidebar Info</h2>
<ul>
	<li><a href="#">Duis id tellus lacinia diam lacinia pulvinar id quis quam.</a></li>
	<li><a href="#">In sit amet ligula sed lacus tincidunt aliquet id eu nulla.</a></li>
	<li><a href="#">Donec quis lacus eu arcu ornare ullamcorper ac in nisl.</a></li>
	<li><a href="#">Cras ac dolor at nulla sodales viverra ut suscipit ex.</a></li>
	<li><a href="#">Morbi nec leo eget orci dignissim posuere sed a orci.</a></li>
	<li><a href="#">Etiam a risus a nisl scelerisque ultricies sed quis enim.</a></li>
</ul>
</aside>