Dieser Artikel erschien zuerst auf Symfony Station.

Einführung

Wenn Sie das lesen, wissen Sie, dass die Erstellung inhaltsorientierter Websites heutzutage ein überkomplizierter Cluster-Fick ist.

Aber es gibt ein Content-Management-System, das es immer einfacher macht. Und das gilt insbesondere für Frontend-Entwickler. Es ist Grav CMS.

Ich werde ein Theme für grav.mobileatom.net anpassen, die meine Hauptgesch?ftsseite ist. Erraten Sie, was? Es wird keine KI erforderlich sein.

Und durch das Schreiben dieses Artikels lerne ich, wie man es macht, und helfe der Community. Sie sehen nicht viele Artikel über Grav.

Wir werden Folgendes behandeln:

(1) Organisation/Dateistruktur
(2) Zweigvorlagen
(3) CSS
(4) Twig-Funktionalit?t
(5) Anpassung

Wenn Sie es nicht wissen: GravCMS ist eines der vielen CMS, die auf Symfony basieren.

Die technischen Details dieses Artikels stammen gr??tenteils aus der Grav-Dokumentation. Wie ich gerade sagte, ich lerne das selbst.

Grav sagt:

"Der Kern von Grav basiert auf dem Konzept von Ordnern und Markdown-Dateien für Inhalte. Diese Ordner und Dateien werden automatisch in HTML kompiliert und aus Leistungsgründen zwischengespeichert.

Auf die Seiten kann über URLs zugegriffen werden, die sich direkt auf die Ordnerstruktur beziehen, die dem gesamten CMS zugrunde liegt. Durch das Rendern der Seiten mit Twig-Vorlagen haben Sie die vollst?ndige Kontrolle über das Aussehen Ihrer Website, praktisch ohne Einschr?nkungen.“

Okay, werfen wir einen Blick auf die Themen.

Grav-Themen

Themes in Grav werden mit Twig-Vorlagen erstellt und Sie k?nnen viel mehr über Twig in meinem Artikel Twig: The Ultimate Guide to the Premier PHP Templating Language erfahren. Au?erdem werden wir hier auf einige Details eingehen.

Wie ich dort geschrieben habe, ist Twig eine PHP-Vorlagensprache, die Variablen in den HTML-Code von Ansichten in der MVC-Programmierung (Modelle, Ansichten, Controller) ausgibt. Es tr?gt also zur Struktur des Frontends Ihrer Website bei.

Es wurde von Fabien Ponticier erstellt, der auch Symfony erstellt hat, daher ist es keine überraschung, dass es in Grav verwendet wird.

Er bemerkte: ?Eine Vorlagensprache ist etwas, das Ihnen dabei hilft, Vorlagen zu schreiben, die diese (MVC-)Trennung von Belangen respektieren. Eine Vorlagensprache sollte ein gutes Gleichgewicht zwischen der Bereitstellung ausreichender Funktionen zur einfacheren Implementierung der Pr?sentationslogik und der Einschr?nkung der Fortgeschrittenen finden.“ Funktionen, um zu vermeiden, dass die Gesch?ftslogik Ihre Vorlagen lahmlegt.“

Was genau sind PHP-Vorlagen? Wie oben erw?hnt, werden sie verwendet, um die Ansicht Ihrer PHP-Anwendung von ihren Modellen und Objekten zu trennen.

Die Hauptmerkmale von Twig sind:

• Schnell: Twig kompiliert Vorlagen bis hin zu einfach optimiertem PHP-Code. Der Overhead im Vergleich zu normalem PHP-Code wurde auf das Allern?tigste reduziert.
• Sicher: Twig verfügt über einen Sandbox-Modus zur Auswertung nicht vertrauenswürdiger Vorlagencodes. In diesem Modus kann Twig als Vorlagensprache für Anwendungen verwendet werden, bei denen Benutzer das Vorlagendesign ?ndern.
• Flexibel: Twig wird von einem flexiblen Lexer und Parser unterstützt. Diese Flexibilit?t erm?glicht es dem Entwickler, benutzerdefinierte Tags und Filter zu definieren (mehr dazu sp?ter) und sein einzigartiges DSL zu erstellen.

Ein paar letzte kurze Anmerkungen:

• Twig-Vorlagennamen enden mit .html.twig.
• Sie konfigurieren sie mit YAML.
• Und sie funktionieren gut mit Vanilla-CSS.

Jede Seite, die Sie in Grav über die Admin-Oberfl?che erstellen, verweist auf eine Twig-Vorlagendatei. Eine bew?hrte Vorgehensweise besteht darin, die Namen der Vorlagendateien so weit wie m?glich mit den Seitennamen abzugleichen. Oder zumindest die Ordnerstruktur Ihrer Inhaltsdateien.

Beispielsweise würde blog.md mit der Twig-Vorlage blog.html.twig rendern

(1) Organisation/Dateistruktur

Ok, schauen wir uns an, wie ein Grav-Theme aufgebaut ist.

Jedes Theme verfügt über eine Definitionsdatei namens blueprints.yaml. Es kann auch Formulardefinitionen für das Admin-Panel bereitstellen.

Um Theme-Definitionsoptionen zu verwenden, stellen Sie Standardeinstellungen in einer Datei ?your_theme_name.yaml“ bereit.

Fügen Sie ein 303 x 300 gro?es JPG mit dem Namen ?thumbnail.jpg“ in das Theme-Stammverzeichnis ein.

(2) Zweigvorlagen und mehr

Die Twig-Vorlagen Ihrer Grav-Seite sollten sich in einem templates/-Ordner mit Unterordnern für:

• Formulare/
• modular/
• Teilweise/

Eine bew?hrte Vorgehensweise besteht darin, Ihr Thema in Abstimmung mit Ihrem Inhalt zu entwickeln. Diese Strategie ist einer der Gründe, warum ich so viel in Grav investiere. Seitendateien = Twig-Vorlagen.

Auch hier würden default.md, blog.md, error.md, item.md, modular.md default.html.twig, blog.html.twig usw. entsprechen.

Ihr Theme ben?tigt einen css/-Ordner für Ihr CSS.

Fügen Sie auch die Ordner ?images/“, ?fonts/“ und ?js/“ zu Ihrem Stammverzeichnis hinzu, um benutzerdefinierte Assets zu speichern.

Ein Ordner ?blueprints/“ enth?lt die Datei mit Ihren Formulardefinitionen, wie bereits erw?hnt.

Plugins werden über Hooks in Grav-Themen eingebracht.

Ihr_theme_name.php beherbergt also Ihre Nicht-Twig-Logik.

Nur ??zu Ihrer Information: Wenn Sie ein kommerzielles Theme erstellen m?chten, um es an andere zu verkaufen, ben?tigen Sie auch diese Dateien:

• CHANGELOG.md
• LICENSE.md
• README.md
• screenshot.jpg
• thumbnail.jpg

Eine Basisvorlage

Sie k?nnten meine mit nur einer Standard-Twig-Vorlage mit Grav erhalten.

Aber es ist besser, das Twig Extends-Tag zu verwenden, um ein Basislayout über Bl?cke in einer Basisvorlage zu definieren. Diese Datei wird im Unterordner ?partials/“ als base.html.twig gespeichert. Siehe das Bild oben.

Verwenden Sie in Ihren Standard- und anderen Spezialvorlagen das Tag ?Extens“, um Ihr Basislayout aus base.html.twig einzubinden.

Für Ihre Datei ?default.html.twig“ mit Twig-Syntax würden Sie also Folgendes codieren:

{% extends 'partials/base.html.twig'%}

{%block content %}
  {{page.content | raw}}
{%endblock%}

Der erste Codesatz erweitert die Basisvorlage, die Ihr Basislayout enth?lt.

Der zweite überschreibt den Inhalt der Basisvorlage mit dem Code Ihrer neuen Vorlage.

(3) Theme-CSS

Als n?chstes schauen wir uns das CSS für Ihr Grav-Theme an. Es gibt verschiedene M?glichkeiten, es zu implementieren, einschlie?lich SCSS. Aber um es einfach zu halten, werde ich mich auf Vanilla-CSS konzentrieren. Es ist kurz. Fügen Sie eine custom.css-Datei hinzu und gehen Sie zur Stadt.

(4) Twig-Funktionalit?t

Werfen wir auch einen kurzen Blick darauf, wie Twig funktioniert.

Twig-Tags wie Extend steuern die Logik Ihrer Vorlagen. Sie sagen Twig, was er tun soll. Meiner Meinung nach ist Block das wichtigste Tag.

Andere umfassen:

• Cache
• Abschlag
• Skript
• Stil
• Schalter
• usw.

Twig-Filter sind nützlich zum Formatieren und Bearbeiten von Text und Variablen.

Dazu geh?ren:

• Datum
• Flucht
• beitreten
• niedriger
• Scheiben
• usw.

Funktionen k?nnen (natürlich) Inhalte generieren und Funktionen implementieren. Sie k?nnen auch einige der gleichen Dinge tun, die Filter tun k?nnen.

Verwenden Sie also für Ihre Vorlagen die Twig-Tags, Filter und Funktionen, die für Ihre individuellen Anforderungen erforderlich sind.

Grav's Twig-Tags

Zus?tzlich zu den von Ihnen ausgew?hlten Tags enth?lt Grav benutzerdefinierte Twig-Tags, um seine Funktionen zu erweitern.

Dazu geh?ren:

• Abschlag
• Skript (Sie k?nnen beispielsweise JavaScript einbinden)
• Stil
• Link
• Schalter
• aufgeschoben (Aufladung von Verm?genswerten)
• werfen (Ausnahmen)
• versuchen/fangen
• Rendern (Flex-Objekte)
• Cache

Theme-Konfiguration

Mit Grav k?nnen Sie aus Ihren Twig- und PHP-Dateien auf Theme-Konfigurations- und Blueprint-Informationen zugreifen. Sie k?nnen dies über Themenobjekte tun oder ein Grav-Plugin mit PHP-Syntax verwenden.

Als Best Practice sollten Sie die Standarddatei ?your_theme_name.yaml“ Ihres Themes nicht ?ndern (siehe Abbildung oben). überschreiben Sie es in einem Ordner ?user/config/themes“.

Als letzte Anmerkung: Twig verfügt auch über benutzerdefinierte Objekte und Variablen, auf die wir hier nicht eingehen. Denken Sie daran, ich halte es einfach.

Verm?gensverwalter

Gravs Asset Manager bietet eine flexible M?glichkeit, CSS- und JavaScript-Dateien zu verwalten. Es umfasst eine Asset-Pipeline zum Minimieren, Komprimieren und Inline-Assets.

Es ist verfügbar und kann in Plugin-Event-Hooks oder direkt in Themes über Twig-Aufrufe aufgerufen werden. Es verfügt über eine eigene Konfigurationsdatei in user/config/system.yaml.

Mit Asset Manager k?nnen Sie auf Unternehmensebene detaillierte Informationen erhalten, daher gehen wir hier nicht n?her darauf ein.

Um es einfach zu halten, empfehle ich die Verwendung des Assets-Plugins (siehe Bild oben). Laden Sie es vom Grav-Administrator herunter. Verwenden Sie es dann, um bei Bedarf Assets zu aktualisieren oder hinzuzufügen.

(5) Anpassung

Damit haben wir die M?glichkeit abgedeckt, schnell und einfach ein Grav-Theme zu erstellen. Richten Sie Ihre Struktur ein, erstellen Sie Ihre Twig-Vorlagen und fügen Sie nach Bedarf CSS und JavaScript hinzu.

Und Sie haben gesehen, dass es viele M?glichkeiten gibt, ein Grav-Theme an Ihre einfachen oder komplexen Anforderungen anzupassen, aber Grav bietet Features und Funktionen, die es noch einfacher machen. Und auf diese Weise werde ich das Thema meiner Website anpassen.

Themenvererbung

Der einfachere Weg ist die Verwendung der Theme-Vererbung. Das gef?llt mir, weil es dem ?hnelt, was ich mit WordPress- und Drupal-Themes gemacht habe.

Es ist auch Gravs bevorzugte Methode, ein Thema anzupassen.

Sie definieren ein Basisthema, von dem Sie erben. Zum Beispiel das Standard-Theme Quark oder eines, das Sie gekauft haben. Dann fügen Sie hinzu oder bearbeiten, was Sie anpassen m?chten, und überlassen den Rest dem Basisthema.

Mit dieser Strategie k?nnen Sie auch das Basisthema aktualisieren, ohne die Anpassungen Ihres Vererbungsthemas zu verlieren.

Es gibt mehrere M?glichkeiten, ein Vererbungsthema zu erstellen. Aber der Einfachheit halber schauen wir uns noch einmal den manuellen Prozess an.

Neuen Ordner erstellen -> user/themes/your_theme_name, um das benutzerdefinierte Design zu speichern.

Kopieren Sie dann die YAML-Datei aus dem Theme, von dem Sie erben m?chten, in den neuen Ordner. Nennen Sie es your_theme_name.yaml und ?ndern Sie den neuen Theme-Namen überall dort, wo Sie Quark sehen.

Kopieren Sie als N?chstes die Datei ?users/themes/quark/blueprint.yaml“ in Ihren Ordner ?user/themes/your_theme_name“.

?ndern Sie nun das Standardthema in der Datei user/config/system.yaml.

Seiten:
Thema: Ihr_Themenname

Um schlie?lich erweiterte ereignisgesteuerte Funktionen hinzuzufügen, erstellen Sie eine Datei user/themes/your_theme_name/your_theme_name.php.

{% extends 'partials/base.html.twig'%}

{%block content %}
  {{page.content | raw}}
{%endblock%}

Sie haben Gravs Streams jetzt so eingerichtet, dass es zuerst nach Ihrem_Themennamen sucht und dann Quark ausprobiert.

Stellen Sie nun die erforderlichen CSS-, JS- und Twig-Vorlagen?nderungen bereit.

Du bist fertig. Ziemlich einfach.

Abschluss

Wow. Vielen Dank, dass Sie den gesamten Artikel gelesen haben.

Sie wissen jetzt mehr über Grav-Themen:

(1) Organisation/Dateistruktur
(2) Zweigvorlagen
(3) CSS
(4) Twig-Funktionalit?t
(5) Anpassung

Erw?gen Sie die Verwendung von Grav aufgrund seiner Einfachheit, insbesondere beim Anpassen von Themen. Was gibt es an PHP, Twig, Vanilla CSS und JS nicht zu lieben? Sie erstellen Ihre Inhalte sogar im Markdown.

Codieren Sie weiterhin Symfonistas und Gravinauts!

Ressourcen

https://learn.getgrav.org/17/themes

https://twig.symfony.com/

https://twig.symfony.com/doc/3.x/

https://www.drupal.org/docs/contributed-modules/twig-tweak-2x/cheat-sheet

Das obige ist der detaillierte Inhalt vonErstellen eines einfachen Grav CMS-Themes mit Twig, PHP und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!