Extended example template

This section has not yet been updated for version 2.0. We're working on it!

Below a more extended example HTML template. You can see the CMSMS tags between the structure of the regular HTML components.
By using more Global Content Blocks for extracting code, the HTML template remains clear. These GCB's can also be re-used in other templates.

{strip}
   {* Adds page specific metadata to the page *}
   {process_pagedata}
   {* Assign the main Content block to a string *}
   {content assign='maincontent' label='My content block'}
   {* Create a second content block! *}
   {content block='second_content' assign='second_content' label='My second content block'}
{/strip}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <!-- Change "en" to your language -->

<head>
   <title>{title} | {sitename}</title> <!-- Title of the page | Site name from Global Settings -->
   {metadata} <!-- Adds Global Metadata to the page -->
   {cms_stylesheet} <!-- Adds attached stylesheets to the page -->

   {cms_jquery} <!-- Adds jQuery files to the page -->
   [literal]
      <script type="text/javascript">
         // Additional Javascript code
      </script>
   [/literal] <!-- should be wrapped in { and } -->

   {global_content name='analytics'} <!-- Extract all analytics code to a global content block -->
</head>

<body>
<div id="pagewrapper">

   <div id="header">
      <h1>{sitename}</h1> <!-- Site name from Global Settings -->
      <img src="uploads/images/header/{page_image}" alt="Header Image" /> <!-- Assign a different header image per page (#1) -->
      {content_image block='Header Image' dir='images/header'} <!-- Assign a different header image per page (#2) -->
   </div>

   <div id="menu_horiz">
      {Navigator number_of_levels='1'} <!-- Show only the parent menu buttons -->
   </div>

   <div id="breadcrumbs">
      {cms_breadcrumbs} <!-- Show breadcrumbs pagelinks -->
   </div>

   <div id="sidebar">
      {global_content name='sidebar'} <!-- Extract all sidebar code to a global content block -->
   </div>

   <div id="content">
      <h2>{title}</h2> <!-- Title of the page -->
      {$maincontent} <!-- Page content from string -->

      {if $second_content} <!-- Only show second content block when it has some content -->
         <h3>Second Content Block</h3>
         {$second_content}
      {/if}
   </div>

   <div style="clear: both;"></div> <!-- Be sure the footer remains under the sidebar and content div -->

   <div id="footer">
      {global_content name='footer'} <!-- Extract all footer code to a global content block -->
   </div>

</div>
</body>

</html>
   Global Content Block called "analytics"
[literal]

<!-- Add (Google) Analytics Javascript code here -->

[/literal]<!-- should be wrapped in { and } -->
   Global Content Block called "sidebar"
<div id="menu_vert">
  <h3>Submenu</h3>
  {Navigator start_level='2'} <!-- Only show the children menu buttons -->
</div

{news assign='news_there'} <!-- Assign News content to a string -->
{if $news_there} <!-- Only show the News div when there is news -->
   <div id="news">
      <h3>News</h3>
      {news}
   </div>
{/if}
   Global Content Block called "footer"
<p>Copyright &copy; {custom_copyright} <a href="http://www.cmsmadesimple.org">CMS Made Simple&trade;</a><br />
{cms_selflink page='sitemap'} | Mail us at {mailto address='name@website.com' encode='javascript'}</p>