Seiten-Einstellungen
Im Verwaltungsbereich Seiteneinstellungen können Sie die Ausgabe der Seite erweitern, indem Sie zusätzliche Elemente hinzufügen können. Dazu gehören Elemente wie die Meta-Tags Favicon, Facebook und Twitter sowie JavaScript- und/oder CSS-Dateien. Alle diese Elemente sind für die gesamte Website bestimmt, und die Seiteneinstellungen ermöglichen es Ihnen, dies zu tun.
Im traditionellen Template-Konzept müssen Sie, um eines dieser Elemente hinzuzufügen, die Datei, die die Struktur der Seite enthält, manuell bearbeiten. Dies ist in der Regel eine index.php-Datei. Page Settings vereinfacht diesen Prozess exponentiell, indem es die manuelle Bearbeitungsarbeit in eine einfache und leistungsfähige Form direkt in den Admin abstrahiert.
Dank des Kernkonzepts des Gantry und der Implementierung von Overrides können die Seiteneinstellungen global und bei Bedarf auch Outline-unabhängig sein. Sie können damit ein Analyseskript zur gesamten Website hinzufügen oder ein anderes anzeigen lassen, je nachdem, welchem Umriss eine Seite zugeordnet ist.
Steuerungen (Controls)
Genau wie im Particle Defaults Panel funktionieren Overrides, Filtern und Zusammenklappen auf die gleiche Weise.
Head-Eigenschaften
Der Block Head Properties ermöglicht es Ihnen, alles anzupassen, was zwischen den Tags <head>..</head> liegt. Oftmals werden Sie Meta-Tags für Facebook oder Twitter hinzufügen wollen, oder vielleicht möchten Sie einfach nur etwas Eigenes hinzufügen.
Der obige Screenshot zeigt eine der vielen Möglichkeiten, wie Sie Head-Eigenschaften zusammenstellen können.
Meta Tags
Meta Tags ist ein Collection-Feld, das eine Liste von Schlüsseln und Werten annimmt, sie kombiniert und sie innerhalb von in Form einer -Eigenschaft darstellt. Die Verwendung von Meta-Tags ist unzählig. Normalerweise werden Meta-Tags verwendet, um eine Website für Suchmaschinen besser zu definieren und zu definieren, wie die Website angezeigt wird, wenn sie in Facebook oder Twitter eingebettet ist.
Weitere Details zu den Meta-Tags Open Graph von Facebook und Cards von Twitter finden Sie an den folgenden Stellen:
https://developers.facebook.com/docs/sharing/webmasters
https://dev.twitter.com/cards/markup
https://dev.twitter.com/cards/getting-started
Benutzerdefinierte Inhalte
Das Feld Benutzerdefinierter Inhalt ist für alles Spezifische bestimmt, das man an das Tag anhängen möchte. Alle Metadaten, die von den Spezifikationen erlaubt sind, hineinzugehen, können hier geschrieben werden, so wie Sie es bei der Bearbeitung einer index.html-Datei tun würden.
Übliche Metadaten-Tags sind , <style>, <meta>, <link>, <script> und <base>.
Es wird dringend empfohlen, Scripts und Styles über den Bereich Assets oder über Atoms zu managen. Obwohl es verlockend sein kann, Skript- und Tag-Code direkt in dieses Feld zu schreiben, sollte es nur als letzter Ausweg verwendet werden. Überprüfen Sie richtig, ob Skripte und Styles hier reinpassen sollen.
Körper-Attribute (Head Attributes)
Body Attributes ermöglicht es Benutzern, die Attribute für das -Tag anzupassen sowie Inhalte direkt nach dem Öffnen von oder kurz vor dem Schließen von zu injizieren.
Body-ID und Body-Klassen
Im Feld Body Id können Benutzer eine ID für den angeben, während Body Classes es Benutzern ermöglichen, zusätzliche persönliche Klassennamen hinzuzufügen. Nach dem Beispiel im obigen Screenshot wird die resultierende Ausgabe als:
<body id="my-site" class="... gantry body-class ...">
Gantry selbst fügt dem Body bereits eigene Klassen hinzu, die auf verschiedenen Faktoren basieren, wie z.B. dem angezeigten Menüpunkt, der verwendeten Outline, etc.
Meistens müssen Sie keinen benutzerdefinierten Klassennamen hinzufügen, obwohl dies im Bedarfsfall der richtige Ort dafür ist.
Tag-Attribute
Tag Attribute ist ein Schlüssel/Wert-Feld, das es ermöglicht, zusätzliche benutzerdefinierte Attribute für den darzustellen. Betrachtet man das Screenshot-Beispiel von oben, so stellt man sich vor, dass ein Skript geladen wurde, das es Benutzern ermöglicht, die Scroll-Geschwindigkeit und die automatische Aktualisierung der Seite über Data-Scroll- und Data-Refresh-Attribute anzupassen.
Die resultierende Ausgabe wird als:
<body id="my-site" class="... gantry body-class ..." data-scroll="500ms" data-refresh="3mins">
Profil-Layout (Session Layout)
Seit Gantry 5.2.0 beziehen sich alle Abschnitte im Layout-Manager standardmäßig auf diese Einstellung für ihren Stil. Das Sektionen-Layout bietet drei Arten von Stilen:
- Volle Breite (Boxed Content)[Standard - vorher "Volle Breite"]]
- Volle Breite (Flushed Content)[neu in 5.2.0]
- Boxed
Und das ist eine visuelle Darstellung aller drei Fälle.
Fullwidth (Boxed Content) [Default]
Fullwidth (Flushed Content)
Boxed
Diese Stile ermöglichen es Benutzern, die gesamte Website oder einzelne Abschnitte an spezifische Bedürfnisse anzupassen. Das häufigste Fallbeispiel ist zum Beispiel, dass ein Abschnitt vollständig geflutet werden soll, damit ein Bild oder Hintergrund hinzugefügt werden kann, der bündig zu den Kanten verläuft.
Um das Verhalten einzelner Abschnitte zu ändern, gehen Sie zum Layout-Manager-Panel und klicken Sie auf das Zahnradaktionssymbol des gewünschten Abschnitts. Sie können dann einen anderen Wert für das Feld Layout auswählen. Inherit teilt Gantry mit, dass es die Einstellung aus dem Bereich Seiteneinstellungen (Page Settings) verwenden soll.
After <body> and Before </body>
Manchmal müssen Sie Styles, Skripte oder Elemente in die Seite einfügen und sie müssen entweder am Anfang oder am Ende von eingefügt werden.
Ein gutes Beispiel war das SDK von Facebook für JavaScript in der Version 1.0. Damals verlangte Facebook von der Website, dass sie eine <div id="fb-root"> ... < /div direkt nach dem Öffnen des <body> -Tags bereitstellt. Wie du aus dem obigen Screenshot-Beispiel ersehen kannst, wäre das der perfekte Ort dafür gewesen.
Sie werden oft Skripte sehen, die erfordern, dass Sie Elemente im Voraus auf der Seite rendern, und anstatt neue Module, Partikel oder Widgets zu erstellen, können Sie Ihr Element einfach hier hinzufügen. Popups sind auch ein gutes Beispiel. Der Inhalt des Modals wird in der Seite dargestellt, aber unsichtbar, bis ein Element das Öffnen des Popups auslöst.
Vermögenswerte (Assets)
Assets ist ein eigener Abschnitt, in dem bestimmte CSS/JS oder Favicons auf die Website angewendet werden. Auch wenn alles, was Sie in Assets tun können, nur mit Head-Properties und Body Attribute machen können, haben wir diese Teile in einen eigenen Abschnitt entkoppelt.
Assets spielen eine sehr wichtige Rolle bei der Erstellung von kundenspezifischen Vorlagen. Das Einbinden von Skripten oder Stilen von Drittanbietern ist sehr verbreitet geworden, und aus diesem Grund ist es wichtig, einen eigenen Abschnitt zu haben, um alles gut zu organisieren.
Favicon- und Touch-Symbole
Mit den Funktionen Favicon und Touch Icon können Benutzer der Website ein Bild zuweisen, das dann in Form eines Symbols für die Registerkarte Browser oder den Startbildschirm Ihres Geräts dargestellt wird.
Beide Felder sind sehr ähnlich, das Favicon-Feld verwendet die traditionellere Art der Darstellung und Zuordnung eines Symbols zur Website. In der Vergangenheit wurde dies immer mit einer 16x16 oder 32x32 Symbolgröße dargestellt.
Heutzutage, mit dem Aufkommen von Touchgeräten und der Möglichkeit, eine ganze Website in Lesezeichen oder Home-Bildschirmen zu speichern, sind neue Standards entstanden, die größere und detailliertere Symbole ermöglichen. Touch Icon deckt dies ab und ermöglicht es, die Geräte darauf aufmerksam zu machen, dass Ihre Website Symbole mit höherer Auflösung verwenden kann.
Wenn Sie das Touch Icon verwenden möchten, wird empfohlen, dass Sie ein Bild erstellen, das mindestens 180x180 oder 192x192 groß ist. Geräte mit einer kleineren Auflösung werden das Bild anpassen und verkleinern, aber die höhere Auflösung wird von einem schön aussehenden Symbol profitieren.
Gantry deckt nur die gängigste Verwendung von Touch Icons ab und unterstützt iOS, Android und Windows. Es werden auch nur die Symbole verkleinert. Wenn Sie nach einer anspruchsvolleren Verwendung dieser und weiterer gezielter Größen suchen, lesen Sie diesen Artikel. Sie können auch Online-Tools zur Generierung von Symbolen verwenden. Der perfekte Ort, um benutzerdefinierten Code für Symbole hinzuzufügen, ist Head Properties: Benutzerdefinierter Inhalt.
CSS und JavaScript
Sowohl CSS- als auch JavaScript-Sammlungsfelder funktionieren identisch mit dem Custom CSS/JS Atom. Das gleiche Verhalten kann durch Hinzufügen eines Atoms erreicht werden, wie unten beschrieben. In einigen Fällen würde man es jedoch vorziehen, die Vermögenswerte zwischen dem Abschnitt Assets und Atoms zu trennen. Beide Methoden sind richtig und es kommt nur darauf an, was Sie bevorzugen.
Atome
Seit Gantry 5.2.0 wurden Atome aus dem Layout-Manager in den Bereich Seiteneinstellungen verschoben. Obwohl Atome De-facto-Partikel sind und auf die gleiche Weise erzeugt werden können, verhalten sie sich unterschiedlich.
Atome sind Partikel, die am Frontend nicht visuell erscheinen, aber einem wichtigen Zweck dienen. Sie können auf Seitenbasis oder als Standard zugewiesen werden, der automatisch für alle Seiten der Website gilt.
In jeder Hinsicht fügen Atome wie Google Analytics und Custom CSS / JS Skripting zur Seite hinzu, die das Skripting der Seite während des Ladevorgangs hinzufügen oder ändern. Dies ist nützlich für grundlegende Stylings wie z.B. Coloring und Analytics-Tracking.
Wenn Sie ein Atom verwenden, ist der Pfad zu einer lokalen Datei relativ zum Stammverzeichnis der Website und nicht zum Vorlagenordner. Wir empfehlen die Verwendung einer Stream-Link, wie z.B. gantry-theme://custom/thing.css, die es ermöglicht, dass die Link funktioniert, auch wenn Sie zwischen G5-Themen oder Plattformen wechseln.
Google Analytics
Das Google Analytics Atom gibt Ihnen die Möglichkeit, Ihren Google Analytics UA-Code schnell zu einem Layout hinzuzufügen, das beim Laden der Seite im Hintergrund Ihrer Seite läuft. Es fügt die notwendigen Skripte um den Code hinzu, den Sie in den Atom-Einstellungen eingeben.
Benutzerdefiniertes CSS / JS
JavaScript-Frameworks
Das JavaScript Frameworks Atom gibt Ihnen die Möglichkeit, populäre JS-Bibliotheken einfach zu Ihrer Seite hinzuzufügen.
In Joomla wird die standardmäßige Bootstrap-Bibliothek die aktuelle Implementierung von Bootstrap basierend auf Bootstrap 2.3.2 Ihrer Joomla-Installation laden.
Lichtkasten (Lightcase)
Lightcase ist ein kleines, leichtes Lightbox-Atom, das Ihnen die Möglichkeit gibt, Ihre Bilder zum Leben zu erwecken. Es funktioniert im Hintergrund als Atom und wird mit einfachem HTML aufgerufen. Hier ist ein Beispiel:
<a href="path/to/media.jpg"
data-rel="lightcase" title="Your title" >Your link description or thumb </a>
Alles, was Sie tun müssen, um Lightcase zu nutzen, ist, es als Atom auf der Seite (oder den Seiten) zu aktivieren, mit der Sie es verwenden möchten, und Bilder in HTML zu wickeln, wie oben beschrieben.
Zusätzliche Dokumentation für Lightcase finden Sie hier: http://cornel.bopp-art.com/lightcase/