HackerSchool

Schluss mit dem Bearbeiten von einfachen Beiträgen, jetzt wollen wir uns um die Seite als ganzes kümmern! Wir werfen einen Blick auf das Templating-System von Jekyll und basteln (endlich) einen funktionierenden “Zurück” Link in eure Seite.

Der _layouts Ordner und die {{content}} Anweisung

Bisher haben wir uns bei der Erkundung von Jekyll auf den ` _posts Ordner und die _config.yml` Datei beschränkt. Trotzdem war um den eigenen Beitrag “herum” ja immer noch ein bisschen mehr Inhalt, z.B. der Name des Autors und der Name der Webseite als Ganzes. Die meisten Webseiten verwenden auf die ein oder andere Art ein System aus verschachtelten Vorlagen (engl. Templates) und auch unsere Seite ist keine Ausnahme.

Im _layouts Ordner finden sich zwei Dateien: default.html und post.html. In diesen Dateien stehen noch ein paar HTML Elemente, auf die wir bisher nicht vertieft eingegangen sind:

An der Datei für das standardmäßige (engl. default) Layout sieht man die vollständige Struktur einer HTML Datei. Wir haben uns bisher nur mit HTML das zwischen <body>...</body> steht befasst, dieser Bereich wird direkt im Browserfenster dargestellt. Das Element head steht für einen Bereich mit zusätzlichen Informationen, die nicht direkt angezeigt werden..
- Den Text im title Element seht Ihr aber auf den Tabs bzw. an der Fensterleiste des Browsers.
- Durch meta Informationen können dem Browser weitere Hinweise zur Verarbeitung gegeben werden, in diesem Fall sorgt die Schlüssel-Wert Kombination charset="utf-8" dafür, dass wir auf unseren Seiten Umlaute (ä,ö,ü) verwenden können.
An der Datei für die Beiträge (engl. post) sieht man häufig das Attribut class. Mit diesem Attribut werden wir uns im Rahmen des Webdesigns befassen.

_layouts/default.html

    <!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    <h1>{{ site.title }}</h1>
    {{ content }}
  </body>
</html>

_layouts/post.html

  
    
---
layout: default
---
<div class="post">

  <header class="post-header">
    <h2 class="post-title">{{ page.title }}</h2>
    <p class="post-meta">
      {{ page.date | date: "%b %-d, %Y" }} • {{ page.author }}
    </p>
  </header>

  <article class="post-content">
    {{ content }}
  </article>
</div>

Das Besondere an diesen Template Dateien ist die Verwendung des Ausdrucks {{ content }}. An dieser Stelle wird der Inhalt eines Dokumentes, sofern im Frontmatter das entsprechende layout definiert ist, einfach eingesetzt. Wenn wir also einen Beitrag schreiben, wird dieser in zwei verschiedene Dateien eingesetzt:

Zunächst in die Datei _layouts/post.html, dadurch sehen alle “normalen” Blogbeiträge gleich aus.
Weil die Datei _layouts/post.html aber seinerseits auf das layout default verweist, kommt auch die Datei _layouts/default.html ins Spiel.

Bearbeitet eine der beiden Vorlagendateien so, dass von jeder Unterseite immer mit nur einem Klick zurück zur Startseite navigiert werden kann. Verwendet dazu die folgende Vorlage: href="{{site.baseurl}}/". Im nächsten Kapitel wird auf die Bedeutung hiner dieses Konstrukts genauer eingegangen.
Ergänzt die Vorlagedatei für Beiträge so, dass unter jedem Beitrag in einem eigenen Absatz eine Werbenachricht wie "Diese Seite wird Ihnen präsentiert von: Hundefutter" oder ähnliches steht.
Für Fortgeschrittene: Verwendet in der Werbenachricht wahlweise eine Variable aus der Kategorie page oder site.