Template Parts

Each page consists of a header, sidebar and footer templates, additionaly every page has a page type specific template (e.g. post, home, or category). Every template can use the properties of a global context and a template specific properties to render the content.

All templates should be placed in the /templates directory.

Global context

The global context has the following properties:

  • lang - the project language,

  • projectName - the name of the project,

  • assetsPath - the absolute path of the assets directory,

  • now - an object containing information about the render timestamp, e.g. {year: '2020', month: '4', date: '5'},

  • contact - the contact information, with the following properties: name, street, zip, localtion, email,

  • isAmp - a flag indicating whether the rendered page is a standard HTML page, or an AMP page,

  • isLive - a flag indicating whether the rendered page is being published, or is a preview,

  • homeUrl - the url of the homepage.

The header template (header.html) is rendered on every page and has the following additional properties:

  • categories - an array of all project categories, each entry has the following structure: {name: 'Category Name', link: 'https://mysite.com/category-1'},

  • menuGroups - an array of all menu groups, each entry has the following structure: {name: 'Menu Group Name', items: [{label: 'My entry', active: false, link: 'https://mysite.com/my-entry'}]}, additionally each category menu item might receive a posts array with the title, active, and link properties,

  • logoPath - the absolute url of the project logo,

  • hasLogo - a flag indicating whether a project has a logo,

  • logoWidth - the width of the logo in pixels,

  • logoHeight - the height of the logo in pixels.

A sidebar can be either generic, or a page type specific. The generic sidebar is included on every page that doesn't have a page type specific sidebar:

  • sidebar.html - the generic sidebar,

  • sidebar_post.html - post/page specific sidebar,

  • sidebar_category.html - category specific sidebar,

  • sidebar_home.html - homepage specific sidebar.

The sidebar receives the same context as header and additionally an array of all posts, each post has the following properties:

  • authorName - the name of the author,

  • title - the title of the post,

  • link - the absolute path of the post,

  • type - the post type (page, or post),

  • featuredImage - a relative path to the featured image, mainly to be used with a @image macro,

  • excerpt - the short summary of the post.

The sidebar is positioned after the main content, to render it before the main content you can add the sidebarPosition: 'pre' setting to the template.config.js file.

The footer template (footer.html) receives the footerContent property, which is a HTML string containing user-defined content.

Home

The home template (home.html) receives the posts property, which is an array of all posts (the structure of each post is defined in the the sidebar section).

Additionally it receives an isFirstPage boolean flag indicating whether it's the first page, and a nextPage property which is the link to the next page.

Post

The post template (post.html) is used to render both, posts and pages. Each post receives the postContent property, which is rendered content (HTML string).

Additionally every post page receives an array of older posts (olderPosts) and more recent posts (newerPosts) with the following properties:

  • authorName - the name of the author,

  • title - the title of the post,

  • link - the absolute path of the post,

  • type - the post type (page, or post),

  • featuredImage - a relative path to the featured image, mainly to be used with a @image macro,

  • excerpt - the short summary of the post.

Category

The category template (category.html) receives the categoryName and posts properties (the structure of each post is defined in the the sidebar section of these docs).

404 Page

A 404 page template (404.html), receives only the global context.

Offline Page

The offline page (offline.html), receives only the global context.