Zur Hauptnavigation springen Zum Inhalt springen Zur Fußnavigation springen
Details
Kategorie: Tutorials

Partikel in ein anderes Thema kopieren

Einführung

Die Themen von Gantry 5 sind mit verschiedenen Partikeln versehen. Nicht jedes Partikel ist in jedem Gantry 5 Thema enthalten. Manchmal möchtest du vielleicht ein Partikel aus einem anderen Thema in das von dir verwendete Thema aufnehmen. Dieses Tutorial zeigt Ihnen den sicheren Weg, Partikel zwischen Themen zu kopieren, die nicht mehr durch Themen-Updates überschrieben werden.

Für die Zwecke dieses Tutorials ist das Design, von dem Sie kopieren, das Spenderdesign und das Design, in das Sie kopieren, das Empfängerdesign.

KAVERNEN:

  • Wenn Sie einen Partikel von einem Thema in ein anderes kopieren und anschließend ein Fehler in diesem Partikel gefunden wird, wird er nur im Spenderthema behoben (über eine Themenaktualisierungsversion). Es liegt daher in Ihrer Verantwortung, auf Spenderthemen-Updates zu achten und zu sehen, ob der Partikel geändert wurde, was bedeutet, dass Sie dann auch den Partikel in Ihrem Empfängerthema aktualisieren müssen.
  • Es kann sein, dass das Spender-Thema ein spezielles CSS-Styling für eine Seite oder einen Ort hat, an dem dieses Partikel verwendet wird (z.B. spezielles Homepage-Styling). Das kann beim Kopieren eines Partikels nicht reproduziert werden.
  • Es geht hier nicht darum, eine Funktionalität zu ändern - Sie kopieren den Partikel "wie er ist".

Woraus die Partikel bestehen

Aus diesen Dingen besteht ein Partikel:

  • Eine YAML-Datei (Klartext), die Gantry 5 sagt, welche Felder das Partikel verwendet.
  • Eine TWIG-Datei (Klartext), die diese Felder verwendet, um die Ausgabe auf Ihrer Seite zu rendern.
  • Eine SCSS-Datei (Klartext), die das SASS/CSS enthält, um das gerenderte Partikel auf Ihrer Seite zu gestalten.
  • Optional eine oder mehrere JS-Dateien (Plain Text), die JavaScript/jQuery-Code enthalten, damit die Partikel funktionieren.

Alle themenspezifischen Partikel befinden sich in: THEMENAME/Partikel Alle themenspezifischen Partikel-SCSS-Dateien befinden sich in:
THEMENAME/scss/THEMENAME/particles Alle themenspezifischen JS-Dateien befinden sich in: THEMENAME/js

GESCHÄFTSBEDINGUNGEN:

  • THEMENAME ist der Name des Themas (z.B. Isotop, Xenon, Galatea).
  • PARTICLENAME ist der Name des Partikels (z.B. Newsletter, Werbebild, Inhaltsverzeichnis).

Kopieren des Partikels

Es ist sehr wichtig, dass Sie diese Kopie so machen, dass alle nachfolgenden Themen-Updates das, was Sie getan haben, nicht überschreiben. Die folgenden Schritte stellen sicher, dass dies der Fall ist.

Dies sind die Schritte, um die Kopie vom Spenderthema zum Empfängerthema zu erstellen. Sie kopieren nur die Spenderdatei, nicht die Ordner, in denen sie sich befindet:

  • Kopieren Sie THEMENAME/particles/PARTICLENAME.html.twig nach THEMENAME/custom/particles.
  • Kopieren Sie THEMENAME/particles/PARTICLENAME.yaml nach THEMENAME/custom/particles.
  • Kopieren Sie THEMENAME/scss/THEMENAME/particles/_PARTICLENAME.scss nach THEMENAME/custom/scss (beachten Sie den Unterstrich am Anfang des Dateinamens).
  • Für alle JS-Dateien, von denen Sie wissen, dass sie für das Partikel benötigt werden, kopieren Sie THEMENAME/js/JSFILENAME.js nach THEMENAME/custom/js. Um festzustellen, von welchem JS das Partikel abhängt, sollten Sie in der Datei PARTICLENAME.html.twig nachsehen (normalerweise unten).
  • Wenn du noch keine benutzerdefinierte.scss-Datei hast, dann musst du eine erstellen (reine Textdatei). Deine custom.scss-Datei sollte in THEMENAME/custom/scss abgelegt werden. Ihre benutzerdefinierte SCSS-Datei muss diese Anweisung als erste Zeile enthalten:

@import "Abhängigkeiten";

Als nächstes müssen Sie sicherstellen, dass auch das SCSS für das Partikel geladen wird. Wir tun dies, indem wir es in unsere benutzerdefinierte SCSS-Datei aufnehmen.

@import "PARTICLENAME";

Sie setzen dem TEILNEHMER keinen Unterstrich vor.

  • Gehen Sie auf die Registerkarte Styles und klicken Sie auf Recompile CSS. An dieser Stelle können Sie einige Kompilierungsfehler über fehlende Variablen erhalten, wenn Sie die Spendervorlage durchsuchen müssen, um herauszufinden, wo diese Variablen initialisiert wurden und diese Anweisungen in Ihrer custom.scss-Datei (nach dem Import von "Abhängigkeiten", aber vor dem Import von PARTICLENAME). Achten Sie genau auf die Fehlermeldungen, die Sie erhalten, es wird deutlich die Variable oder den Mixin-Namen angeben, die fehlt. Gehen Sie die Fehlermeldungen nacheinander an und lösen Sie jede einzelne, bevor Sie zur nächsten übergehen, bis Sie eine erfolgreiche Kompilierung erhalten.

Das ist es! Jetzt sollten Sie in der Lage sein, die Partikel aus Ihrem Spenderthema in Ihrem neuen Empfängerthema zu verwenden.