Introduction
Typically when building a website, we have one or two core stylesheets and JavaScript files that contain the styling for your entire website.
When building large sites, however, these files can contain many thousands of lines of code. This can mean that loading the head files for the entire website on each and every page, can become unwieldy and slow.
siteglideheadscripts and siteglidefooterscripts can be used anywhere on a page and automatically move their contents to either the
or bottom of the respectively.
This allows you to have a smaller globals stylesheet for elements that remain consistent across all pages of your site, while having separate small files for specific section styling. Within each section, you can call out the specific stylesheet within one of these tags which means you only call out the styling you are actually using on each page.
Head Scripts
siteglideheadscripts moves the contained assets into the head of your page when it renders. You must include ,, on the end of each line within this liquid tag.
{% content_for 'siteglide_head_scripts' %} <link rel="stylesheet" href="{{'css/modules/module_3/design_system/1/sidebar.min.css' | asset_url}}" />,,{% endcontent_for %}
Footer Scripts
siteglidefooterscripts moves the contained assets to the bottom of the body tag on your page when it renders. You must include ,, on the end of each line within this liquid tag.
{%- content_for 'siteglide_footer_scripts' %} <link rel="stylesheet" href="{{ 'css/modules/module_9/custom.css' | asset_url}}" />,,{%- endcontent_for %}
Troubleshooting
Problem
My JavaScript console has the error: Uncaught SyntaxError: Unexpected end of input?
Solution
This error can occur if you use single-line comments in your inline JavaScript and then wrap that script inside the head or footer scripts. It's because the newlines are removed from the JavaScript- meaning the single-line comments do not end when they should.
You can fix it by moving your JavaScript to an external file or replacing single-line comments // with opening /* and closing */ JavaScript comments.
Performance and Avoiding Duplicates
When you use content_for you can add resources from many different files and they'll all output together in the
or before the closing tag. While this is convenient, you should be especially wary of accidentally including the exact same resource twice and slowing down your page.
To help avoid this, Siteglide will attempt to check the tags you've added for any duplicates before outputting. This happens on the server-side. Adding two commas ,, at the end of each line, allows this functionality to work.
We'd still recommend you check your Page Source for any duplicate resources. It's still possible for this to happen if you add the same resource to siteglide_head_scripts from two different Layouts with different CDN links each time.
Duplicate checking checks for duplicate tags, it doesn't follow the links and check for duplicate content. If you always load from our CDN using | asset_url the risk of this is reduced.
Using content_for with your own namespace
The platformOS docs explain how you can add any namespace to the content_for tag and use it in conjunction with the yield tag to send any variable from the Page to the Page Template.
Content For: https://documentation.platformos.com/api-reference/liquid/platformos-tags#content_for
Yield: https://documentation.platformos.com/api-reference/liquid/platformos-tags#yield
If using this, we'd recommend again that you check for any duplicate resources, as at the time of writing there is a known issue with this technique. For now, there are two ways to make this work:
- Use our namespaces listed above
- Use the
flush: 'true'parameter to prevent duplicates occurring. This empties the namespace clean each time you add something- meaning you can only add content to the namespace once.