Jekyll Liquid Unter-Navigation nicht richtig auswählen

Question

Ich baue eine statische Website auf gh-pages mit liquid. Ich erzeuge eine einfache Navigation auf zwei Ebenen aus einer Datendatei. Mein Problem ist, dass ich festhalte, um zwei Dinge zu tun:

1. Wenden Sie eine "ausgewählte" Klasse auf das aktuelle Element der Seitenverknüpfung an.
2. Wenden Sie eine "offene" Klasse auf das übergeordnete Listenelement an, wenn ein Sublink-Menü vorhanden ist.

Hier ist das Format, das ich meine _data/nav.yml Datei bin

in

- title: Top Level Nav Item 
    url: level-1/ 
    sublinks: 
    - title: Child Nav Item 1 
    url: child-1/ 
    - title: Child Nav Item 2 
    url: child-2/ 

Hier ist, wie ich meine Navigation baue:

{% assign current_page = page.url | remove: 'index.html' %} 
<ul class="-nav"> 
{% for nav in include.nav %} 
    {% assign current = null %} 
    {% if nav.url == current_page %} 
     {% assign current = ' _selected' %} 
    {% endif %} 
    {% if nav.url contains current_page %} 
     {% assign open = ' _open' %} 
    {% endif %} 
    <li class="-item{{ current }}{{ open }}"> 
     <a href="{{ site.url }}{{ nav.url }}">{{ nav.title }}</a> 
     {% if nav.sublinks and current_page contains nav.url %} 
      {% include navigation.html nav=nav.sublinks%} 
     {% endif %} 
    </li> 
{% endfor %} 
</ul> 

Auch dieses richtig meine Navigation baut, aber es doesn Wendet weder die ausgewählte noch die offene Klasse an.

Hier ist, was ich möchte, dass es wie am Ende aussehen:

Was mache ich falsch?

Answer 1

Endlich funktioniert das. Ich löste es, indem ich ein Element zu der Vorderseite meiner Seite hinzufügte, die permalink genannt wurde, wo ich den gewünschten Seitenpermalink spezifizierte.

--- 
layout: default 
title: Example 
permalink: url/example/ 
--- 

Ich benutze diesen Link gegen den Strom page.url überprüfen Sie die gewünschte _selected Klasse auf dem <li> Element hinzuzufügen.

Ich habe eine Änderung an meiner Beispieldatendatei vorgenommen und den übergeordneten URL-Teil in die URL des Kindes eingefügt. Ich bin mir nicht sicher warum, aber ich hatte Probleme beim Drucken der gesamten URL sonst.

- title: Top Level Nav Item 
    url: level-1/ 
    sublinks: 
    - title: Child Nav Item 1 
    url: level-1/child-1/ 
    - title: Child Nav Item 2 
    url: level-1/child-2/ 

schließlich für meine navigation.html sind, hier ist, wie ich mein Hauptmenü bin Erstellen von Untermenü zu machen, wenn sie vorhanden und soll die aktive Verbindung gezeigt, und eine geeignete Auswahl werden:

{% assign current_page = page.url | remove: 'index.html' %} 
<ul class="-nav"> 
{% for nav in include.nav %} 
    {% assign current = null %} 
    {% if nav.url == page.permalink %} 
     {% assign current = ' _selected' %} 
    {% endif %} 
    <li class="-item{{ current }}"> 
     <a href="/{{ nav.url }}">{{ nav.title }}</a> 
     {% if nav.sublinks and current_page contains nav.url %} 
      {% include navigation.html nav=nav.sublinks%} 
     {% endif %} 
    </li> 
{% endfor %} 
</ul> 

Die großer Unterschied zwischen diesem und dem Ausschnitt, den ich ursprünglich gepostet habe, ist, dass ich die {{ open }} Sachen für jetzt fallen gelassen habe. Ein Problem nach dem anderen. Die andere Sache ist, dass ich überprüfe, ob nav.url gleich page.permalink ist. Vorher habe ich gegen page.url gecheckt und das ist mir immer gescheitert.

Es ist wahrscheinlich nicht das schönste, aber ich habe schließlich ein liquid Menü, um (semi-) dynamisch und richtig die aktive Verbindung zu wählen.