Template Syntax
Templates are written with the Nunjucks templating language. See the docs to learn the syntax. Most Nunjucks features work, except for those that require a filesystem, like include and extend.
Template metadata is written in YAML in a header at the top of the file.
Here is a most basic template:
---
title: My Template
cname: basic
---
<div pd-editable="main"></div>PD-Editable
The HTML attribute pd-editable is used to indicate which elements are editable by the user. To create editable content fields, add the attribute pd-editable to an element.
<div pd-editable="main"></div>Pagedip will setup a WYSIWYG for each element with the pd-editable attribute. Content is loaded into the page based on the pd-editable name, thus content will only be displayed if there is a matching pd-editable element on the page.
Note: It is recommended to have a pd-editable="main" on every page.
There can be multiple pd-editable fields on a page. For example, you could have header, main content, and sidebar elements.
<body>
<div pd-editable="header"></div>
<main pd-editable="main"></main>
<div pd-editable="sidebar"></div>
</body>Using the same pd-editable name across multiple templates allows a page's content to be rendered with multiple templates, therefore generic names are ideal for common page elements (i.e. main, header, footer, sidebar... ).
Import from Other Files
To import templates from another file, use:
<%- include("filename.html") %>Layouts
To use a layout template, you must add a layout field to the template header with the name that matches your layout's filename minus the .html.
---
title: Page Using a Layout
cname: index
layout: layout
---In the layout HTML file, you must show where to put body content with <%- body %>:
<!-- layout.html -->
<!DOCTYPE html>
<html>
<body >
<h1>The Layout</h1>
<%- body %> // child template's content will be rendered here
</body>
</html>