Ja, das kannst du machen.
Um dies zu erreichen, werden wir die Tatsache ausnutzen, dass die aktuelle Seite immer durch die flüssige Variable dargestellt wird: page
in der Vorlage, und dass jeder Beitrag / jede Seite eine eindeutige Kennung in ihrem page.url
Attribut hat.
Dies bedeutet, dass wir nur eine Schleife verwenden müssen, um unsere Navigationsseite zu erstellen, und auf diese Weise page.url
gegen jedes Mitglied der Schleife prüfen können . Wenn eine Übereinstimmung gefunden wird, kann dieses Element hervorgehoben werden. Auf geht's:
{% for node in site.pages %}
{% if page.url == node.url %}
<li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
{% else %}
<li><a href="{{node.url}}">{{node.title}}</a></li>
{% endif %}
{% endfor %}
Dies funktioniert wie erwartet. Allerdings möchten Sie wahrscheinlich nicht alle Ihre Seiten in Ihrer Navigationsleiste haben. Um die "Gruppierung" der Seite zu emulieren, können Sie Folgendes tun:
## Put the following code in a file in the _includes folder at: ./_includes/pages_list
{% for node in pages_list %}
{% if group == null or group == node.group %}
{% if page.url == node.url %}
<li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
{% else %}
<li><a href="{{node.url}}">{{node.title}}</a></li>
{% endif %}
{% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}
Jetzt können Seiten "gruppiert" werden. Um einer Seite eine Gruppe zuzuweisen, müssen Sie diese auf den Seiten YAML Front Matter angeben:
---
title: blah
categories: blah
group: "navigation"
---
Endlich können Sie Ihren neuen Code verwenden! Wo immer Sie Ihre Navigation für Ihre Vorlage benötigen, "rufen" Sie einfach Ihre Include-Datei auf und übergeben Sie ihr einige Seiten und die Gruppe, die Sie anzeigen möchten:
<ul>
{% assign pages_list = site.pages %}
{% assign group = 'navigation' %}
{% include pages_list %}
</ul>
Beispiele
Diese Funktionalität ist Teil des Jekyll-Bootstrap- Frameworks. Die genaue Dokumentation zu dem hier beschriebenen Code finden Sie unter: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list
Endlich können Sie es auf der Website selbst in Aktion sehen. Schauen Sie sich einfach die rechte Navigation an und Sie werden sehen, dass die aktuelle Seite grün hervorgehoben ist: Beispiel hervorgehobener Navigationslink