Erste Schritte zum eigenen Jekyll-Theme

Erste Schritte zum eigenen Jekyll-Theme

Der einfachste Weg mit einem neuen CMS eine eigene Website zu bauen, ist die Modifizierung des bestehenden Themes. Das pure Standard-Jekyll-Theme eignet sich gut als Ausgangspunkt für die ersten Schritte.

Die Jekyll-Layout-Dateien liegen im Ordner _layouts und umfassen die Dateien default.html, post.html und page.html. Welches Layout für eine Seite genutzt wird, definiert man im so genannten Front-Matter.

Das Front-Matter ist der Bereich zu Beginn eines Beitrages, der die Metadaten zum jeweiligen Dokument zusammenfasst. Die Blog-Beiträge findet man im Verzeichnis _posts.

includes – Wiederkehrende Code-Teile auslagern

Auch Jekyll erlaubt das zerlegen eines Templates in verschiedene Bauteile. Für die Übersicht zerlegen Sie am Besten Ihr bestehendes Theme in vier Bestandteile:

  1. header
  2. footer
  3. sidebar
  4. content

Da sich content aus dem Inhalt der Textdateien ergibt, kümmern Sie sich zuerst um die ersten drei Bauteile. Dazu legen Sie einen Ordner _includes an, in welchem Sie die folgenden drei Dateien anlegen:

  1. header.html
  2. footer.html
  3. sidebar.html

Innerhalb eines Templates ruft man diese Code-Bauteile über den Befehl {% include code-teil.html %} auf. Zum Beispiel: {% include footer.html %}.

Anschließend öffnen Sie das default.html-Template und kopieren den oberen Teil bis {{ content }} in header.html und den abschließenden Teil nach {{ content }} in footer.html.

Um die includes innerhalb von default.html aufzurufen, genügt der Befehl {% include header.html %}. Die default.html-Datei sieht dann so aus:

{% include header.html %}
    {{ content }}
{% include footer.html %}