[解決済み] Jekyll - メニューバーで現在のタブを自動的にハイライトする

質問

私は静的なサイトをホストするためにgithubとそれを生成するためにJekyllを使用しています。

私はメニューバーを持っている（として <ul> として)メニューバーがあり <li> を CSS ハイライトのために別のクラスとして割り当てたいと思います。

というわけで、擬似コードのようなもの。

<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>

あるいは、全体の <ul> Jekyllで。

どのようにこれは、問題のある以外の最小限の変更で行うことができます。 <ul> ?

どのように解決するのですか？

はい、あなたはこれを行うことができます。

これを達成するために、我々は現在のページが常にliquid変数によって表されるという事実を利用します。 page という変数で表され、また、それぞれの投稿/ページがその page.url 属性に一意な識別子を持たせています。

つまり、ナビゲーション・ページを構築するためにループを使用すればよく、そうすることによって page.url をループの各メンバーに対してチェックします。一致するものがあれば、その要素をハイライトすることができます。さあ、始めましょう。

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

これは期待通りに動作します。しかし、おそらくあなたは、すべてのページをナビバーに表示したいわけではありません。ページのグループ化をエミュレートするために、次のようなものを使用できます。

## 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 %}

これでページをグループ化することができるようになりました。ページにグループを与えるには、ページのYAMLフロントマターでそれを指定する必要があります。

---
title: blah
categories: blah
group: "navigation"
---    

最後に、新しいコードを使用することができます! テンプレート内のどこにナビゲーションを配置する必要がある場合でも、単にインクルードファイルを呼び出し、いくつかのページと表示したいグループを渡します。

<ul>
  {% assign pages_list = site.pages %}
  {% assign group = 'navigation' %}
  {% include pages_list %}
</ul>

例

この機能は ジキル-ブートストラップ フレームワークの一部です。 あなたはここに概説されたコードのための正確なドキュメントを参照してくださいすることができます。 http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

最後に、Web サイトの中で実際に動作している様子をご覧ください。右側のナビゲーションを見ると、現在のページが緑色でハイライトされているのがわかります。 ハイライトされたナビリンクの例