Reference: HTML Tags
- cms-title
- cms-content-editor
- cms-onRender
- cms-component
- cms-page-config
- cms-component-template
- cms-websnippet-template
- cms-template
- removeOnPublish
Editable Page Title
Make the page title editable by adding the "cms-title" attribute:
<h1 cms-title>Page Title</h1>Editable Content Area
Make an HTML element editable by adding the "cms-content-editor" attribute. The value should be the ID of the Content Area. By default, each template has one content area named "body". Each content area must be defined in the Page Config - "content_elements" property.
Either "page.content.content_area" or "content_area" can be used:
<div cms-content-editor="page.content.body"></div>
<div cms-content-editor="body"></div>onRender Hook
Use onRender hooks to show / hide elements and apply classes or styles, based on the Page Properties. More information can be found in the Render Functions reference.
<body cms-onRender="addClass(page.properties.bodyClass); addStyle(page.properties.bodyStyle);">
<h1 cms-title cms-onRender="showIf(page.properties.showTitle!='N');">Page Title</h1>Page Components
Add static page components, such as menus, sidebars, and breadcrumbs, by adding a div with the "cms-component" attribute set to the ID of the component:
<div cms-component="sidebar"></div>The following optional additional Page Component attributes are available:
cms-menu-tag
Link a menu with a Page Component, and enable the "menu" render variable to be used with the "cms-menu-tag" attribute:
<div cms-component="menus/main.top" cms-menu-tag="main"></div>cms-component-properties
Set values for the "properties" render variable using the "cms-component-properties" attribute, defined as a JSON string:
<div cms-component="tiles" cms-component-properties='{"cssClass":"testClass"}'</div>cms-component-data
Set values for the "data" render variable using the "cms-component-data" attribute, defined as a JSON string:
<div cms-component="tiles" cms-component-data='[{"image":"test"}]'></div>cms-component-content
The "cms-component-content" attribute is used to render Page Components for JSON export, for example when using client-side JS rendering or Standalone pages.
First, set the Page Config to export the component to a Page Content Area on publish. For Standalone pages, this step is not necessary - the component will be automatically added as a Page Content Area based on the "cms-component-content" tag.
Next, use the "cms-component-content" tag in the template to inject the content into that element on render (example code below):
<!-- Page Config -->
<script type="text/cms-page-config">
{
"templates": { "publish": "format:json" },
"content": { "topmenu": "breadcrumbs": "<div cms-component='breadcrumbs'></div>" }
}
</script>
<!-- Page Template -->
<div cms-component="breadcrumbs" cms-component-content="page.content.breadcrumbs"></div>cms-component-remove-container
It may be useful to remove the Page Component container element on publish - for example, when using the Page Component in a HEAD tag. The "cms-component-remove-container" attribute will remove the container element on publish:
<script cms-component="analytics" cms-component-remove-container></script>Page Config
The Page Config defines the template name, Page Properties, toolbar position, and other options. More information can be found in the cms-page-config reference.
<cms-page-config>...</cms-page-config>
<script type="text/cms-page-config">...</script>In-page Component Template Definition
In most sites, Component Templates are defined in the "templates/components" folder and available across the entire site. However, while setting up a new site, it can be helpful to initially define the template in-page, and then move it out to the "templates/components" folder later. The in-page component templates can only be used on that page. Full syntax for defining components can be found in the Component Templates reference.
<script type="text/cms-component-template">
<cms-component-config>
{
"id": "banner",
"title": "Banner",
"target": "content",
"icon": "material:view_module",
"component_properties": [
{ "name": "cssStyle", "caption": "CSS Style" },
{ "name": "cssClass", "caption": "CSS Class" },
],
"item_properties": [
{ "name": "image", "caption": "Image", "control": "media_browser", "validate": ["Required"]},
{ "name": "link", "caption": "Link", "control": "link_browser"},
{ "name": "title", "control": "htmleditor" },
{ "name": "body", "control": "htmleditor" },
]
}
</cms-component-config>
<div ...>
... Component HTML ...
</div>
</script>After an in-page component is defined, it can be used the same way as a standard component in the page. Content components can be added from the Components dropdown in the page editor, and Page Components can be added as HTML in the page body:
<div cms-component="sidebar"></div>In-page Web Snippet Template Definition
In most sites, Web Snippet Templates are defined in the "templates/websnippets" folder and available across the entire site. However, while setting up a new site, it can be helpful to initially define the template in-page, and then move it out to the "templates/websnippets" folder later. The in-page web snippets can only be used on that page. More information about web snippets can be found in the Web Snippets reference.
<script type="text/cms-websnippet-template">
<cms-websnippet-config>
{
"title": "Product Features",
"description": "List of product features"
}
</cms-websnippet-config>
<div ...>
... Websnippet HTML ...
</div>
</script>After an in-page web snippet is defined, it can be added from the Web Snippet button in the page editor.
Template-specific Content
If a single page hosts multiple CMS templates, for example if using the Client-side JS SDK in the Single-Page Application, the "cms-template" tag can be used to show / hide HTML elements based on the Page Template ID.
<div cms-content-editor="sidebar" cms-template="one-column-sidebar"></div>
<div cms-content-editor="body" cms-template="!two-column"></div>
Boolean operators can be used in the "cms-template" tag:
!template1 (not template1)
template1 || template2 (template1 or template2)
!template1 && !template2 (not template1 and not template2)
removeOnPublish Class
Add the "removeOnPublish" class to any element in a template, in order to remove that element when the publish template is generated.
This is useful when some elements should only be displayed in the Page Editor, for example certain internal scripts:
<script type="text/javascript" src="editor_extensions.js" class="removeOnPublish"></script>
