如果您想从您的Twig文件中添加JavaScript、CSS和HTML，您可以这样做:

{# Add assets into head of the document by using default priority. #}
{% assets in 'head' with { priority: 0 } %}
    <link rel="stylesheet" href="{{ url('gantry-theme://css/my.css') }}" type="text/css"/>
    <style>
        body {color: red}
    </style>
    <script type="text/javascript" src="{{ url('gantry-theme://js/my.js') }}"></script>
    <script type="text/javascript">
        var MY_VAR = 'test';
    </script>
{% endassets -%}

基本上，可以选择两个可选参数:

• in 'x'
• with { priority: y }

参数x是您想要添加内容的位置(head和footer目前由Hydrogen主题支持)，y是优先级，用于命令资产默认为0，范围从-10到10。

优先级较高的数字被添加到文档中，在任何较低的数字之前。如果有多个具有相同优先级的资产标记，则它们的排序没有定义。

还有一个JavaScript的Twig标签:

{# Add javascript into end of the document (before any other javascript in the footer). #}
{% scripts in 'footer' with { priority: 10 } %}
    <script type="text/javascript" src="{{ url('gantry-theme://js/footer.js') }}"></script>
    <script type="text/javascript">
        var MY_VAR = 'test';
    </script>
{% endscripts -%}

只适用于样式表:

{# Add some stylesheets and make them to load last (override other styles). #}
{% styles with { priority: -10 } %}
    <link rel="stylesheet" href="{{ url('gantry-theme://css/my.css') }}" type="text/css"/>
    <style>
        body {color: red}
    </style>
{% endstyles -%}

在Gantry 5.3+中载入CSS / JS

从Gantry 5.3开始，有一种新的、更好的方法来添加JavaScript和CSS文件

加载JavaScript框架(只需JavaScript, CSS需要手动加载):

• jquery or jquery.framework
• jquery.ui.core
• query.ui.sortable
• bootstrap.2
• bootstrap.3
• mootools or mootools.framework or mootools.core
• mootools.more

{% do gantry.document.addFramework('mootools.core') %}
{% do gantry.document.addFramework('mootools.more') %}

添加CSS文件:

{% do gantry.document.addStyle(url('gantry-assets://css/whoops.css'), 5) %}
{% do gantry.document.addStyle({ href: url('gantry-assets://css/whoops.css') }, type: 'text/css', media: 'screen'), 5) %}

添加内联CSS:

{% do gantry.document.addInlineStyle('a { color: red; }', 0) %}
{% do gantry.document.addInlineStyle({ content: 'a { color: red; }', type: 'text/css' }, 0) %}

添加JavaScript文件:

{% do gantry.document.addScript(url('https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js'), 10, 'head') %}
{% do gantry.document.addScript({ 
    src: url('https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js'), 
    type: 'text/javascript',
    defer: 'defer',
    async: 'async',
    handle: 'mootools-code.js' {# WordPress only #}
}, 10, 'head') %}

添加内联JavaScript:

{% do gantry.document.addInlineScript('alert("test");', 0, 'footer') %}
{% do gantry.document.addInlineScript({ content: 'alert("test");', type: 'text/javascript' }, 0, 'footer') %}

除了addFramework()之外的所有函数都接受3个参数，其中第二个参数是优先级和第三个参数位置(通常是head或footer)。

第一个参数也可以是包含给定标签属性的关联数组。请注意，并非所有平台都支持所有属性。

编译自定义SCSS文件 有时需要将定制的SCSS文件编译成CSS并将其包含到页面中。

您可以通过将SCSS文件添加到custom/ SCSS文件夹并将其命名为Twig，这样做:

{% styles with { priority: 0 } %}
    <link rel="stylesheet" href="{{ url(gantry.theme.css('test')) }}" type="text/css"/>
{% endstyles -%}

在上面的示例文件中是custom/scss/test.scss。style选项卡中定义的所有变量都可以在任何SCSS文件中进行编译。

先进的技巧

您还可以添加自定义位置，您可以在其中输出样式和脚本。作为一个例子:

{{ gantry.styles('styles')|join("\n    ")|raw }}
{{ gantry.scripts('scripts')|join("\n    ")|raw }}

在定义了位置之后，你可以像头和页脚一样在他们里面添加一些东西：

{# Add javascript into your custom location. #}
{% scripts in 'scripts' %}
    <script type="text/javascript" src="{{ url('gantry-theme://js/script.js') }}"></script>
{% endscripts -%}

在Gantry 5.4.6+中添加HTML

有时需要在body之前或body之后添加一些HTML。

您可以从页面设置中添加HTML，但有时您可能想要从一个粒子或一个原子执行它。

添加HTML在body之后 标签:

{% pageblock body_top %}
    -BODY TOP-
{% endpageblock %}

添加HTML后div id=“g-page-surround”，但在主要布局前：

{% pageblock top %}
    -PAGE TOP-
{% endpageblock %}

在主布局之后添加HTML，但在结束之前div id="g-page-surround"

{% pageblock bottom %}
    -PAGE BOTTOM-
{% endpageblock %}

添加HTML在body之前 标签:

{% pageblock body_bottom %}
    -BODY BOTTOM-
{% endpageblock %}

此外，您可以提供优先级(10……-10):

{% pageblock bottom with { priority: -10 } %}
   This should be shown after everything else.
{% endpageblock %}