データ駆動型ナビゲーションでアクティブなクラスを設定する

Question

私の_dataフォルダーに正しく動作しているデータがいくつか作成されました。私はそれを使用してナビゲーションシステムを作成しています。私のデータファイルelements.ymlで

：私の簡単なナビゲーションのために

- name: design-elements 

- name: ui-components 

- name: helper-classes 

page.url == {{data.name}}場合、私はactiveクラスを追加します。

{% for element in site.data.elements %} <li {% if page.url == '/{{ element.name }}.html' %} class="active"{% endif %}>

それ決しては私のページのNAVは{{element.name}}と同じであっても、trueに解決します。私はこのようなことを書いています。

私は明示的にこのようにそれを記述する場合、それは動作します：

<li {% if page.url == '/design-elements.html' %} class="active"{% endif %}>

なぜこれが起こっている私にはわかりません。

Answer 1

{{}}{%%}は機能しません。

ので、この：

<li {% if page.url == '/{{ element.name }}.html' %} class="active"{% endif %}> 

はそれらなしで書き直す必要があります。この場合、私はcaptureタグを使用しますが、それはまた、新しい文字列に結果のURLを割り当てて行うこととし、それを比較する：

{% capture new_url %}/{{element.name}}.html{% endcapture %} 
<li {% if page.url == new_url %} class="active"{% endif %}>