ジキルリキッドサブナビゲーションが正しく選択されていない

Question

gh-pagesに静的なウェブサイトを構築しています。jekyllliquidを使用しています。私はデータファイルからシンプルな2レベルのナビゲーションを適切に生成しています。私の問題は、私が2つのことをやろうとしていることです。

1. 現在のページリンク項目に「selected」クラスを適用します。
2. サブリンクメニューが存在する場合、親リスト項目に「オープン」クラスを適用します。

は、ここで私は私の_data/nav.ymlファイルに

- 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/ 

を使用しているフォーマットは、ここで私は私のナビゲーションを構築しています方法ですです：

{% 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> 

これも正確に私のナビゲーションを構築しますが、それはdoesnの選択したクラスまたは開いているクラスのいずれかを適用しません。ここで

は、私はそれが最後に次のようになりたいんだよ：私は間違って何をやっている

？

Answer 1

最後にこれが機能しました。私は、自分のページの正面に、パーマリンクを指定したpermalinkという項目を追加して解決しました。私は<li>要素上に所望の_selectedクラスを追加するために、現在のpage.urlに対してチェックするために、このパーマリンクを使用

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

。

親のurl_partに子のURLを追加して、私のサンプルデータファイルを修正しました。私は理由は分かりませんが、そうでなければ正しくURL全体を印刷するのに問題がありました。私navigation.htmlため

- 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/ 

最後に、ここで私は、私のメインメニューを作成し、彼らが存在し、表示する必要がある場合は、サブメニューをレンダリングし、適切にアクティブリンクを選択しています方法です、次のとおりです。

{% 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> 

これと私が最初に投稿したスニペットとの大きな違いは、今のところ{{ open }}のものを落としたことです。一度に1つの問題。もう1つは、nav.urlがpage.permalinkと等しいかどうかを確認することです。私がpage.urlと照合する前に、これはいつも私のために失敗しました。

これはおそらく最もきれいではありませんが、最終的にアクティブなリンクを（半）動的に生成するためにjekyllliquidメニューを取得しました。