Skip to content

Latest commit

 

History

History
98 lines (67 loc) · 6.49 KB

template.md

File metadata and controls

98 lines (67 loc) · 6.49 KB
description icon
Fully Customizable Site Template
code

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 give you the ability to modify the underlying template code for your entire site. It's perfect for placing scripts, such as Google Analytics anywhere within the page structure.

The site template is used on every page of your website. If you need to insert a script just on specific pages, you should use the page level code areas instead.

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 you Resources folder you can use the following page tag to get the correct path to the resources folder:{{page.resourcesPath}}.

The following example shows how you might link to a "store.js" file that's in a "scripts" folder in the Resources area.

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

Site Template Example

The following is an example of the default site Template. Please note the template is only used during preview and export. It is not used 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 of adding Twitter/X social tags

You might like to add Twitter/X specific meta tags to your site so pages display correctly on their platform. Simply add the following 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 videos will show you how to use the Template feature in Elements. The videos were recorded with a development version of Elements so the feature(s) available now may differ slightly to those in the video.

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