Jekyll Webseite und Template einrichten
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html lang="de">
{% include metadaten/head.html %}
<body>
{% include header.html %}
{{ content }}
{% include footer.html %}
</body>
</html>
In diesem Beispiel sind der header, footer etc. komplett ausgelagert. Ob man alle includes im root-Ordner (_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.
1
2
3
4
5
6
7
8
9
10
11
12
<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">
<!-- Beispiel für die Einbindung von CSS (und JS) -->
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<!-- auch hier kannst Du mit page.* und site.* auf Seitenparameter zugreifen. -->
<title>Jekyll Webseite und Template einrichten</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.
Navigation
Im Header-Bereich der Webseite befindet sich in aller Regel die Navigation. Bei meinem Beispiel sieht ein Ausschnitt des Headers so aus:
1
2
3
4
5
6
7
<div class="main-menu">
<ul>
{% include navigation.html %}
</ul>
</div>
Im include von navigation.html befindet sich folgender Code:
1
2
3
4
5
6
7
8
9
10
{% 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:
1
2
3
4
5
6
- 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 ein Wiki lässt sich diese Art und Weise der Linkstrukturierung ebenfalls wunderbar nutzen.
1
2
3
4
- name: Linkname
desc: Linkbeschreibung
link: Linkpfad
icon: Link Iconname