Wie immer gibt es zwei Wege. Einer ist kompliziert – manuelle Anpassung mit langer Vorbereitung des Themas bis zu einem akzeptablen Aussehen, der andere ist einfacher: Wir laden ein Skelett herunter und entpacken es einfach im Stammverzeichnis der Website mit Ersatz der Dateien. Welchen wählen Sie, die einfache Variante oder das Studium von Twig und SCSS?
Gut, hier ist der Link zu den Skeletten: https://getgrav.org/downloads/skeletons
Wählen Sie nach Ihrem Geschmack, laden Sie es herunter und entpacken Sie es in den Website-Ordner. Zum Zeitpunkt des Schreibens dieses Artikels bin ich auf das Thema Stripped umgestiegen. Es stellte sich heraus, dass ich das Rad neu erfand, da ein Skelett auf Basis dieses Themas bereits existiert.
Bearbeitung des Grav-Themas
Es ist durchaus möglich, dass selbst das Skelett nicht alles bietet, was Sie benötigen. Dann gehen wir zu komplizierteren Aktionen über, denn die Änderung des Themas wird notwendig. Ja, vergessen Sie nicht, zu Einstellungen → Inhalt zu gehen und das Häkchen bei Twig-Prozess zu setzen. Speichern. Großartig, jetzt beginnen wir mit der Arbeit am Template.
Die Themen in dieser CMS basieren auf dem Templating-System Twig, Symfony-Fans atmen erleichtert auf, WordPress-Nutzer sind überrascht. Seien wir ehrlich, die Themen in WP sind um einiges komplizierter. Wenn hier sogar ein Mensch mit wenig Erfahrung zurechtkommt, muss man für WordPress viel mehr wissen.
Nun, über Geschmack lässt sich streiten. Für jemanden kann Grav schwerer erscheinen. Gehen wir zur Anpassung über.
So sehen die Vorlagen der Themes ungefähr aus. Die Dateien haben die Endung .html.twig. Das Beste daran ist, dass man sie nach Belieben ändern kann, sie müssen nicht aktualisiert werden und Ihre Änderungen werden daher nicht überschrieben. Als Hauptseite habe ich die Datei blog.html festgelegt. Das bedeutet, dass ich die Datei blog.html.twig öffnen muss. Die Dateien mit der Endung .twig sind für das Templating verantwortlich. Angenommen, ich möchte den Kalender ändern und die Teilen-Links mit Symbolen anpassen. Ich muss herausfinden, wo diese gespeichert sind.
Die Datei base.html.twig ist für die Einbindung externer Dateien, die Platzierung der Seitenleiste und Ähnliches verantwortlich. Diese werden wir nicht anfassen, aber es ist deutlich zu sehen, dass man, wenn man mit der Seitenleiste “zaubern” möchte, mit der Vorlage partials/sidebar.html.twig beginnen muss. Ich habe beschlossen, den Spaß auf später zu verschieben, da mir die Seitenleiste sehr gefällt. Aber das Teilen ist nicht ganz so. Also gehen wir zur Datei blog_item.html.twig und finden heraus, was für den Kalender und das Teilen verantwortlich ist.
Im Screenshot ist der Code, den Sie durch Ihren eigenen ersetzen müssen, deutlich zu erkennen. Um die Bearbeitung zu erleichtern, können Sie die Syntax-Hervorhebung einschalten. Ich empfehle Ihnen, ESCRIPT zu installieren, wenn Sie Notepad++ verwenden. Jetzt bearbeiten wir.
Ich habe einfach den Codeblock geändert:
{% if site.share.facebook or site.share.twitter %}
<ul class="stats">
{% if site.share.facebook %}
<li><a href="https://vk.com/share.php?url=https://extremal.site" target="_blank" class="icon fa-vk"><i class="fa fa-circle-o-notch fa-spin"></i></a></li>
{% endif %}
{% if site.share.twitter %}
<li><a href="https://twitter.com/share" data-url="{{ page.url(true) }}" data-text="{{ page.title }}" class="icon fa-twitter"><i class="fa fa-circle-o-notch fa-spin"></i></a></li>
{% endif %}
</ul>
{% endif %}Wie Sie sehen, habe ich nur den Teilen-Link für VK hinzugefügt und ihn mit Twitter vertauscht, während ich das Symbol ersetzt habe. Mehr nicht.
Es ist viel bequemer, über FTP zu arbeiten. In einem der nächsten Artikel werden wir eine eigene Vorlage für die Eintragsseite erstellen, da mir die im Skelett enthaltene nicht besonders gefällt.
