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>

 

Template files without using Design Manager

A template file can also be created without using Design Manager. File templates can be organised in folders.

  1. use 'assets\templates' as the root for your templates organization
  2. use any hierarchy of folders you wish, say add a 'common' folder for example: 'assets\templates\common'
  3. if you added a 'top_logic.tpl' template file inside the common folder, then you can call it from any of your other templates:
{include file="common/top_logic.tpl"}