これは、Jekyllで設定した2ページで行います。
私が最初に行うことは、すべてのページの情報を使用して_config.yml内にエントリを作成することです。
# this goes inside _config.yml. Change as required
navigation:
- text: What we do
url: /en/what-we-do/
- text: Who we are
url: /en/who-we-are/
- text: Projects
url: /en/projects/
layout: project
- text: Blog
url: /en/blog/
layout: post
次に、メインレイアウトで、その情報を使用してナビゲーションリンクを生成します。各リンクで、リンクのURLを現在のページのURLと比較します。それらが等しい場合、ページはアクティブです。そうでなければ、そうではありません。
いくつかの特殊なケースがあります。すべてのブログ投稿で「ブログ」リンクを強調表示する必要があり、フロントページ(英語とスペイン語)にナビゲーションバーを表示してはなりません。どちらの場合も、ブログの投稿とフロントページに特定のレイアウトがあるという事実に依存しています(yamlの「Blog」リンクと「Project」リンクには「layout」と呼ばれる追加のパラメーターがあることに注意してください)。
ナビゲーションコードは次のように生成されます。
{% unless page.layout == 'front' %}
<ul class="navigation">
{% for link in site.navigation %}
{% assign current = nil %}
{% if page.url == link.url or page.layout == link.layout %}
{% assign current = 'current' %}
{% endif %}
<li class="{% if forloop.first %}first{% endif %} {{ current }} {% if forloop.last %}last{% endif %}">
<a class="{{ current }}" href="{{ link.url }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
{% endunless %}
新しいページを追加するたびに_config.yamlにエントリを追加し、Jekyllを再起動することを覚えておく必要がありますが、今ではほとんど発生しません。
ナビゲーションyamlは「navigation」などと呼ばれる_include内に入れることができると思いますが、それらの中でyamlを使用しようとしたことがないため、機能するかどうかはわかりません。私の場合、多言語サイトを持っているので、すべてを設定内に置く方が簡単です(翻訳が欠落していると見つけやすくなります)
これがお役に立てば幸いです。