twig html实体,如何从Twig加载CSS / JS / HTML ?

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

{# Add assets into head of the document by using default priority. #}

{% assets in 'head' with { priority: 0 } %}

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

{% endscripts -%}

只适用于样式表:

{# Add some stylesheets and make them to load last (override other styles). #}

{% styles with { priority: -10 } %}

{% 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 } %}{% 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' %}{% 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 %}