Couchblog

Bloggen von der Couch ➔ Gedanken, Notizen und Kommentare zu Online-Marketing, Webentwicklung und allgemeinen IT-Themen. Schau rein und mach es Dir gemütlich.

Card image cap

Jekyll - Teil 2: Website einrichten


Layout

Jekyll nutzt die Template-Sprache Liquid. Dadurch wird es nun relativ einfach, jedes HTML-Template mit Jekyll zu verbinden. Ein Standard-Layout könnte so aussehen:

<!doctype html>
<html lang="de">
{% include metadaten/head.html %}

<body>
    {% include header.html %}
    {{ content }}
    {% include footer.html %}
</body>

</html>

In diesem Beispiel ist der <head>...</head>-Bereich der Webseite komplett ausgelagert. Ob man alle “includes” im root (_includes) oder in Unterordnern (z.B. _includes/metadaten) speichert, bleibt Dir überlassen. Am Ende solltest Du einfach den Überblick behalten können.

Head-Bereich

Schauen wir uns den Head-Bereich gleich mal an, wo wir doch gerade darüber sprechen. Sonderlich kompliziert ist das nicht, aber ein paar kleine Hinweise sind sicher ganz nett. Hier also nun ein Ausschnitt mit Kommentaren.

<head>
    ...
    <!-- damit Verlinkungen von internen Ressourcen immer funktionieren, solltest Du absolute_url angeben -->
    <link rel="shortcut icon" type="image/png" href="{{ 'assets/img/favicon.ico' | absolute_url  }}">

    <!-- Beispiel für die Einbindung von CSS (und JS) -->
    <link rel="stylesheet" href="{{ 'assets/css/bootstrap.min.css' | absolute_url }}">

    <!-- auch hier kannst Du mit page.* und site.* auf Seitenparameter zugreifen. -->
    <title>{{ page.title }}</title>
    ...
</head>

Die restlichen “includes” funktionieren nach dem gleichen Prinzip. Nur anstelle des Content-Tags wird dann der jeweilige Inhalt gerendert. Welche Seite, welches Layout bekommen soll, legst Du im YAML-Header jeder Seite fest. Aber dazu später mehr.

Im Header-Bereich der Webseite befindet sich in aller Regel die Navigation. Bei meinem Beispiel sieht ein Ausschnitt des Headers so aus:

...
<div class="main-menu">
    <ul>
        {% include navigation.html %}
    </ul>
</div>
...

Im “include” navigation.html befindet sich folgender Code:

{% for item in site.data.navigation %}
<li>
    <a href="{{ item.link | relative_url  }}" 
        {% if page.url == item.link %}class="current"
        {% endif %}>{{ item.name }}
    </a>
</li>
{% endfor %}

Hier siehst Du wieder eine neue Möglichkeit, Jekyll ganz entspannt und einfach mit Daten zu versorgen. Um möglichst wenig Pflegeaufand bei Änderungen der Navigation zu haben, nutze ich YAML-Dateien im _data-Ordner. Daher auch der Zugriff auf site.data.navigation.

In der entsprechenden navigation.yml im _data-Ordner steht:

- name: Home
  link: /
- name: Blog
  link: blog/index.html
- name: Couchwiki
  link: wiki/index.html

Sollte ich nun einen weiteren Punkt in der Navigation benötigen, so ergänze ich ganz einfach nur einen weiteren Anstrich. Für das Couchwiki nutze ich diese Art und Weise der Linkstrukturierung ebenfalls.

- name: Linkname
  desc: Linkbeschreibung
  link: Linkpfad
  icon: Link Iconname