Erstellen eines einfachen Grav CMS-Themes mit Twig, PHP und CSS

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:

befinden

• 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!