Erweiterte Themenanpassung

In dieser Dokumentation haben wir eine Vielzahl von verschiedenen Methoden beschrieben, mit denen Sie Ihr Gantry 5-Thema konfigurieren und anpassen können. Es gibt einige Fälle, in denen Sie feststellen werden, dass Sie die Themenanpassung auf eine neue Ebene bringen wollen. Das Hinzufügen, Entfernen und sogar Erstellen brandneuer Features für ein Gantry 5-Thema ist nicht nur möglich, es ist auch relativ einfach.

In diesem Leitfaden werden wir mehrere Techniken kombinieren, die zuvor in unserer Dokumentation beschrieben wurden, um eine drastische Änderung an einem bestehenden Gantry 5-Thema vorzunehmen.

In unserem Beispiel werden wir unserem Thema einen festen Navigationsbereich hinzufügen. Auf diese Weise können Benutzer auf die Navigation zugreifen, während sie die Seite nach unten scrollen. Dies wird durch das Hinzufügen von JavaScript erreicht, das Benutzer, die die Seite nach unten scrollen, sowie einige benutzerdefinierte Stylings erkennt.

Hier ist eine kurze Liste nützlicher Anleitungen, die Ihnen bei diesem Tutorial helfen:

• Entwicklung und Produktion Modes
• Custom CSS / JS Atom
• Recompiling CSS
• Customizing Theme Dateien
• Creating a Custom Style Sheet
• Headroom.js Dokumentation

Drei Methoden

Es gibt drei Möglichkeiten, einige unglaubliche Dinge mit Ihrem Design in Gantry 5 zu tun. Dieser spezielle Guide konzentriert sich darauf, Ihrem Thema ein neues Feature hinzuzufügen, und wir werden einige Möglichkeiten aufzeigen, es zu erreichen.

Die erste Methode beinhaltet Atome, leistungsstarke Partikel, die Code zu Ihren Seiten im gesamten Seitenbereich hinzufügen. Atome sind eine großartige Möglichkeit, externe CSS- und JavaScript-Ladefunktionen zu nutzen, wenn Ihre Seite gerendert wird und für Ihr Design zugänglich wird, ohne dass Sie dafür Kern- oder themenspezifische Dateien bearbeiten müssen. Atome sind standortübergreifend und dienen als One-Stop-Shop für das Hinzufügen von Skripten zu Ihren Seiten.

Eine weitere Methode sind die verschiedenen Felder der Registerkarte Seiteneinstellungen in Ihrem Administrator. Wie Atome fügen diese Felder Skripting direkt zu Ihrer Website hinzu, aber sie haben den zusätzlichen Vorteil, dass sie spezifisch bestimmten Outlines zugeordnet werden können. Auf diese Weise können Sie ein JavaScript-Skript oder eine CSS-Übertragung auf bestimmte Seiten durchführen, ohne dass Sie auf anderen Seiten verfügbar sein müssen.

Die dritte Methode ist die, die wir am wenigsten empfehlen, und wir werden sie in den folgenden Abschnitten näher erläutern. Im Wesentlichen geht es darum, Kern- und/oder themenspezifische Dateien direkt im Backend zu bearbeiten. Es ist nützlich, diesen Prozess zu kennen, aber für die überwiegende Mehrheit der Anwendungen ist er nicht notwendig. Es wird auch die Tür zu möglichen Problemen auf der Strecke öffnen, da Gantry und Themen-Updates diese Änderungen außer Kraft setzen oder andere unvorhergesehene Probleme verursachen können.

Überschreiben der page.html.twig (nicht empfohlen)

Die Datei page.html.twig ist die Vorlage, mit der Gantry 5 eine Seite erstellt. Sie finden diese Datei in SITE_ROOT/media/gantry5/engines/nucleus/templates/ und wir müssen sie ändern, um den festen Abschnitt zu integrieren.

Wir empfehlen diese Methode nicht, sind aber hier aufgelistet, falls Sie diese Dateien wirklich direkt bearbeiten wollen. Die Verwendung dieser Methode kann zum Verlust Ihrer Änderungen und/oder beschädigtem Code führen, falls Ihr Design und/oder Portal aktualisiert wird.

An dieser Stelle stehen Ihnen zwei Möglichkeiten zur Verfügung. Wenn Sie ein brandneues Design erstellen oder an ein bestehendes gebunden sind und die Kontrolle darüber haben, welche Änderungen während der Aktualisierung des Designs vorgenommen werden, können Sie die Datei page.html.twig direkt bearbeiten. In der überwiegenden Mehrheit der Fälle wird dies nicht die bevorzugte Option sein.

Für die meisten Entwickler, die ein bereits bestehendes Design verwenden oder die möchten, dass diese Datei im Falle eines Themen-Updates nicht überschrieben wird, sollten Sie sie kopieren und die Kopie in THEME_DIR/custom/engine/templates/ platzieren. Diese Kopie wird zur Standardquelle für Gantry 5 und ändert sich nicht, wenn ein Thema aktualisiert wird.

Unsere bevorzugte Methode besteht darin, diese Informationen auf der Registerkarte Seiteneinstellungen des Gantry-Administrators zu speichern. Im Folgenden werden wir diese beiden Methoden demonstrieren.

Headroom.js hinzufügen

Headroom.js ist ein sehr nützliches Skript zur Erstellung einer festen Navigation.

Dieser Schritt ist optional, ermöglicht es aber, dass Ihr Navigationsbereich verschwindet, wenn er nicht benötigt wird, und wird fokussiert, wenn er es ist. Dies ist ein großer Platzersparnis für Ihre Website und eine willkommene Ergänzung, wenn Besucher mit einem landschaftsorientierten Browser surfen.

Es gibt zwei Möglichkeiten, wie Sie dieses Skript zu Ihrer Website hinzufügen können. Sie können es so einrichten, dass es lokal oder über ein CDN aus der Ferne geladen werden kann. Jede Methode hat Vor- und Nachteile, daher werden wir hier beide Methoden behandeln.

Methode 1: Lokale Installation

Der erste Schritt zur Installation von headroom.js auf Ihrer lokalen Website ist der Download. Sie können headroom.js von Github herunterladen.

Sobald Sie es heruntergeladen haben, müssen Sie die Datei headroom.js-master.zip entpacken. Du wirst mehrere Dateien und Ordner finden, aber die, die du brauchst, heißt dist. Im dist-Ordner sehen Sie drei verschiedene Versionen von headroom.js - eine in Angular, eine in jQuery und eine in reinem JavaScript. Wir werden für dieses Tutorial die reine JS one verwenden, da keine zusätzlichen JS-Bibliotheken installiert werden müssen. Diese Version erhält den Dateinamen headroom.min.js.

Du musst alle deine Änderungen und Ergänzungen im THEME_DIR/custom/Verzeichnis behalten, damit sie nicht überschrieben werden, wenn du die Vorlage aktualisierst. Erstellen Sie dann die Verzeichnisstruktur THEME_DIR/custom/js/js/ und kopieren Sie dort die Datei headroom.min.js.

Atoms Methode

Seiten Einstellungen Methode

Datei Überschreibung (nicht empfohlen)

Nun müssen Sie ein Skript zu page.html.twig hinzufügen, um headroom.min.js auf jeder Seite zu laden. Hier ist die Codezeile, die Sie direkt über dem Tag platzieren möchten.

<script type="text/javascript" src="{{ url('gantry-theme://custom/js/headroom.min.js') }}"></script>

Methode 2: Remote-Laden

Atoms Methode

Das Hinzufügen des Skripts aus der Ferne ist ziemlich einfach. Sie können dies über die Registerkarte Gantry 5 Administrator's Page Settings mit einer Funktion namens Atoms tun. Sie finden sie unten auf der Registerkarte. Ziehen Sie einfach ein benutzerdefiniertes CSS- / JS-Atom per Drag-and-Drop auf die Atomleiste und erstellen Sie ein neues JavaScript-Element.

Im Element möchten Sie die folgende URL in das Feld File Location einfügen und, falls gewünscht, die Option Before auswählen. Sie können nun Übernehmen wählen.

//cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js

Der Link kann je nachdem, woher Sie die Datei beziehen möchten, unterschiedlich sein. Hier ist eine nützliche Liste.

Seiten Einstellungen Methode

Sie können das Skript auch aus der Ferne laden. Ersetzen Sie einfach das obige Skript im Feld Before durch folgendes:

<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script>

Der Link kann je nachdem, woher Sie die Datei beziehen möchten, unterschiedlich sein. Hier ist eine nützliche Liste.

Datei Überschreibung (nicht empfohlen)

Das Fernladen des Skripts ist eine weitere Option, die sich recht einfach durchführen lässt. Sie müssen nur eine Skriptzeile innerhalb der -Tags Ihrer page.html.twig Datei hinzufügen, um darauf zuzugreifen. Sie können es auch mit einem Atom laden lassen, aber auf diese Weise wird sichergestellt, dass es auf jeder Seite geladen wird, ohne zusätzlichen Aufwand für den Gantry 5-Administrator.

Hier ist ein Beispiel für die Zeile, die Sie der Datei hinzufügen müssen:

<script src="//cdnjs.cloudflare.com/ajax/libs/headroom/0.7.0/headroom.min.js"></script>

Diese Zeile würde direkt über das </body> Tag in der Datei gehen und kann sich je nach dem entfernten Standort, von dem aus Sie das Skript laden möchten, dem CDN oder anderen unterscheiden.

Ziel-Headroom.js

Der nächste Schritt besteht darin, der Seite ein weiteres Skript hinzuzufügen. Dieses Skript wird direkt über dem </body> Tag platziert, genau wie im vorherigen Schritt, unter dem Skript, mit dem wir headroom.min.js zur Seite hinzugefügt haben.

Hinzufügen des Styles (SCSS)

Dieser Teil des Leitfadens ist das Fleisch und die Kartoffeln dieses Prozesses. Es teilt dem Browser mit, dass Ihr Navigationsbereich repariert werden muss, und ermöglicht es ihm, mit dem Benutzer nach unten auf der Seite zu scrollen. header.js lässt es zwar bei Bedarf erscheinen und verschwinden, aber das ist wirklich alles, was nötig ist, um es oben im Browserfenster zu verankern.

In einem früheren Leitfaden haben wir beschrieben, wie Sie in Gantry 5 ein benutzerdefiniertes Style Sheet erstellen können. Mit dieser Methode können Sie das folgende Skript zu Ihrer custom.scss-Datei hinzufügen.

Dies wird Sie zum Laufen bringen, aber Benutzer, die mehr Kontrolle über diese Elemente bevorzugen, können stattdessen diesen optionalen Code unten verwenden. Denken Sie daran, dass #g-navigation durch #g-header ersetzt werden sollte, wenn sich Ihr Hauptmenü im Abschnitt Header befindet.

Sobald Sie dieses Skript zu Ihrer custom.scss-Datei hinzugefügt haben, werden Sie CSS neu kompilieren wollen, wenn Sie sich im Produktionsmodus befinden, oder einfach das Frontend neu laden und testen, ob Sie sich im Entwicklungsmodus befinden.