Skip to content

template.md

Latest commit

 

History

History
98 lines (67 loc) · 6.4 KB

template.md

File metadata and controls

98 lines (67 loc) · 6.4 KB
Raw
description Customise the HTML template used by every page of your website
icon code

Site Template

{% hint style="info" %} The site template is only used during preview and export. It is not used in Edit mode. {% endhint %}

The site template lets you modify the underlying template code for your entire website. It is useful for placing scripts, such as Google Analytics, anywhere within the page structure.

The site template is used on every page of your website. To insert a script on specific pages only, use the page-level code areas instead.

Template Project Settings displaying the editable site HTML template

Properties

The Site Template has access to the following properties.

Property NameTypeDescription
{{site.title}}StringWebsite title
{{site.url}}StringWebsite URL
{{page.title}}StringPage title
{{page.path}}StringPage path from site root
{{page.languageAttributes}}StringPage language attributes
{{page.resourcesPath}}StringPath to site resources directory
{{page.opengraph}}StringOpenGraph social meta tag
{{page.social.title}}StringTitle for social media
{{page.social.description}}StringDescription for social media
{{page.social.url}}StringFull page URL
{{page.social.image}}StringImage for social media
{{page.content}}StringPage content
{{page.componentHeader}}StringHeaders required by components
{{page.componentCSS}}StringCSS required by components
{{page.componentJS}}StringJS required by components
{{page.componentPageStart}}StringCode required by components at start of page
{{page.componentPageEnd}}StringCode required by components at end of page
{{page.componentHeadStart}}StringCode required by components at start of headers
{{page.componentHeadEnd}}StringCode required by components at end of headers
{{page.componentBodyStart}}StringCode required by components at start of body
{{page.componentBodyEnd}}StringCode required by components at end of body
{{page.customHeader}}StringCustom page headers
{{page.customCSS}}StringCustom page CSS
{{page.customJS}}StringCustom page JS
{{page.customPageStart}}StringCustom code at start of page
{{page.customPageEnd}}StringCustom code at end of page
{{page.customHeadStart}}StringCustom code at start of headers
{{page.customHeadEnd}}StringCustom code at end of headers
{{page.customBodyStart}}StringCustom code at start of body
{{page.customBodyEnd}}StringCustom code at end of body
{{page.bodyClasses}}Stringrequired inside of classes body tag to support background colour
{{page.bodyAttributes}}StringShould be placed inside of body tag to support custom attributes

To reference a file in your Resources folder, use the {{page.resourcesPath}} page tag to get the correct path.

The following example links to a javascript.js file in a scripts folder within Resources.

<script src="{{page.resourcesPath}}/scripts/javascript.js"></script>

Site Template Example

The following is an example of the default site template. The template is used only during preview and export, not in Edit mode.

{{page.customPageStart}}
{{page.componentPageStart}}

<!doctype html>
<html class="scroll-smooth" {{page.languageAttributes}}>
<head>
    {{page.customHeadStart}}
    {{page.componentHeadStart}}
    
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width">

    {{page.componentHeader}}
    {{page.opengraph}}
    {{page.customHeader}}
    
    <title>{{page.title}}</title>
    
    {{page.componentCSS}}
    {{page.customCSS}}

    {{page.componentJS}}
    {{page.customJS}}

    {{page.componentHeadEnd}}
    {{page.customHeadEnd}}
</head>
<body class="{{page.bodyClasses}}" {{page.bodyAttributes}}>
    {{page.customBodyStart}}
    {{page.componentBodyStart}}

    {{page.content}}

    {{page.componentBodyEnd}}
    {{page.customBodyEnd}}
</body>
</html>

{{page.componentPageEnd}}
{{page.customPageEnd}}

Example: Add Twitter/X Social Tags

You can add Twitter/X-specific meta tags so your pages display correctly on the platform. Add the following code to your site template.

    <!-- Twitter/X Card Tags (Ensures Proper Display on Twitter) -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{page.social.title}}">
    <meta name="twitter:description" content="{{page.social.description}}">
    <meta name="twitter:image" content="{{page.social.image}}">
    <meta name="twitter:url" content="{{page.social.url}}">

Dev Diary Videos for Site Templates

The following video shows you how to use the Template feature in Elements. It was recorded using a development version, so the current interface may differ slightly.

{% embed url="https://www.youtube.com/watch?v=3_2D73Eg52Y" %}