Tutorial 6 - Page Templates
A full reference for Page Templates is available in the Page Template Documentation.
Page Templates
Detailed documentation for Page Template creation, config settings, and render templates is available in the Page Templates Reference. You'll find a full reference for the tags and config options that make up a template, as well as downloadable examples.
Let's get started building a new template.
First, we'll need to set up a development environment.
If you're using a CMS server, you can edit templates through SFTP, through your favorite editor, such as Dreamweaver, Visual Studio Code, or Sublime.
If you have a CMS server set up locally, you can edit templates directly from a folder on your computer.
In this tutorial, we'll use Visual Studio Code. Download the Remote FS plugin to edit SFTP files as if they were a local folder.
After installing the plugin, you'll need to configure your SFTP in the Visual Studio Code settings:
"remotefs.remote": { "apharmonycms": { "scheme": "sftp", "host": "demo.site.jsharmonycms.com", "username": "demo@jsharmonycms.com" }}
Let's open the SFTP site by going to "View" -> "Command Palette", and selecting "Remote FS: Add Folder to Workspace".
We'll use an existing HTML template for this tutorial - the Intensity template from Templated.
First, upload the files to the server by dragging them to the site folder.
Next, move the Page Templates to the "templates\pages" folder. All the jsHarmony CMS page, component, and web snippets templates should be stored in the templates folder.
And at this point, let's load up the site in the jsHarmony CMS and see if the templates were recognized.
Next, we'll open the template in the Developer Preview.
We'll need to fix the URLs and make them all root-relative.
Next, let's add a Page Config and give the template a title.
<cms-page-config>{ "title": "Template Name"}</cms-page-config>
Next, we'll need to add the "cms-title" attribute to the Title element.
By default, the Page Template will have one editable section called "body". You can add the "cms-content-editor" attribute to make the body element editable:
cms-content-editor="body"
In more complex templates, you'll need to define multiple editable sections. This template has a subhead and a body, so let's define those two content elements:
"content_elements": { "subhead": { "type": "text", "title": "Subhead" }, "body": { "type": "htmleditor", "title": "Body" }}
Here, the subhead is just going to be text, not a full-featured HTML editor, so that users won't accidentally break the titles.
Now we'll add the additional "cms-content-editor" attribute to the subhead:
cms-content-editor="subhead"
Next, we'll add some page properties
"properties": { "fields": [ { "name": "bodyClass", "caption": "Body CSS Class" }, { "name": "bodyStyle", "caption": "Body CSS Style" } ]}
We'll tie those properties in to the body "cms-onRender" event, so that it will update when the Page Settings are updated:
<body cms-onRender="addClass(page.properties.bodyClass); addStyle(page.properties.bodyStyle);">
Finally, let's add an option to show and hide the title and subhead using checkboxes:
{ "name": "showTitle", "caption": "Show Title", "control": "checkbox", "default": "Y", "controlparams": { "value_true": "Y", "value_false": "N" } },{ "name": "showSubhead", "caption": "Show Subhead", "control": "checkbox", "default": "Y", "controlparams": { "value_true": "Y", "value_false": "N" } },
And let's tie those in with "cms-onRender" events:
<h1 cms-title cms-onRender="showIf(page.properties.showTitle!='N');">Page Title</h1> <p cms-content-editor="subhead" cms-onRender="showIf(page.properties.showSubhead!='N');">Subhead</p>
At this point, we can go ahead and use this template in our site.
We'll create an "About" page, add content, and save.
