Page Templates

• What are Page Templates?
  • Local Page Templates
  • Remote Page Templates
  • Page Template Architecture
• Creating Page Templates
• Reference: cms-page-config
• Reference: HTML Tags
• Reference: Render Functions
• Reference: Page Editor Hooks
• Examples

What are Page Templates?

Page Templates are used for:

• Page Editing
  Providing a WYSIWYG preview in the Page Editor
  
  
• Publishing
  Page content is merged into Page Templates to create static pages, or page content can be exported as JSON

In most cases, one template source file is used for both the Editor and Publish templates.  In some cases, developers may want to separate these two templates, so that advanced operations or integrations can be performed during publish.

Local Page Templates

In the standard workflow, local templates are defined per-site in the site's static files SFTP.  The SFTP Location is listed in the Page Templates tab:

1. Open the "Sites" tab
2. Click "Configure Site" on the target site
3. Select the "Page Templates" tab

The static files are merged with the page content on publish, and everything is sent together to the deployment target.

All the site's template-related files, such as images, CSS, and JavaScript should be placed in the SFTP folder.  Below are the reserved files / folders for templates:

Remote Templates

Templates can also be hosted on a remote server.  This can help with CMS integration into existing web applications.

:: Configuring Remote Page Templates

Page Template Architecture

Each Page Template consists of two parts - the Config (cms-page-config), and the Render Template (html).  Generally, the Config is included in the Render Template using a cms-page-config script tag.

Render Template

The Render Template is the actual HTML that will be used in the Page Template.  There are additional HTML tag attributes available for Page Templates so that the Page Editor knows where to insert content.

For example, the HTML attribute "cms-title" designates the Title element, and "cms-content-editor" designates which element to use as a container for the body content.  Learn more about the HTML Tags in the HTML Tag Reference.

Config (cms-page-config)

The Page Template Config defines template properties such as the template name, content areas, options for toolbar position.   The Config is defined as a JSON script, and is usually included at the top of the Render Template.  Learn more about the Page Template Config in the cms-page-config Reference.

Render Functions

Render Functions can be used to dynamically update the page based on Page Properties.  On publish, Render Functions will be applied to generate the finals static output.  Learn more about Render Functions in the Render Functions Reference.

Page Editor Hooks

Page Editor Hooks are JavaScript event hooks that can be used in the Page Editor.  The Page Editor Hooks enable customizing the behavior of the Page Editor template, for example setting a flag to disable analytics code, or refreshing a menu on render.    Learn more about Page Editor Hooks in the Page Editor Hooks Reference.

Creating Page Templates

Watch the Getting Started videos for a tutorial on creating page templates.  Below are the steps to convert an HTML page into a jsHarmony CMS Page Template:

1. Start with a working HTML template

     Be sure all URLs are root-relative (starting with a "/").  
     For example, use:  "/images/banner.jpg"
     Do not use:  "images/banner.jpg" or "../images/banner.jpg"

2. Rename the HTML template path to "/templates/pages/template_name.html"

3. Upload all template files, images, JavaScript, and CSS to Site SFTP.  The Site SFTP URL can be found in the Site -> "Page Templates" tab

4. Add a "cms-page-config" element to the HTML HEAD tag with the template name:

<cms-page-config>
{
  "title": "Template Name"
}
</cms-page-config>

5. Add cms-title attribute to the title, or set the cms-page-config  options.title_element_required = false

<h1 cms-title>Page Title</h1>

6. Define content_elements, if more than one editable area

7. Add the cms-content-editor attribute to each content area element

<div cms-content-editor="page.content.body">Page Content</div>

8. Open the Template in Preview / Developer Mode to double-check for errors

--- Optional Steps ---

9. If necessary, set the Toolbar Docking mode in the cms-page-config tag

10. If necessary, add fields for Page Properties in the cms-page-config tag.  For example, a "Body Class" field can be added to the page:

"properties": {
    "fields": [
      { "name": "bodyClass", "caption": "Body CSS Class" }
    ]
  }

11. If necessary, add "onRender" events to page.  For example, the "Body Class" field can update the body tag:

<body cms-onRender="addClass(page.properties.bodyClass);">

11. If applicable, add Page Components (menu, sidebar, breadcrumbs, etc)

<div cms-component="menus/main.sidebar" cms-menu-tag="sidebar"></div>

      * See the Component Templates section for more information on how to create Components