Pages are the backbone of any website. Pages in Siteglide are Liquid files in the codebase and rendered to HTML before the server delivers that Page to the browser. Liquid files can also include HTML. This allows the server to deliver some content dynamically, or some HTML statically.

When some content is very similar on multiple Pages, we recommend using Page Templates to reduce repetitive code, save time and make maintenance easier.

Types of Pages

• Standard Pages are created by you and can include any kind of Liquid or HTML code.

Some Pages are generated dynamically by the System:

• Detail Pages are dynamically generated by the system to output database items from WebApps and Modules front end.

• System Pages are similar to ordinary Pages, but are accessed in a different area in CLI and Admin to acknowledge their special functional role in the site, for example password reset pages.

Pages on platformOS

Learn more about Pages on platformOS here: https://documentation.platformos.com/developer-guide/pages/pages

Details

When you first click to create or edit a Page, you’ll begin within the ‘Details’ tab.

Using the 'Details' tab you can manage and edit key details about the current Page, such as:

• Name your page - Name of the Page displayed in Admin and front-end

• Page URL - URL of the page displayed in a browser

• Set as your Homepage - Make the current page display on load of your root domain

• Visible to site search - Enable or disable this to be searched from within your site

• Visible to search engines - Make the page discoverable to search engines such as Google

• Enable this page - Enable or disable the page. When disabled the page cannot be found front-end

• Page Template - See Templates - Getting Started for more information

• SEO and Open Graph Settings - Add data to the page that will display in search engines and when sharing links. If sharing on Twitter, you'll need to select a Twitter Card Type along with the other fields provided for this to work as expected. For more information on Twitter Card Types, see here

• Secure Zones - Move the page into one or more Secure Zone to lock the content behind a wall

System Pages work similar to other pages- but they are stored under Site Manager as they are most likely to be looked at by a Developer.

Available System Pages

You can currently edit the content of the following system pages:

• 404 page - Users are redirected to this page if they try to visit a page which does not exist.

• 401 page - Users are redirected here if they try to access a page within a Secure Zone they don't have access to. (When editing within CLI, both marketplacebuilder/views/pages/systempages/401.liquid and marketplace_builder/views/partials/401.liquid will need to be edited. These 2 files are used in different places in the Secure Zone system.)

• Recover Password - This page contains a button which will send the User a recover-password email.

• Reset Password - If the User clicks a link in a recover-password email, they will be sent to this page with a token included in the request. If the token is valid, they will be allowed to choose a new password, otherwise, an error message will show.

• Robots - This allows you to create a "robots.txt" file which can be used to give recommendations to search engines about which pages they should avoid crawling. This is a special kind of liquid page which will render to .txt format before the server sends it to the browser.

• XML Sitemap - This allows you to give search engines a helpful map which helps them find all the pages you would like to be indexed. This is a special kind of liquid page which will render to .xml format before the server sends it to the browser.

You can create additional system pages via the CLI.

Learn more

You can learn more about writing an XML sitemap here: https://support.google.com/webmasters/answer/183668?hl=en

You can learn more about writing a robots.txt file here: https://support.google.com/webmasters/answer/7424835?hl=en

The advantage of a Siteglide System Page is that you can write liquid to make the page dynamic and easier to maintain. Create a trial site and install the Starter Kit to see a working example of a Dynamic Sitemap.

Studio is our no-code editor that also allows you build out pages if you have Layouts installed (e.g. SiteBuilder)

You can easily edit existing content by clicking text and using the Rich Text Editor tools as well as the 'Style' tab on the right hand side. The Structure tab on the left helps you move sections around if needed:

If you double click an image it will open the File Manager modal where you can upload new images or browser already uploaded images to insert:

Ready to create a page?

Looking for our no-code Editor, Studio?

Want to get under the hood via CLI?

Liquid for Page Templates only

Determines where in the Page Template the dynamic content of the Page itself will sit:

{{content_for_layout}}

Note though that the Page is actually rendered by the server before the Page Template, this allows Liquid to pass data from the Page to the Page Template either using Page Metadata or the content_for and yield tags.

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

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

Liquid for Pages only

Liquid for either Pages or Page Templates

Browse the rest of the documentation to find dynamic Liquid features you can insert into your Pages and Page Templates using Liquid tags. Almost any Liquid is suitable for outputting in either.

https://github.com/Siteglide/documentation/blob/master/pages-and-page-templates/reference-pages/broken-reference/README.md

https://github.com/Siteglide/documentation/blob/master/pages-and-page-templates/reference-pages/broken-reference/README.md

Liquid Variables

For the full documentation on the platformOS context variable, see here: https://documentation.platformos.com/developer-guide/variables/context-variable#displaying-the-context-object

Site Data

• {{context}} - outputs the full extent of site data available by default on this current file

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.exports.webapp_1.data.result.items[0].name}} - Access data that has been fetched using a query earlier in the Page

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>
        <p>Home</p>
        <i class="fal fa-chevron-right"></i>
    </li>
    {% for item in slugSplit %}
        {% if forloop.last == true %}
            <li>
                <p>{{item | titleize}}</p>
            </li>
        {% else %}
            <li>
                <p>{{item | titleize}}</p>
                <i class="fal fa-chevron-right"></i>
            </li>
        {% endif %}
    {% endfor %}
</ul>

When the Admin builds a Page, it adds important metadata using the YAML language.

It also includes Liquid code, hidden from Admin, which controls automatic metadata output and Secure Zones if relevant.

If you add Pages locally, you'll need to add this data.-

Pages must be stored within the following file path of your project: marketplace_builder/views/pages/ and must be .liquid file type.

Yaml Settings and Metadata

This is an example Page generated by Siteglide. Below, we'll list available YML parameters, and body content.

The YML section of the page is marked by triple dashes above and below. Everything below is the main body of the page, in liquid language.

YML is very strict about spaces and tabs- always use two spaces instead of a tab in YML.

If you wish to use Liquid in the redirect to line, you can make the line multiline: https://documentation.platformos.com/use-cases/using-liquid-markup-yaml#using-liquid-markup-in-yaml

---
slug: a-site-page
layout_name: templates/1
metadata:
  name: My first page
  file_type: page
  last_edit: 1550810046465
  meta_title: My site - My first page
  meta_desc: Here's some text to show in search engine
  og_title: My site - My first page
  og_desc: Here's some text to show in search engine
  og_type: article  
  twitter_type: app
  enabled: true
physical_file_path: views/pages/a-site-page.liquid
redirect_to: '/'
redirect_code: 301
searchable: true
---

<div data-gb-custom-block data-tag="include" data-0='modules/siteglide_system/constants'></div>

<!-- Page Content Here -->

Parameters

• Slug - This is the page URL. Must be unique - Siteglide Admin handles this when editing Pages there, but we obviously have little control over that here, so it's up to the user to maintain for now (we can add validation later). Shouldn't ever be '/', as that's reserved by homepage. If you need to set it as homepage you'll have to do via UI for now. (required)layout_name - Reference your Template here. Stored at -> marketplace_builder/views/layouts/templates/1.liquid

  metadata

  • name - Page name shown in UI (required) Note: This must be a string

  • file_type - Set as 'page' (required)

  • last_edit - timestamp of last edit - shown in UI

  • meta_title - Used in page title

  • meta_desc - Used as meta description

  • og_title - Used in page data for sharing link

  • og_desc - Used in page data for sharing link

  • og_type - Defines page content type for sharing link

  • twitter_type - Defines page content type for twitter sharing link

  • enabled - If the page is visible on the front-end

  • use_siteglide_js - Set as 'false' to supress the siteglide.js file from being included in your page. Note: This will stop forms from submitting, only turn this off on pages that do not include forms. Currently this does not work for the homepage of your site

• physical_file_path - Files should be stored in a location relative to their slug. If your slug is /services/cleaning, then the physical_file_path would be views/pages/services/cleaning.liquid - note changing this line can have unexpected results. If you want to move a file, you can just move the file and delete this line. Re-syncing or deploying should change the physical file path automatically.

• redirect_to - The slug to redirect to, if it needs it. If it's homepage, you need to redirect to '/'

• redirect_code - Set as '301' if there's a redirect

• searchable - Set as 'true' so it shows in search results

• layout - Adds the Page Template e.g. set to 'templates/1' for the template with an ID of 1. Or to leave blank for API Endpoints, set to empty string ''.

Body must include the constants snippet shown in example for features like SEO and Secure Zones to work.

Liquid Visible in CLI Only

Constants

Constants makes certain variables available in the Page and passes others up to the Page Template e.g. SEO. It should sit at the very top of most pages. If you are confident a Page doesn't need it e.g. an API Endpoint, you can skip it to improve performance.

{% include 'modules/siteglide_system/constants' -%}

Secure Zones

You can use your own Liquid to implement logic based off the logged in User's Secure Zones, but to copy the pattern Admin creates for consistency you can do this:

{% include 'secure_zones', secure_zones_string: '1' -%}
{% if context.exports.access_allowed.value == true -%}
  {% comment %}Your Page Code here!{% endcomment %}
{% else -%}
  {% include '401' -%}
{% endif -%}

Replace the "secure_zones_string" with the ID of your relevant Secure Zone from Admin.

Templates must be stored within the following file path of your project: marketplace_builder/views/layouts/templates/ and must be .liquid file type.

YAML Page Template Settings

This is an example Template generated by Siteglide. Below, we'll list available YML parameters, and body content.

Parameters

metadata

• id - Used by UI to reference Templates. Must be unique (required)

• name - Template name shown in UI (required)

• type - Used to define where the Template shows in UI. Either page or email (required)

• file_type - Set as 'template' (required)

• last_edit - timestamp of last edit - shown in UI

• use_design_system - true/false - used to determine whether or not we automatically add assets from the Siteglide Design System Module.

• physical_file_path - Files should be stored in a location relative to their ID. If your ID is 1, then the physical_file_path would be views/layouts/templates/1.liquid

Hidden Liquid

This Liquid is not displayed as editable code in the Siteglide Admin and is automatically added. However, if you're using CLI, you should make sure to include it manually if missing.

Constants

Constants makes certain variables available in the Page and passes others up to the Page Template e.g. SEO. It should sit at the very top of most Page Templates.

Page Templates are used for organising the repeatable content you will want to display on multiple pages, including Headers and Footers

Introduction

Page Templates are used to easily and consistently apply the same global content to pages, such as: Headers, Footers, Global Stylesheets and Analytics Tracking Scripts.

An Example Page Template

Page content will be outputted where the liquid tag {{content_for_layout}} is located within your Template.

Here is how a generic Page Template file should be structured:

While editing a Page, you can assign a Template using the Page Template drop down and then clicking Save.

Note: Toolbox functionality will soon be added to the templates section of Admin, allowing you to easily select elements to add to the page.

Page Templates on platformOS

Step 1: Create a Page

To create a blank page go to CMS > Pages and click Create Page:

Step 2: Page Details

Give the page a Name, it will create a URL which has to be unique (edit the Name/URL until unique):

You likely need to assign a Page Template, if none appear in the dropdown you'll need to create one:

There are various other settings including SEO meta data, Open Graph and assigning the page to a Secure Zone:

Before adding content we recommend saving the page so that the Template is correctly linked and that Studio can display the page correctly.

Step 3: Add Content

You have 3 ways to add content and build out pages:

1. Studio: Our visual no-code editor allows you to edit content and, depending on the setup, insert new Layouts (e.g if SiteBuilder is installed):

1. Code View: The 'code' tab allows you to write code from within Siteglide and also includes the powerful Toolbox area on the right hand side to insert content. Find out more:

1. CLI: If you're building sites and have some coding experience we strongly recommend using our CLI for code related work:

Step 4: Making Changes

As you add and edit content you'll likely want to use the bar at the bottom of the page to Save, View the page (as a visitor would), potentially copy the page or delete it.

There's also the 'History' tab which lets you rollback to a previous version if needed. Here, you can view and restore different versions of the Page. You can view when this version was created, by who, how this was created, and the code for this Page to decide if you’d like to restore this version.

All Liquid files live somewhere inside the views folder.

Since Page Templates are called Layouts in platformOS, this is their name in the file structure.

in a Siteglide site should be stored in a templates sub-folder and named by their unique ID in Siteglide.

can be anywhere in the pages folder. They can have any file name and use any subfolders you like. By default their URL will be relative to the pages folder, but you can change this using the slug in YAML, or by changing the URL in the Siteglide Admin.

We have pre-built available to use out of the box.

The Code View is an easy way to quickly edit the page via code. You can switch between Studio and Code view without needing to save changes.

The most powerful feature of Code View is the Toolbox area on the right hand side. This dynamically updates depending on what you have installed on the site and what items you've created.

You can use Toolbox to insert static content such as Images (Assets), Code Snippets, Company Information:

Where Toolbox becomes even more powerful is it will help you craft dynamic tags (Liquid Includes) to insert dynamic content such as Forms, Module List Views and much more: