Page Template Overview

Oct 21, 2021 Update: Since the old template engine has been replaced by a new, more powerful and flexible template engine, content of this page needs to be updated. But the concept and idea are the same.

 

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 you authored in the Word document.

The website generation engine in DocxManager is based on a very flexible templating engine.

 

Supported Shortcodes

The shortcodes are grouped into two categories:

1.    Page-scope variables.
The format of page-level variables are in this format:
{{ Page.variableName }}
Where variableName is the name of the variable. 

2.    Site-scope variables.
Like page-scope 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.