Il y a des moments où vous voulez juste avoir des ressources CSS ou JavaScript qui se chargent sans les voir apparaître dans la base de la page.
Les particules ont intégré la prise en charge pour les feuilles de style et JavaScript, même si la particule n’est pas un atome. Vous pourriez avoir essentiellement une seule particule qui inclut le contenu de particules standard en plus d'accéder au CSS et aux éléments JavaScript.

C'est un moyen très utile pour apporter du JavaScript et des feuilles de style blocs dans une partie très précise de votre page.

Vous cherchez plus d’informations sur l’utilisation de blocs dans Twig? Voila une tonne d'informations utiles sur la façon dont les blocs fonctionnent dans Twig.

Les ressources chargées dans une particule ne le sont qu'une seule fois. Si vous appelez un fichier JavaScript spécifique dans une particule, le faire dans une autre particule n’aura aucun effet supplémentaire sur la page. Il sera chargé uniquement une fois.

Template de particules

Dans ce guide, nous allons passer en revue les différents types de blocs qui apparaissent dans une particule, et comment vous pouvez les utiliser pour ajouter des éléments particule/atome à votre page au lieu d'avoir à les charger dans le template de la page.

Voici un exemple de fichier twig démontrant les différents blocs que vous pouvez utiliser dans une particule.

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

Ajout d'un bloc JavaScript

L’ajout d'un bloc JavaScript à vos particules est assez facile. Dans votre fichier twig du particule, vous devez juste créer un bloc JavaScript et inclure l'information nécessaire pour charger votre ressource JavaScript spécifique. Voici un exemple de bloc JavaScript utilisée dans une particule standard :

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

Vous pouvez placer le bloc en dehors de la feuille de style ou bloc de particules, ou le disposer autour de ces autres éléments (ou des parties d'entre eux) afin de leur appliquer cette propriété JavaScript. Si vous voulez qu’une ressource JavaScript soit chargée juste avant la balise </body> de la page, vous devriez échanger block javascript avec block javascript_footer.

Voici un exemple de bloc JavaScript appliqué au monde réel. Dans ce cas, il s'agit du fichier analytics.html.twig utilisé pour créer l'atome Google Analytics Gantry.

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

Ajout d'un bloc feuille de style

L’ajout d'un bloc de feuille de style fonctionne de manière très identique à un bloc JavaScript ou bloc de particules. Voici un exemple:

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

La combinaison d'un bloc de feuille de style avec un bloc JavaScript est assez simple à faire. En fait, nous utilisons cette approche pour charger les ressources JavaScript et CSS grâce à une seule particule. Voici un aperçu de son application au monde réel trouvé dans le fichier assets.html.twig ce qui crée l'atome Custom 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 %}

Bloc particule

Le bloc de particule est le nutriment d'une particule. C’est le contenu, les informations que gantry utilise pour créer la particule en frontal. Nous utilisons le bloc particule abondamment dans notre guide pour créer de nouvelles particules.

Pour donner un exemple en mode réel: Jetez un œil sur le fichier branding.html.twig qui fabrique la particule Branding.

{% extends '@nucleus/partials/particle.html.twig' %} {% block particle %} <div class="g-branding {{ particle.css.class }}">     {{ particle.content|raw }} </div> {% endblock %}