Skip to documentation content

Javascript

On this page

    The javascript object and methods for adding scripts.

    {{ javascript }}

    Properties
    Name Type Description
    object_type string Will always be javascript
    is_valid boolean True if this references a published javascript
    guid string The unique identifier for this javascript
    value string Contains the same value as guid
    name {{ text }} The name of the javascript which, when combined together with the path, uniquely identifies the javascript on this site
    path string The path, excluding filename, of this javascript used for organizational and reference purposes
    script {{ code }} The source code for the script
    url string The full public URL for this javascript in the CDN
    parse_liquid boolean When true, indicates that this javascript should be parsed and rendered using liquid markup before being stored in the CDN for future reference
    pre_includes {{ javascripts }} Additional javascript objects to bundle together and output before the current script
    post_includes {{ javascripts }} Additional javascript objects to bundle together and output after the current script
    minify boolean When true, specifies that the current script should automatically be minified before being output
    script_compiled string The final result of bundling, compiling, and minifying this javascript object
    field_id string The identifier for this field
    label string The label for this field
    output string Adds the javascript to the document head, similar to calling {% add_javascript %} with it
    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 Load one javascript asset and read its path and url{% javascript %} loads a single javascript by path or GUID; path and url locate the script asset.
    Liquid
    {%- javascript var app = "/javascript/site-app" -%}
{%- if app.is_valid -%}
	<p>{{ app.name }} → {{ app.path }} ({{ app.url }})</p>
{%- endif -%}

    {% javascript %} fetches a single javascript asset. Pass the path of the script or its GUID after the assignment target; a path that does not start with / is resolved against the current template. Fields include name, path, url, script, parse_liquid, and include lists. To attach scripts to the page, prefer {% add_javascript %}; use this method when you need the javascript object's fields.

    Example Fetch javascripts filtered by path and list their names{% javascripts %} returns a javascripts list; path and minify options narrow which script assets are returned.
    Liquid
    {%- javascripts var scripts = path:"/js/" limit:50 sort_by:"name" -%}
<ul>
{%- for script in scripts -%}
	<li>{{ script.name }} — {{ script.path }}</li>
{%- endfor -%}
</ul>

    {% javascripts %} is the list method for javascript assets. Type-specific options such as path and minify combine with shared list options (limit, sort_by). Iterate the resulting javascripts object directly.

    {{ javascripts }}

    Contains multiple scripts.

    Properties
    Name Type Description
    object_type string Will always be javascripts
    is_valid boolean True if this contains at least one published javascript
    output string The default output that the javascripts will produce when it is output directly to the template - using the "output_in_list" property of each javascript in the items list
    prepended list List containing any prepended javascripts.
    fetched list List containing all of the javascripts that were fetched from the database (as opposed to prepended or appended).
    appended list List containing any appended javascripts.
    appended_unique list List containing any appended javascripts excluding any javascripts that are in either the list of prepended or fetched javascripts.
    items list List containing all of the combined javascripts 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 javascripts specified.
    size integer The total number of javascripts 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 javascripts 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 javascript will be included.
    limit integer The maximum number of items that were allowed to be in the list of fetched javascripts. May be 0 in some cases (such as when when there are no fetched javascripts.
    start integer The 1-based index of the first item in the list of fetched javascripts.
    page integer The 1-based index of the paginated results returned in the list of fetched javascripts, 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 javascripts
    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 javascripts filtered by path and list their names{% javascripts %} returns a javascripts list; path and minify options narrow which script assets are returned.
    Liquid
    {%- javascripts var scripts = path:"/js/" limit:50 sort_by:"name" -%}
<ul>
{%- for script in scripts -%}
	<li>{{ script.name }} — {{ script.path }}</li>
{%- endfor -%}
</ul>

    {% javascripts %} is the list method for javascript assets. Type-specific options such as path and minify combine with shared list options (limit, sort_by). Iterate the resulting javascripts object directly.

    {% javascript %}

    Identifies the javascript 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.

    {% javascript output_to_template? [[var, set, or assign]? variable_name]? output_to_template? = value %}
    Parameters
    output_to_template optionalflag
    Include this flag to write the javascript'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 javascript 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 {% javascript = value %} the smallest valid use of this method. When the call names a variable, the flag saves the javascript 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 javascript. 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 javascript to the template instead.
    value requiredexpression
    Required; without a value the method call is not valid. Identifies which javascript to fetch. It can evaluate to the javascript 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 javascript, 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 {{ javascript }}.

    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 Load one javascript asset and read its path and url{% javascript %} loads a single javascript by path or GUID; path and url locate the script asset.
    Liquid
    {%- javascript var app = "/javascript/site-app" -%}
{%- if app.is_valid -%}
	<p>{{ app.name }} → {{ app.path }} ({{ app.url }})</p>
{%- endif -%}

    {% javascript %} fetches a single javascript asset. Pass the path of the script or its GUID after the assignment target; a path that does not start with / is resolved against the current template. Fields include name, path, url, script, parse_liquid, and include lists. To attach scripts to the page, prefer {% add_javascript %}; use this method when you need the javascript object's fields.

    {% javascripts %}

    The prepend, append and exclude arguments identify a javascript by its path and name or by its GUID, as {% javascript %} 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 {% javascript %} but means /partials/_card.liquid here. The path option is compared with each javascript's stored folder path as written (for example /partials), does not include child folders, and is not normalized.

    {% javascripts output_to_template? [[var, set, or assign]? variable_name]? output_to_template? = arguments %}
    Parameters
    output_to_template optionalflag
    Include this flag to write the javascripts 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 javascripts 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 javascripts 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 javascripts 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 javascripts.

    Options

    prepend optionallist
    May be a single javascript, a list of javascripts, or the name or guid of one javascript, to be included at the beginning of the javascripts list.
    append optionallist
    May be a single javascript, a list of javascripts, or the name or guid of one javascript, to be included at the end of the javascripts list.
    exclude optionallist
    May be a single javascript, a list of javascripts, or the name or guid of one javascript that should NOT be included in the fetched results. Has no effect on prepended or appended javascripts.
    exclude_prepended optionalboolean
    True to specifically exclude all prepended javascripts 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 javascripts 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 javascripts as needed. Note that this may also impact both the "page" and "total_pages" values in the resulting javascripts. In order to use pagination with a list loaded using "max_size" use "start" instead of "page" and "limit".
    minify optionalvalue
    Only include javascript objects that have the specified boolean value for their minify setting
    path optionalvalue
    May include multiple paths. Only include javascript objects with one of the given paths (excluding child paths)
    date_created_start optionalvalue
    Only include javascript objects with date_created greater than or equal to date_created_start. Remember that date_created will typically be the date that the javascript objects was first published.
    date_created_end optionalvalue
    Only include javascript objects with date_created less than or equal to date_created_end. Remember that date_created will typically be the date that the javascript object was first published.
    start optionalinteger
    Set the 1-based index of the first javascript to fetch.
    page optionalinteger
    Used to automatically calculate the first javascript 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 javascripts 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 javascripts. 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 javascripts. 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 javascript 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 {{ javascripts }}.

    Example Fetch javascripts filtered by path and list their names{% javascripts %} returns a javascripts list; path and minify options narrow which script assets are returned.
    Liquid
    {%- javascripts var scripts = path:"/js/" limit:50 sort_by:"name" -%}
<ul>
{%- for script in scripts -%}
	<li>{{ script.name }} — {{ script.path }}</li>
{%- endfor -%}
</ul>

    {% javascripts %} is the list method for javascript assets. Type-specific options such as path and minify combine with shared list options (limit, sort_by). Iterate the resulting javascripts object directly.