Aufgepretzelt – von statisch zu generiert – Teil 4

Pretzel

Pretzel

Mit Hilfe von Pretzel haben wir im dritten Teil die ersten redundanten Informationen ausgelagert. Im vierten und letzten Teil sehen wir, wie das Menü ausgelagert werden kann und was man bei Websites tun kann, die verschiedene Layouts verwenden.

Menü
Die meisten Websites bestehen aus mehr als einer Seite und nutzen zur Navigation zwischen den Seiten ein Menü. Um dem Benutzer anzuzeigen, wo er sich gerade befindet, wird der aktuelle Menüpunkt hervorgehoben. Dadurch sieht das Menü auf jeder Seite ein kleines bisschen anders aus, enthält aber immer die gleichen Menüpunkte, welche auch ausgelagert werden sollen.

Um das Menü mittels Pretzel auszulagern kann man den folgenden Aufbau im Layout benutzen:

<ul class="menu">
  <li {% if page.url == "/index.html" %} class="active"{% endif %}><a href="index.html">Home</a></li>
  <li {% if page.url == "/seite1.html" %} class="active"{% endif %}><a href="seite1.html">Seite 1</a></li>
  <li {% if page.url == "/seite2.html" %} class="active"{% endif %}><a href="seite2.html">Seite 2</a></li>
  <!-- etc. -->
</ul>

Dadurch wird bei der Seite, welche gerade bearbeitet wird (sprich, bei welcher die URL übereinstimmt) die css-class active gesetzt. Die Quelle für diese Variante ist Jekyll Tips. Dort wird auch auf den Nachteil dieser einfachen Lösung hingewiesen: Neue oder umbenannte Seiten müssen im Layout nachgeführt werden, sonst erscheinen sie im Menü nicht. Falls nur wenige Änderungen anfallen, kann dies aber verschmerzt werden. Die dort aufgeführte automatische Variante scheint mit Pretzel (noch) nicht zu funktionieren.

Zwei Layouts
Einige Websites nutzen neben dem Layout für die normalen Seiten ein zweites Layout, z.B. für den Blog oder eine Fotogalerie. Dazu kann ein weiteres Datei im Ordner _layouts erstellt werden. In den Dateien, welche das zweite Layout verwenden sollen, kann dann auf das neue Layout verwiesen werden.

Dadurch sind aber Redundanzen schon wieder vorprogrammiert. Dies kann aber durch includes verhindert werden. Die in beiden Layouts vorhandenen Fragmente können in Dateien ausgelagert werden, welche im Ordner _includes abgelegt werden müssen. Im Layout kann dann das Fragment mit {% include footer.html %} eingefügt werden.

Abschluss
Weitere individuelle Elemente sollten mit den oben gezeigten Grundlagen umgesetzt werden können. Ansonsten ist die Dokumentation von Jekyll eine gute Anlaufstelle, da die Beschreibung von Pretzel nur die Pretzel-spezifischen Informationen und die Unterschiede zu Jekyll enthält.

Sobald die Migration abgeschlossen ist können die geplanten Änderungen (welche ja der Auslöser für die ganze Arbeit waren) vorgenommen werden. Es empfiehlt sich dabei, den Mechanismus für die Sicherheitskopie beizubehalten.

Fazit
Mit diesen einfachen Grundlagen sollten die meisten Webseiten umgebaut werden können, so dass Änderungen einfacher vonstatten gehen. Gewisse Funktionen sind aber noch nicht komplett von Jekyll übernommen worden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.