Skip to documentation content

Stylesheet

On this page

    The stylesheet object and methods for adding stylesheets.

    {{ stylesheet }}

    Properties
    Name Type Description
    object_type string Will always be stylesheet
    is_valid boolean True if this references a published stylesheet
    guid string The unique identifier for this stylesheet
    value string Contains the same value as guid
    name {{ text }} The name of the stylesheet which, when combined together with the path, uniquely identifies the stylesheet on this site
    path string The path, excluding filename, of this stylesheet used for organizational and reference purposes
    stylesheet_type {{ select }} Stylesheet language. May either be "css", "less", or "scss"
    compiled boolean If true, indicates that this is a top-level stylesheet that should be compiled
    parse_liquid boolean If true, indicates that this stylesheet contains Liquid Markup that should be rendered before the stylesheet is processed and output
    url string The full URL for this stylesheet in the CDN
    style_sheet_text {{ code }} The source code for this stylesheet
    style_sheet_text_compiled string The full processed and compiled stylesheet text if this is a compiled stylesheet
    field_id string The identifier for this field
    label string The label for this field
    output string Adds the stylesheet to the document head, similar to calling {% add_stylesheet %} with it
    Example Load one stylesheet and read its path and type{% stylesheet %} loads a single stylesheet by path or GUID; path, url, and stylesheet_type describe the CSS asset.
    Liquid
    {%- stylesheet var theme = "/stylesheets/site-theme" -%}
{%- if theme.is_valid -%}
	<p>{{ theme.name }} ({{ theme.stylesheet_type }}) → {{ theme.path }}</p>
{%- endif -%}

    {% stylesheet %} fetches a single stylesheet. Pass the path of the stylesheet or its GUID after the assignment target; a path that does not start with / is resolved against the current template. Stylesheet fields include path, url, stylesheet_type, compiled, parse_liquid, and the CSS text properties. To attach CSS to the page, prefer {% add_stylesheet %}; use this method when you need the stylesheet object's fields.

    Example Fetch stylesheets filtered by stylesheet_type{% stylesheets %} returns a stylesheets list; stylesheet_type (and other list options) narrow which CSS assets are returned.
    Liquid
    {%- stylesheets var sheets = stylesheet_type:"scss" limit:50 sort_by:"name" -%}
<ul>
{%- for sheet in sheets -%}
	<li>{{ sheet.name }} — {{ sheet.path }}</li>
{%- endfor -%}
</ul>

    {% stylesheets %} is the list method for stylesheet entities. Type-specific options such as stylesheet_type, compiled, is_legacy, and path combine with shared list options (limit, sort_by). Iterate the resulting stylesheets object directly.

    {{ stylesheets }}

    Contains multiple stylesheets.

    Properties
    Name Type Description
    object_type string Will always be stylesheets
    is_valid boolean True if this contains at least one published stylesheet
    output string The default output that the stylesheets will produce when it is output directly to the template - using the "output_in_list" property of each stylesheet in the items list
    prepended list List containing any prepended stylesheets.
    fetched list List containing all of the stylesheets that were fetched from the database (as opposed to prepended or appended).
    appended list List containing any appended stylesheets.
    appended_unique list List containing any appended stylesheets excluding any stylesheets that are in either the list of prepended or fetched stylesheets.
    items list List containing all of the combined stylesheets from the prepended, fetched, and appended lists. If unique is true, this list will not contain any duplicates. If max_size is set, this list will not contain more than the number of stylesheets specified.
    size integer The total number of stylesheets in the items list, including prepended, fetched, and appended lists, and respecting the unique and max_size properties.
    max_size integer If set, this is the maximum number of items that will be returned in the items list and the maximum number of items that will be included when this stylesheets object is enumerated as a list. When not set, this value will be 0.
    unique boolean When true, the items list will not contain any duplicates. Only the first instance of each stylesheet will be included.
    limit integer The maximum number of items that were allowed to be in the list of fetched stylesheets. May be 0 in some cases (such as when when there are no fetched stylesheets.
    start integer The 1-based index of the first item in the list of fetched stylesheets.
    page integer The 1-based index of the paginated results returned in the list of fetched stylesheets, which is calculated from the start and limit parameters. Useful for paginated results.
    total_count integer The 1-based index of the first item in the list of fetched stylesheets
    total_pages integer If any items were fetched from the database, total_pages will contain the number of paginated result pages in the database for the provided arguments. This may also be calculated using the total_count and limit properties.
    Example Fetch stylesheets filtered by stylesheet_type{% stylesheets %} returns a stylesheets list; stylesheet_type (and other list options) narrow which CSS assets are returned.
    Liquid
    {%- stylesheets var sheets = stylesheet_type:"scss" limit:50 sort_by:"name" -%}
<ul>
{%- for sheet in sheets -%}
	<li>{{ sheet.name }} — {{ sheet.path }}</li>
{%- endfor -%}
</ul>

    {% stylesheets %} is the list method for stylesheet entities. Type-specific options such as stylesheet_type, compiled, is_legacy, and path combine with shared list options (limit, sort_by). Iterate the resulting stylesheets object directly.

    {% stylesheet %}

    Identifies the stylesheet by its path and name. The path can be absolute (it begins with /, so it is taken from the root) or relative (it is resolved against the folder of the template being rendered, and .. moves up one folder; ./ is not supported). The name is matched as stored, with no extension added or removed. {% include %} gives the full rules, which are the same here.

    {% stylesheet output_to_template? [[var, set, or assign]? variable_name]? output_to_template? = value %}
    Parameters
    output_to_template optionalflag
    Include this flag to write the stylesheet's output into the page at this point. What that output is differs by type, and for most types it is a built-in default that may change at any time, so see the output property of the stylesheet object before relying on it. The flag may come before or after the variable name. When the call names no variable, the output is written whether or not the flag is present, which makes {% stylesheet = value %} the smallest valid use of this method. When the call names a variable, the flag saves the stylesheet to the variable and writes its output as well.
    var, set, or assign optionalkeyword
    Chooses the scope that holds the variable. var, the default, stores it in the current scope. set and assign can store it in outer scopes; Variable Scopes compares the three and when each fits.
    variable_name optionalvariable
    The variable that receives the stylesheet. It may also be written as a reference, &name, which reads the variable's name from another variable (see Methods Overview). Leave it out to write the stylesheet to the template instead.
    value requiredexpression
    Required; without a value the method call is not valid. Identifies which stylesheet to fetch. It can evaluate to the stylesheet itself, to its GUID, or to other text that identifies it, which for most types is its name; a type identified some other way, or only by GUID, says so in its summary. Names are matched without regard to case, but accented letters must match. A GUID identifies exactly one record, whereas when several records share a name, which of them is returned is not specified, so giving the records you fetch by name unique names avoids the question. A name reads better in a template and a GUID is exact; neither suits every site. When nothing matches, no error is raised: the variable holds an invalid stylesheet, whose is_valid is false, so check is_valid before using it. When the expression itself has no value, for example an undefined variable, the method does nothing and the variable keeps any earlier value. May use liquid filters.

    Fetches a single {{ stylesheet }}.

    Example Load one stylesheet and read its path and type{% stylesheet %} loads a single stylesheet by path or GUID; path, url, and stylesheet_type describe the CSS asset.
    Liquid
    {%- stylesheet var theme = "/stylesheets/site-theme" -%}
{%- if theme.is_valid -%}
	<p>{{ theme.name }} ({{ theme.stylesheet_type }}) → {{ theme.path }}</p>
{%- endif -%}

    {% stylesheet %} fetches a single stylesheet. Pass the path of the stylesheet or its GUID after the assignment target; a path that does not start with / is resolved against the current template. Stylesheet fields include path, url, stylesheet_type, compiled, parse_liquid, and the CSS text properties. To attach CSS to the page, prefer {% add_stylesheet %}; use this method when you need the stylesheet object's fields.

    {% stylesheets %}

    The prepend, append and exclude arguments identify a stylesheet by its path and name or by its GUID, as {% stylesheet %} does, with one difference: a list method reads every path from the root, with or without the leading /, and cannot take a relative path. The same text, such as partials/_card.liquid, is relative to the current folder in {% include %} and in {% stylesheet %} but means /partials/_card.liquid here. The path option is compared with each stylesheet's stored folder path as written (for example /partials), does not include child folders, and is not normalized.

    {% stylesheets output_to_template? [[var, set, or assign]? variable_name]? output_to_template? = arguments %}
    Parameters
    output_to_template optionalflag
    Include this flag to write the stylesheets list's output into the page here. That output is a built-in default for most types and may change at any time, so see the output property of the stylesheets object before relying on it. The flag may come before or after the variable name. With no variable named, the output is written whether or not the flag is present; with one, the flag saves the list and writes its output too.
    var, set, or assign optionalkeyword
    Chooses the scope that holds the variable. var, the default, stores it in the current scope. set and assign can store it in outer scopes; Variable Scopes compares the three and when each fits.
    variable_name optionalvariable
    The variable that receives the stylesheets list. It may also be written as a reference, &name, which reads the variable's name from another variable (see Methods Overview). Leave it out to write the list to the template instead.
    arguments requiredcollection
    Key:value pairs. May use the variable arguments syntax. Written after a required =. The name:value pairs choose which stylesheets to fetch and how to narrow, order and page them. Nothing is fetched unless the call gives an argument other than prepend, append, unique, exclude_prepended, exclude_appended, max_size and cache_random; without one, the list holds only the prepended and appended stylesheets.

    Options

    prepend optionallist
    May be a single stylesheet, a list of stylesheets, or the name or guid of one stylesheet, to be included at the beginning of the stylesheets list.
    append optionallist
    May be a single stylesheet, a list of stylesheets, or the name or guid of one stylesheet, to be included at the end of the stylesheets list.
    exclude optionallist
    May be a single stylesheet, a list of stylesheets, or the name or guid of one stylesheet that should NOT be included in the fetched results. Has no effect on prepended or appended stylesheets.
    exclude_prepended optionalboolean
    True to specifically exclude all prepended stylesheets from the fetched results. If "unique:true" is specified this is the default behavior, although you may also specify "exclude_prepended:false" to allow any prepended items to be fetched along with other results anyway.
    exclude_appended optionalboolean
    True to specifically exclude all appended stylesheets from the fetched results. This is false by default - even if "unique:true" is specified - so that results are returned in the proper order.
    unique optionalboolean
    True to remove duplicates from each of the resulting lists (prepended, fetched, appended, and items), although there may be duplicates between the prepended, fetched, and appended lists. The "items" list will include objects in the order in which they appear - with prepended items first, then fetched items, then appended items.
    max_size optionalinteger
    The maximum number of items to be included in the "items" list. If there are any prepended or appended items, this will automatically lower the "limit" to only fetch as many stylesheets as needed. Note that this may also impact both the "page" and "total_pages" values in the resulting stylesheets. In order to use pagination with a list loaded using "max_size" use "start" instead of "page" and "limit".
    stylesheet_type optionalvalue
    Only include stylesheets of the given type
    compiled optionalvalue
    Only include stylesheets that either are or are not compiled
    is_legacy optionalvalue
    only include stylesheets that are marked as using a legacy compiler
    path optionalvalue
    May include multiple paths. Only include stylesheets with one of the given paths (excluding child paths)
    date_created_start optionalvalue
    Only include stylesheets with date_created greater than or equal to date_created_start. Remember that date_created will typically be the date that the stylesheet was first published.
    date_created_end optionalvalue
    Only include stylesheets with date_created less than or equal to date_created_end. Remember that date_created will typically be the date that the stylesheet was first published.
    start optionalinteger
    Set the 1-based index of the first stylesheet to fetch.
    page optionalinteger
    Used to automatically calculate the first stylesheet to fetch based on both the "limit" and the 1-based "page" value. Defaults to 1, but is ignored if "start" is set.
    limit optionalinteger
    The maximum number of stylesheets to fetch. Defaults to 10; a value that is not a number also gives 10. The largest limit is 1000, and a limit of 0 or less, or above 1000, returns up to 1000 stylesheets. Note that if "max_size" is defined, then "limit" may be automatically lowered even if specified separately.
    sort_by optionalstring
    Specify which property to sort the results by. Has no effect on prepended or appended stylesheets. An unrecognized value is ignored without an error and the default order is used. Some methods accept more values than the built-ins listed here; see each method. Options include:
    • date_created: the date each stylesheet was first published. Unpublishing and republishing one resets date_created to the current date.
    • random: results will be returned in a random order, which prevents the page from being fast-cached. Setting cache_random:true overrides this behavior and allows the page to be fast-cached anyway.
    • name
    • title
    • url
    • browser_title
    sort_direction optionalstring
    asc or desc. Defaults to desc; any value other than asc sorts descending.
    cache_random optionalboolean
    True to allow the results to be cached when sort_by is "random".

    Fetches a list of {{ stylesheets }}.

    Example Fetch stylesheets filtered by stylesheet_type{% stylesheets %} returns a stylesheets list; stylesheet_type (and other list options) narrow which CSS assets are returned.
    Liquid
    {%- stylesheets var sheets = stylesheet_type:"scss" limit:50 sort_by:"name" -%}
<ul>
{%- for sheet in sheets -%}
	<li>{{ sheet.name }} — {{ sheet.path }}</li>
{%- endfor -%}
</ul>

    {% stylesheets %} is the list method for stylesheet entities. Type-specific options such as stylesheet_type, compiled, is_legacy, and path combine with shared list options (limit, sort_by). Iterate the resulting stylesheets object directly.

    {% add_stylesheet %}

    Add a stylesheet asset to the head of the current page via a <link> tag

    {% add_stylesheet value attributes %}
    Parameters
    value requiredobject
    The stylesheet to add: a Stylesheet object, its GUID, or its path, absolute or relative to the folder of the template being rendered, as for {% stylesheet %}. A value that starts with http://, https:// or // is used as the address as given. A stylesheet that is not found adds nothing and raises no error.
    attributes optionaldictionary
    Key:value pairs with unique keys. May use the variable arguments syntax. Additional attributes to include on the link tag. Attributes must have string values. "link" and "rel" are not allowed as they will always be set by this method.

    Options

    position optionalvalue
    Where to output the stylesheet in the current page. May either be "head", "body", or "in_place". If "head", the stylesheet will be output inside the HTML head, if "body", the stylesheet will be output at the end of the 'body' tag. If "in_place", the stylesheet will be output immediately to the template. The default is "head", which typically results in the best browser performance. If the page has no head element (for "head") or no body element (for "body"), nothing is output and no error is raised; "in_place" is not affected.
    Example How to use the add_stylesheet methodAdd linked or inline stylesheets to a page with add_stylesheet; use path, third-party URL with attributes, or inline named/in-place blocks.

    Add linked stylesheet from a path

    Liquid
    {% add_stylesheet "/bootstrap/bootstrap.scss" %}

    Adds the stylesheet from the specified path to the page. This is the simplest way to add a stylesheet to a page and may be used from any template.

    Add third-party stylesheet with additional custom attributes

    Liquid
    {% add_stylesheet "https://cdn.thirdpartyservice.com/path/to/stylesheet" crossorigin:'anonymous' integrity:'sha384-...' %}

    Adds the third-party stylesheet to the head of the page with the specified crossorigin and integrity attributes.

    Add inline stylesheet

    Liquid
    {%- add_stylesheet inline xxkr_footer_frompage -%}
//Use your imagination here!
#footer {
  background-color: '{{entity.footer_background_color}}';
  color: '{{entity.footer_text_color}}';
}
{%- end_stylesheet -%}

    Adds the inline stylesheet to the body of the page. Because the stylesheet is named (xxkr_once), the stylesheet will only be added once and can be used in one or more partial templates which may be included multiple times in a page. Each stylesheet to be included should have a unique name.Adds the inline stylesheet to the page. Because the stylesheet is named (xxkr_footer_frompage), the stylesheet will only be added once and can be used in one or more partial templates which may be included multiple times in a page. Each stylesheet to be included should have a unique name.

    Add inline stylesheet in place

    Liquid
    {%- for item in (1..3) -%}
	{%- id itemid = prefix:'item_' -%}
	<div id="{{itemid}}">{{item}}</div>
	{%- add_stylesheet inline = position:'in_place' -%}#{{itemid}} { background-color: '{{ cycle xxkr_itemcolor: '#CCC', 'rgba(242, 122, 55, 0.7)', 'black' }}'; }
{%- end_stylesheet -%}
{%- endfor -%}

    Adds the inline stylesheet immediately to the page, which will result in a separate style tag for each item. There are typically better ways to achieve the same result, but there are times when this may be the most practical solution.

    {% add_stylesheet inline %}

    Outputs an inline stylesheet in a <style> tag.

    {% add_stylesheet inline [uniquename] [= attributes]? %}
    Parameters
    uniquename optionalstring
    If included, only one style tag will be included for each uniquename. This makes it safe to add an inline stylesheet in one or more partial templates which may be included multiple times in a page.
    attributes optionaldictionary
    Key:value pairs with unique keys. May use the variable arguments syntax.

    Options

    position optionalvalue
    Where to output the style tag in the current page. May either be "head", "body", or "in_place". If "head", the style tag will be output inside the HTML head, if "body", the style tag will be output at the end of the 'body' tag. If "in_place", the style/link tag will be output immediately to the template. The default is "head", which typically results in the best browser performance.
    other optionalvalue
    Additional attributes to include on the style tag (such as "media", "id", or "disabled"). Additional attributes must have string values
    {% end_stylesheet %}

    This method creates a new liquid context for storing and manipulating variables.

    Example How to use the add_stylesheet methodAdd linked or inline stylesheets to a page with add_stylesheet; use path, third-party URL with attributes, or inline named/in-place blocks.

    Add linked stylesheet from a path

    Liquid
    {% add_stylesheet "/bootstrap/bootstrap.scss" %}

    Adds the stylesheet from the specified path to the page. This is the simplest way to add a stylesheet to a page and may be used from any template.

    Add third-party stylesheet with additional custom attributes

    Liquid
    {% add_stylesheet "https://cdn.thirdpartyservice.com/path/to/stylesheet" crossorigin:'anonymous' integrity:'sha384-...' %}

    Adds the third-party stylesheet to the head of the page with the specified crossorigin and integrity attributes.

    Add inline stylesheet

    Liquid
    {%- add_stylesheet inline xxkr_footer_frompage -%}
//Use your imagination here!
#footer {
  background-color: '{{entity.footer_background_color}}';
  color: '{{entity.footer_text_color}}';
}
{%- end_stylesheet -%}

    Adds the inline stylesheet to the body of the page. Because the stylesheet is named (xxkr_once), the stylesheet will only be added once and can be used in one or more partial templates which may be included multiple times in a page. Each stylesheet to be included should have a unique name.Adds the inline stylesheet to the page. Because the stylesheet is named (xxkr_footer_frompage), the stylesheet will only be added once and can be used in one or more partial templates which may be included multiple times in a page. Each stylesheet to be included should have a unique name.

    Add inline stylesheet in place

    Liquid
    {%- for item in (1..3) -%}
	{%- id itemid = prefix:'item_' -%}
	<div id="{{itemid}}">{{item}}</div>
	{%- add_stylesheet inline = position:'in_place' -%}#{{itemid}} { background-color: '{{ cycle xxkr_itemcolor: '#CCC', 'rgba(242, 122, 55, 0.7)', 'black' }}'; }
{%- end_stylesheet -%}
{%- endfor -%}

    Adds the inline stylesheet immediately to the page, which will result in a separate style tag for each item. There are typically better ways to achieve the same result, but there are times when this may be the most practical solution.

    {% include %}

    Processes and outputs a partial template, javascript, or stylesheet. If the partial template is a compiled template, then any custom fields from the partial template will be available in the parent template as well.

    {% include [template|javascript|stylesheet]? variable =? attributes? %}
    Parameters
    type optionalstring
    Explicit type selector: template, javascript, or stylesheet. If not specified, the object to be included will be the same as the type of the current object (in a template this will default to template, etc...).
    variable requiredobject
    May be the template, javascript, or stylesheet object to include, the unique identifier for the object to include, or the absolute or relative path to the template, javascript, or stylesheet
    attributes optionaldictionary
    Key:value pairs with unique keys. May use the variable arguments syntax. Variables to set on the created scope before the included object is processed

    This method creates a new liquid context for storing and manipulating variables.

    The text after include is a path (or an object, or a GUID). Every template, javascript and stylesheet has a path, even if that is the root path (/), and a name; together they identify it, for example /sections/_banner.liquid. A path can be absolute or relative. An absolute path begins with / and is taken from the root, whatever template is doing the including: {% include '/partials/header.liquid' %}. A relative path does not begin with / and is resolved against the folder of the template being rendered: including 'header.liquid' from a template in /pages processes /pages/header.liquid, and the same include from a template at the root processes /header.liquid. Inside an included template, relative means relative to that template's own folder, not the page's. .. moves up one folder, so '../partials/header.liquid' from a template in /agency/pages processes /agency/partials/header.liquid, and any .. beyond the root is ignored. ./ is not supported: the leading . is read as a folder named '.', which matches nothing, so write 'header.liquid' for a template in the current folder. The name is matched as stored, with no extension added or removed, so keep the .liquid ending when the template's name has one. Instead of a path you can pass the object itself or its GUID; either skips path resolution, and with no type keyword the type is the type of the template currently being rendered. When nothing matches, the live site outputs a comment naming the full path that was looked up (a /** */ comment for a stylesheet or javascript) rather than stopping the page, and preview raises an error instead. The list methods {% templates %}, {% stylesheets %} and {% javascripts %} read paths differently: from the root only, never relative.

    Example Capturing markup and passing it to an included templateCapture a block of markup with the capture method and pass it to an included template as a variable.
    Liquid
    {%- capture blockContent -%}
	<div class="block-outer">
		<h3 class="block-title">
			{%- if article.default_page_url.is_valid -%}
				<a href="{{article.default_page_url.value}}">{{article.title}}</a>
			{%- else -%}
				{{-article.title-}}
			{%- endif -%}
		</h3>
		<div class="block-description">{{article.summary_html}}</div>
		<div class="block-footer">Posted {{article.post_date}}</div>
	</div>
{%- endcapture -%}
{%- include "_block_outer" content:blockContent -%}
    Example Checkbox Include Partial TemplateInclude a partial template conditionally when a checkbox (or other) field is checked.
    Liquid
    <p>Show Sidebar? <strong>{{ page.show_sidebar }}</strong></p>
{%- if page.show_sidebar.checked -%}
	{%- include "Sidebar" -%}
{%- endif -%}
    Example Include a template whose name is in a variableDemonstrates multple ways to dynamically include a template. Note that in all of these examples, the template fields will NOT be compiled in the page definition.

    Dynamically Include a Template from a Variable

    Liquid
    {%- var dynamicTemplate = "/partials/footer-main.liquid" -%}
{%- include dynamicTemplate -%}

    Dynamically Include Template from a Select List

    Liquid
    {%- if page.page_layout.is_valid -%}
	<div class="sidebar-{{ page.page_layout.value }}">
		{%- var includeTemplate = "/theme/sidebar/" | append:page.page_layout.value -%}
		{%- include includeTemplate -%}
	</div>
{%- endif -%}

    Assuming that page_layout is a select field or similar, this code dynamically creates the name of the template to include based on the selected value.

    Dynamically Include Multiple Templates from a TemplateList Field

    Liquid
    {%- if page.sidebar_sections.count > 0 -%}
	{%- for section in page.sidebar_sections.selected -%}
		{%- include section -%}
	{%- endfor -%}
{%- endif -%}

    Assuming that sidebar_sections is a templatelist field or similar, this code dynamically includes each of the selected templates.

    Check if a dynamic template exists before including it

    Liquid
    {%- template var dynamicTemplate = "/theme/sidebar/" | append: page.sidebar_section.value | append: ".liquid" -%}
{%- if dynamicTemplate.is_valid -%}
	{%- include dynamicTemplate -%}
{%- endif -%}

    Assuming that sidebar_sections is a templatelist field or similar, this code dynamically includes each of the selected templates.

    Example How to use the {% include %} method

    Basic use case

    Liquid
    {% include "/_header.liquid" %}

    Includes the partial template from the specified path. This is the simplest way to include a partial template.

    Include partial by string with attributes

    Liquid
    {% include "/sections/_banner.liquid" section_class:'banner-section mb-5' show_title:true show_description:false %}

    Includes the partial template from the specified path. The new scope created by the include method will have the specified attributes available as variables.

    Expanded example with relative and absolute paths

    Liquid
    {%- search searchCollection "keyword" limit:10 page:search-page -%}
{%- for result in searchCollection -%}
	{%- include "search-result.liquid" item:result -%}
{%- endfor -%}
{%- include "/shared/_pagination.liquid" collection:searchCollection style:"links" max_links:5 -%}

    Includes the partial template from the specified path. The relative path, search-result.liquid, is resolved against the folder of the template doing the including; do not start it with ./, which is not supported. The absolute path begins with / and is taken from the root of the website.

    Example Inline javascript from templateOutput inline JavaScript from template variables (e.g. for config or data) with proper escaping.
    Liquid
    <script>{% include javascript "/javascript/inlined/blog" %}</script>
OR
{%- javascript js = "/javascript/inlined/blog" -%}
{%- if js is_valid -%}
<script>{% include js %}</script>
{%- endif -%}
    Example Include sidebar template unless a query param is falseInclude a sidebar template only when a query parameter is not false, using unless.
    Liquid
    {%- unless request.query_params contains "show_sidebar=false" -%}
	{%- if request.query_params has_key "show_sidebar" -%}
		{%- include "_custom_sidebar" type:request.query_params.show_sidebar -%}
	{%- else -%}
		{%- include "_default_sidebar" type:request.query_params.show_sidebar -%}
	{%- endif -%}
{%- endunless -%}