Documentazione Gantry 5 per Joomla!

Concetti fondamentali per iniziare con un template framework di nuova generazione.

Ci sono momenti in cui si desidera caricare dei CSS o JavaScript senza visualizzarli in pagina. Le particelle hanno integrato supporto per JavaScript e fogli di stile, anche se la particella stessa non è un atomo. Si potrebbe avere essenzialmente una singola particella che include un contenuto standard di particelle oltre all' accesso agli elementi CSS e JavaScript.


Questo è un modo molto utile per inserire codice JavaScript e CSS in una parte specifica della tua pagina.

NOTA: Cerchi maggiori informazioni sull'utilizzo dei blocchi in Twig? Ecco qui una tonnellata di informazioni utili su come funzionano i blocchi in Twig.

Le risorse caricate all'interno di una particella vengono caricate una sola volta. Se si richiama un file JavaScript specifico in una determinata particella, farlo in un'altra particella non avrà alcun effetto aggiuntivo sulla pagina. Si carica solo una volta.

Template di una Particella

In questa guida, cerco di spiegare i diversi tipi di blocchi di codice che appaiono in una particella, e come puoi usarli per aggiungere elementi alla tua pagina da una particella/atom, invece di farli caricare all'interno del template della pagina.
Ecco un esempio di un file twig che mostra diversi blocchi che possono essere utilizzati in una particella.
{code lang:twig showtitle:false}{% extends '@nucleus/partials/particle.html.twig' %}

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

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

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

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

Aggiungere un blocco JavaScript

Aggiungere un blocco JavaScript alle vostre particelle è abbastanza facile. Nel file twig della tua particella, devi solo creare un blocco JavaScript e includere le informazioni necessarie per caricare la tua specifica risorsa JavaScript. Ecco un esempio di un blocco JavaScript usato in una particella standard:
{code lang:twig showtitle:false}{% block javascript %}
{{ parent() }}
<script src="/{{ url('gantry-theme:/js/filename.js') }}"></script>
{% endblock %}{/code}
È possibile posizionare il blocco separatamente dal foglio di stile o dal blocco di particelle, o farlo racchiudere intorno a questi altri elementi (o parti di essi) per applicare loro quella proprietà JavaScript. Se si vuole che una risorsa JavaScript venga caricata appena prima del tag della pagina, si dovrebbe scambiare il blocco javascript con il blocco javascript_footer.

Ecco un esempio di blocco JavaScript utilizzato da un'applicazione del mondo reale. In questo caso, questo è il file analytics.html.twig utilizzato per creare l'atomo Google Analytics di Gantry.
{code lang:twig showtitle:false}{% 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 %}{/code}

Aggiungere un blocco CSS

Aggiungere un blocco di fogli di stile funziona in modo molto simile a un JavaScript o a un blocco di particelle. Ecco un esempio:
{code lang:twig showtitle:false}{% block stylesheets %}
<link rel="stylesheet" href="/{{ somelocation }}" type="text/css" />
{% endblock %}{/code}
Combinare un blocco di fogli di stile con un blocco JavaScript è abbastanza semplice da fare. In realtà usiamo questo approccio per caricare sia JavaScript che CSS attraverso una singola particella. Ecco un esempio di un'applicazione del mondo reale trovata nel file assets.html.twig che viene utilizzata nella creazione dell'atomo Custom CSS/JS.
{code lang:twig showtitle:false}{% 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 %}{/code}

Blocco Particella

Il blocco particella rappresenta il corpo di una particella. E' il contenuto, le informazioni che Gantry utilizza per creare la particella sul front-end. Utilizziamo il blocco particella ampiamente nella nostra guida alla creazione di nuove particelle.

Per offrire un esempio pratico: ecco diamo un'occhiata al file branding.html.twig, il file twig che compone la particella Branding.
{code lang:twig showtitle:false}{% extends '@nucleus/partials/particle.html.twig' %}
{% block particle %}
<div class="g-branding {{ particle.css.class }}">
{{ particle.content|raw }}
</div>{% endblock %}{/code}