粒子(Particle)块

: 2593

有时您只想加载CSS或JavaScript资源，而不会将它们显示在页面的底部。粒子(Particle)集成了对JavaScript和样式表的支持，即使粒子(Particle)本身不是原子。除了访问CSS和JavaScript元素之外，您基本上可以拥有包含标准粒子(Particle)内容的单个粒子(Particle)。

这是将JavaScript和样式表块嵌入页面的特定部分的一种非常有用的方法。

在一个粒子(Particle)中加载的资源只加载一次。如果您在一个粒子(Particle)中调用特定的JavaScript文件，则在另一个粒子(Particle)中这样做将不会对页面产生额外的影响。它只会加载一次。

粒子模板

在本指南中，我们将介绍出现在粒子(Particle)中的不同类型的块，以及如何使用它们从粒子(Particle)向页面添加元素，而不是将它们加载到页面模板中。

以下是一个示例文件，演示了您可以在粒子(Particle)中使用的不同块。

{% extends '@nucleus/partials/particle.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    {# any stylesheet you would like to render in <head> #}
{% endblock %}

{% block javascript %}
    {{ parent() }}
    {# any javascript you would like to render in <head> #}
{% endblock %}

{% block javascript_footer %}
    {{ parent() }}
    {# any javascript you would like to render before </body> #}
{% endblock %}

{% block particle %}
    {# particle output goes here #}
{% endblock %}

添加一个JavaScript块

给你的粒子(Particle)添加一个JavaScript块非常简单。在你的particle的twig文件中，你只需要创建一个JavaScript块并包含加载你的特定JavaScript资源的必要信息。以下是在标准粒子(Particle)中使用的JavaScript块的示例：

{% block javascript %}
    {{ parent() }}
    <script src="{{ url('gantry-theme://js/filename.js') }}"></script>
{% endblock %}

您可以将块放置在样式表或粒子(Particle)块之外，或者将它们环绕在这些其他元素（或其中的一部分）上以将JavaScript属性应用于它们。如果你想要在JavaScript之前加载JavaScript资源body页面的标签，你会交换 block javascript 同 block javascript_footer。

下面是一个用于真实应用程序的JavaScript代码块示例。在这种情况下，这是analytics.html.twig用于创建Gantry的Google Analytics原子的文件。

{% extends '@nucleus/partials/particle.html.twig' %}

{% block javascript %}
    {{ parent() }}
    {% if particle.ua.code  %}
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
            }){% if particle.ua.debug %}(window,document,'script','//www.google-analytics.com/analytics_debug.js','ga');{% else %}(window,document,'script','//www.google-analytics.com/analytics.js','ga');{% endif %}
            ga('create', '{{ particle.ua.code }}', 'auto');
        {% if particle.ua.anonym  %}
            ga('set', 'anonymizeIp', true);
        {% endif %}
        {% if particle.ua.ssl  %}
            ga('set', 'forceSSL', true);
        {% endif %}
            ga('send', 'pageview');
        </script>
    {% endif %}
{% endblock %}

添加样式表块

添加样式表块与JavaScript或粒子(Particle)块的工作方式非常相似。这是一个例子：

{% block stylesheets %}
    <link rel="stylesheet" href="{{ somelocation }}" type="text/css"/>
{% endblock %}

将样式表块与JavaScript块结合起来非常简单。实际上，我们使用这种方法通过单个粒子(Particle)加载JavaScript和CSS资源。这里是一个真实例子的应用程序assets.html.twig创建自定义CSS / JS原子的文件。

{% extends '@nucleus/partials/particle.html.twig' %}

{% block stylesheets %}
    {% for css in particle.css %}
        {% set attr_extra = '' %}
        {% if css.extra %}
            {% for attributes in css.extra %}
                {% for key, value in attributes %}
                    {% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
                {% endfor %}
            {% endfor %}
        {% endif %}

        <link rel="stylesheet" href="{{ url(css.location) }}" type="text/css"{{ attr_extra|raw }} />
    {% endfor %}
{% endblock %}

{% block javascript %}
    {% for script in particle.javascript %}
        {% set attr_extra = '' %}
        {% if script.extra %}
            {% for attributes in script.extra %}
                {% for key, value in attributes %}
                    {% set attr_extra = attr_extra ~ ' ' ~ key|e ~ '="' ~ value|e('html_attr') ~ '"' %}
                {% endfor %}
            {% endfor %}
        {% endif %}

        <script src="{{ url(script.location) }}" type="text/javascript"{{ attr_extra|raw }}></script>
    {% endfor %}
{% endblock %}