Pages

Last Edited: Sep 10, 2019

Technical

Page Content

You can customise content on pages by navigating to your page within CMS / Pages and then scrolling to the Code Editor section at the bottom of the page.

From here you can use the Toolbox to add in custom content sections. Change the order of sections by copying the liquid tags and then pasting them in the desired order.

Liquid Tags

URL Parameters

{{context.location.pathname}} - outputs the full url path such as "/first-part/second-part"

{{context.params.slug}} - outputs the first part of your url path such as "/first-part"

{{context.params.slug2}} - outputs the second part of your url path such as "/second-part"

{{context.params.myparam}} - outputs the value of ?myparam=true

Page Data

{{context | json}} - outputs the full array of page data

{{context.page.metadata}} - outputs the metadata of the page, though meta fields are usually automatically outputted for you.

{{context.page.metadata.name}} - outputs the Name field of the page

Example Page Header:

In this example, we check to see if the page name exists or not, as WebApp pages output their name differently. If there is a page name, it will display it, if not it will output the WebApp name instead.

{% if context.page.metadata.name != undefined %} {{context.page.metadata.name}} {% else %} {{context.exports.webapp_1.data.result.items[0].name}} {% endif %}

Example of URL based breadcrumbs:

This takes the URL path of the page, splits it based on `/` and titleizes the items.

{% assign slugSplit = context.location.pathname | remove_first: '/' | split: '/' %} <ul> <li>Home </li> {% for item in slugSplit %} {% if forloop.last == true %} <li>{{item | titleize}}</li> {% else %} <li>{{item | titleize}} </li> {% endif %} {% endfor %} </ul>