Page Templates and Shortcodes

A template file describes how a document will be generated into an html page file and has the .template.html file extension.

Basically a template file is an html file that include a bunch of template shortcodes.

A very simple template file would look like the following:

<html>

  <head>

  <body>

    {{{page.pageContent}}}

  </body>
  </head>

</html>

Where {{{page.pageContent}}} tells the site generator to include the content of the document currently being generated.

The website generation engine in DocxManager is based the Mustache templating engine, you can go to there to read about the basic concepts (especially note the ‘variable’ and ‘sections’ concept). But be noted that not all features described there are available in DocxManager, due to the way DocxManager works is a little different.

 

Supported Shortcodes

The shortcodes are classified into several categories:

1.    Page-level variables.
The format of page-level variables are in this format:
{{{page.variableName}}}
or
{{page.variableName}}

Where variableName is the name of the variable. 3 braces ensures that the included content will be kept untouched.

2.    Project-level variables.
Similar to page-level variables but on the project level.

 

List of Page-Level Variables

Most of the shortcodes described here can be found in the Page Template Example page for example usage.

{{{page.pageContent}}}

Includes the content of the source document into the target page being generated.

 

{{page.pageDescription}}

Includes the text the user entered for the Synopses document property. Example usage:

<meta name="description" content="{{page.pageDescription}}">

 

{{page.pageTitle}}

Includes the page title property the user set for the source document. Example usage:

<title>{{page.title}}</title>

 

{{page.relativeSiteRoot}}

Represents your website’s root path relative to the location of the page being generated. For instance if you need to reference a css file in the ‘css’ subfolder. Example usage:

<link href="{{page.relativeSiteRoot}}/css/YourCssFileName.css" rel="stylesheet">

 

{{{page.favicon}}}

Includes the Favicon (the icon that being displayed in the browser tab when browsing your site) set by the user. Example usage:

<link rel="shortcut icon" href="{{{page.favicon}}}">

 

{{{page. pageInlineStyles}}}

Represents the css styles generated by Word, it’s necessary for Word document generated webpage.

 

{{{page. siteLogo}}}

Represents the path of the logo image the user selected. Example usage:

{{#page.siteLogo}}

<a href="/" aria-label="Logo"><img src="{{page.siteLogo}}"></a>

{{/page.siteLogo}}

Note, the siteLogo shortcode is at the page level instead of the project level because its path relative to each page might be different if the pages are in different subfolders.

 

{{{page.mainMenu}}}, {{#menuList}}, {{menuCaption}}, {{#menuItemsLevel2}}, {{#menuItemsLevel2}}, etc.

All these shortcodes are for constructing the main menu navigation. Check the usage in the Page Template Example page.

 

{{{page.pageLevel}}}

The deep level of the document relative to the project root folder. If a document is located in the root folder the value is 1. If it’s located in a subfolder of the root folder, the value is 2, and vice versa.

 

{{{page.siblingMenuItems}}}, {{#menuList}}, {{menuCaption}}, etc.

All these shortcodes are for constructing the sidebar menu navigation. Check the usage in the Page Template Example page.

 

{{page.isHomePage}}

Indicates if the current page is the homepage.

 

List of Project-Level Variables

 

{{project.googleAnalyticsTrackingId}}

The Google Analytics tracking ID the user set for the site.

 

{{{project.copyrightDescription}}}

The copyright descriptive the user set for the site.

 

{{{project.GeneratorBacklink }}} and {{project.GeneratorBacklinkCaption}  

The backlink and the caption of the backlink to the DocxManager site. All themes should include this and it’s the end user’s choice to include or not the backlink if his/her license allows such option.