siteglide_scripts

 Last Edited: May 23, 2019

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 unwieldily and slow.

siteglide_head_scripts and siteglide_footer_scripts can be used anywhere on a page and automatically move their contents to either the head or bottom of the body 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

siteglide_head_scripts 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

siteglide_footer_scripts 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 %}