Details: Kategorie: Fortgeschritten

Wie man CSS / SCSS / JS / HTML aus Twig lädt

CSS / JS in Gantry 5 laden

Ab Gantry 5.3 gibt es eine neue, bessere Möglichkeit, JavaScript- und CSS-Dateien über Twig hinzuzufügen.

Laden Sie das JavaScript / CSS-Framework:

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-Datei hinzufügen:

{% block stylesheets %}
<link rel="stylesheet" type="text/css" href="gantry-theme://css/whoops.css" />
{% endblock %}

Füge Inline-CSS hinzu:

{% set red %}
body {
color: red;
}
{% endset %}
{% do gantry.document.addInlineStyle(red, 0) %}

Füge eine JavaScript-Datei hinzu:

{% block javascript %}
<script src="{{ url('https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js') }}"></script>
{% endblock %}

Fügen Sie der Fußzeile eine JavaScript-Datei hinzu (vor </body> HTML-Tag):

{% block javascript_footer %}
<script src="{{ url('https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.min.js') }}"></script>
{% endblock %}

Füge Inline JavaScript hinzu:

{% set alert %}
alert("test");
{% endset %}
{% do gantry.document.addInlineScript(alert, 0) %}

Alle Funktionen außer addFramework() akzeptieren 3 Parameter, wobei der zweite Parameter Priorität und die Position des dritten Parameters (normalerweise Kopf- oder Fußzeile) ist.

Der erste Parameter kann auch ein assoziatives Array sein, das die Attribute des angegebenen Tags enthält. Beachten Sie, dass nicht alle Plattformen alle Attribute unterstützen.

Kompilieren von benutzerdefinierten SCSS-Dateien

Manchmal ist es notwendig, eine benutzerdefinierte SCSS-Datei für CSS zu kompilieren und sie in die Seite einzubinden (z.B. wenn Sie sie nur dann einbinden möchten, wenn ein bestimmtes Partikel auf einer Seite vorhanden ist).

Dazu müssen Sie zwei SCSS-Dateien erstellen. Wir nennen sie first.scss und second.scss als Beispiel (verwenden Sie beliebige Namen). Legen Sie diese beiden Dateien in Ihr THEME/custom/scss/scss/ Verzeichnis.

Sobald du diese an Ort und Stelle hast, füge den folgenden Code zur first.scss Datei hinzu:

@import "second";

Als nächstes fügen Sie einen beliebigen CSS/SCSS-Code zu Ihrer second.scss Datei hinzu.

Sobald dies erledigt ist, füge folgendes zu deiner Twig-Datei hinzu (z.B. particle.html.twig):

{% block stylesheets %}
<link rel="stylesheet" href="first.scss" />
{% endblock %}

Wenn die von Ihnen verwendete Twig-Datei für einen Partikel bestimmt ist, stellen Sie sicher, dass sie in Ihrem Outline > Layout verwendet wird und Sie Ihren Gantry-Cache geleert haben. Laden Sie die Seite und Sie sollten Ihren SCSS-Code in CSS kompiliert sehen.

HTML in Body in Gantry 5 hinzufügen

Manchmal ist es notwendig, etwas HTML direkt nach <body> oder kurz vor </body> Tag hinzuzufügen.

Dieser Ansatz funktioniert analog zu dem zuvor unter Partikelblöcke beschriebenen Verfahren.

Du kannst HTML aus den Seiten-Einstellungen hinzufügen, aber manchmal möchtest du es auch aus einem Partikel oder Atom tun.

Füge HTML nach <body> Tag hinzu:

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

Fügen Sie HTML nach < div id="g-page-surround"> hinzu, aber vor dem Hauptlayout:

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

Fügen Sie HTML nach dem Hauptlayout hinzu, aber vor dem Ende von < div id="g-page-surround">:

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

Füge HTML vor dem < /body> Tag hinzu:

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

Zusätzlich können Sie die Priorität (10 .... -10) festlegen:

{% pageblock bottom with { priority: -10 } %}
Dies sollte nach allem anderen gezeigt werden.
{% endpageblock %}