Zur Hauptnavigation springen Zum Inhalt springen Zur Fußnavigation springen

Fortgeschritten

Mit einigen erweiterten Anpassungs- und Konfigurationsoptionen für Gantry 5.

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

Twig Filter und Funktionen

In dieser Dokumentation haben Sie vielleicht bemerkt, dass Zweigfilter wie |e und |raw verwendet werden, wenn wir in unseren Beispielen auf YAML-Felder verweisen. Hier ist ein kurzes Beispiel:

{% if particle.headline %}<h1 class="font-family-bloody">{{ particle.headline|raw }}</h1>{% endif %}

Diese Zeile stammt aus unserem Leitfaden zum Hinzufügen und Anwenden von Schriften. Es erkennt, ob das Headline-Feld eines Partikels einen eingestellten Wert hat, und wenn ja, zeigt es es in seinem rohen HTML-Format an.

Dies ermöglicht es dem Benutzer, HTML wie < style="color:red">Titel einzugeben und einen roten Titel am Frontend anzuzeigen, anstatt in seine literalen Zeichen übersetzt zu werden.

Benutzerdefinierte Responsive Grids im Inhalt

Manchmal werden Sie benutzerdefinierte, responsive Inhalte innerhalb der Grenzen eines einfachen Inhaltsbereichs erstellen wollen. Zum Beispiel innerhalb eines Artikels / Beitrags auf Ihrer Website, im Gegensatz zu dynamisch durch einen Partikel erstellt zu werden.

Die Art und Weise, wie dies in Gantry 5 geschieht, ist viel einfacher als in Gantry 4. Gantry 5 kommt mit einem integrierten und leichten CSS-Framework, das wir Nucleus genannt haben. Nucleus legt den Schwerpunkt auf die Bereitstellung eines flexiblen Layouts. Das bedeutet, dass, wenn Sie nur ein paar Regeln beim Aufbau Ihres responsiven Layouts befolgen, Sie nie ein Problem haben werden, egal wie tief Ihr Layout auch sein wird.

Für Ihre Inhalte müssen Sie nur über 3 Arten von Klassen Bescheid wissen, die mit Nucleus geliefert werden:

Verwendung von CMS-Inhalten in Partikeln

Neue Funktion in Gantry 5.2.14.

Partikel sind großartig darin, benutzerdefinierte Inhalte in bestimmten Bereichen Ihrer Website anzuzeigen, aber wussten Sie, dass Sie auch Inhalte direkt aus dem Content Management System (CMS) anzeigen können? Das ist möglich, und so läuft das hier.

Dies ist ein anspruchsvoller Prozess, und wir empfehlen, ihn nur auszuprobieren, wenn Sie ein erfahrener Entwickler mit guten Kenntnissen im Umgang mit Daten im CMS sind. Dies ist etwas, mit dem sich Endbenutzer und Site-Manager wahrscheinlich nie befassen müssen, da sie Zugriff auf die vorab erstellten Formularfelder im Administrator haben.

Sie müssen Gantry Content Finders verwenden, um die Informationen direkt aus Joomla zu laden. Danach können Sie diese Daten auf dem Frontend rendern.

Codebasierte Outline-Zuordnungen

In einigen Fällen, in denen Sie Tools von Drittanbietern wie bbPress verwenden, wird es Ihnen schwer fallen, eine Outline mit herkömmlichen Methoden zuzuordnen. In diesem Guide zeigen wir Ihnen, wie Sie einer php-Datei wie bbpress.php eine Outline manuell zuweisen können.

Template-Datei ändern

Für bbPress öffnen Sie bbpress.php in Ihrem Design und fügen Sie $theme->setLayout('my_layout', true) hinzu; nachdem die Variable in Zeile 20 gesetzt wurde. Layoutname ist der Name (Ordner) der Outline im Dateisystem. Dadurch wird das Template für alle Seiten geändert, es sei denn, Sie fügen eine zusätzliche Logik hinzu, um die zu verwendende Outline herauszufinden.