Introduction
Setting up a good Page Template in Siteglide helps you save time in the future by making your pages more maintainable. We suggest you set up the smaller elements first and then put them together at the end:
- Create Code Snippets - to store snippets of script you will need, to keep them tidy.
- Create Headers
- Create Footers
- Organise in Page Templates
Code Snippets
Use Code Snippets in Site Settings to create a file to store the scripts and snippers of HTML you’ll call in your page heads. You can call a general Code Snippet something like “Head” or “Head scripts” if you like. You’ll be able to include this in each of your templates, saving you writing it each time.
If you have previously written them manually in each template, you can, of course, continue to do this if you prefer.
Example Content:
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="{{ 'js/slick.min.js' | asset_url }}"></script><script src="{{ 'js/slick.js' | asset_url }}">
</script><script src="{{ 'js/scripts.js' | asset_url }}"></script>
<script src="{{ 'js/foundation.min.js' | asset_url }}"></script>
<script>
{%- include 'code_snippet', id: '3', name: 'bc menu js' -%}
{%- include 'code_snippet', id: '4', name: 'bc default menu js' -%}
</script>Headers
Use Headers in Site Settings to create a file that contains the content of your page header. Usually, this includes a company logo and menu.
Footers
Use Footers in Site Settings to create a file that contains the content of your page footer. Usually, this contains some key information about the company and a basic menu.
Page Templates
Use Templates in Site Settings to create a Page Template that wraps around your pages content. Usually, this contains a head, header and footer along with some basic HTML to wrap your inner page content.
<head>
{%- include 'code_snippet', id: '1', name: 'css' -%}
{%- include 'code_snippet', id: '2', name: 'js' -%}
</head>
<body>
{%- include 'header', id: '1', name: 'Header' -%}
{{ content_for_layout }}
{%- include 'footer', id: '1', name: 'Footer' -%}
</body>
When editing your Template, you can use Toolbox on the right-hand-side to easily output the liquid required for your Code Snippets, Header & Footer.
Content for Layout
When a Page uses this Page Template, the {{ content_for_layout }} liquid tag shows exactly where the Page content should be outputted inside the template.