Jekyll-メニューバーの現在のタブを自動的に強調表示します

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

メニューバー（として<ul>）があり<li>、現在のページに対応するものに、CSSの強調表示用に別のクラスを割り当てたいと思います。

したがって、擬似コードのようなもの：

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

あるいは<ul>、ジキルで全体を生成することさえできます。

問題のあるもの以外の最小限の変更でこれをどのように行うことができ<ul>ますか？

はい、これを行うことができます。
これを実現するために、現在のページは常に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 FrontMatterでそのページを指定する必要があります。

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

最後に、新しいコードを使用できます！テンプレートに移動するためにナビゲーションが必要な場合は、インクルードファイルを「呼び出し」て、いくつかのページと表示するグループを渡すだけです。

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

例

この機能は、Jekyll-Bootstrapフレームワークの一部です。ここに概説されているコードの正確なドキュメントを見ることができます：http：//jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

最後に、Webサイト自体の中で実際に動作していることを確認できます。右側のナビゲーションを見ると、現在のページが緑色で強調表示されていることがわかります。強調表示されたナビゲーションリンクの例

最も単純なナビゲーション要件については、リストされているソリューションは非常に複雑だと思います。これは、フロントマター、JavaScript、ループなどを含まないソリューションです。

ページのURLにアクセスできるので、次のようにURLを正規化して分割し、セグメントに対してテストできます。

{% assign current = page.url | downcase | split: '/' %}

<nav>
  <ul>
    <li><a href='/about' {% if current[1] == 'about' %}class='current'{% endif %}>about</a></li>
    <li><a href='/blog' {% if current[1] == 'blog' %}class='current'{% endif %}>blog</a></li>
    <li><a href='/contact' {% if current[1] == 'contact' %}class='current'{% endif %}>contact</a></li>
  </ul>
</nav>

もちろん、これは静的セグメントがナビゲーションを描写する手段を提供する場合にのみ役立ちます。もっと複雑なものは、@ RobertKennyが示したようなフロントマターを使用する必要があります。

@ ben-fosterのソリューションに似ていますが、jQueryを使用していません

シンプルなものが必要でした。これが私がしたことです。

私の前書きでは、私はという変数を追加しました active

例えば

---
layout: generic
title:  About
active: about
---

次のセクションにナビゲーションインクルードがあります

    <ul class="nav navbar-nav">
        {% if page.active == "home" %}
            <li class="active"><a href="#">Home</a></li>
        {% else %}
            <li><a href="https://stackoverflow.com/">Home</a></li>
        {% endif %}
        {% if page.active == "blog" %}
            <li class="active"><a href="#">Blog</a></li>
        {% else %}
            <li><a href="../blog/">Blog</a></li>
        {% endif %}
        {% if page.active == "about" %}
            <li class="active"><a href="#">About</a></li>
        {% else %}
            <li><a href="../about">About</a></li>
        {% endif %}
    </ul>

ナビゲーション内のリンクの量が非常に狭いので、これは私にとってはうまくいきます。

現在のページを強調するための最良の方法だと思う私の解決策は次のとおりです。

_config.ymlで次のようにナビゲーションリストを定義します。

navigation:
  - title: blog
    url: /blog/
  - title: about
    url: /about/
  - title: projects
    url: /projects/

次に、_includes / header.htmlファイルでリストをループして、現在のページ（page.url）がナビゲーションリストの項目に類似しているかどうかを確認する必要があります。類似している場合は、アクティブなクラスを設定して<a>タグに追加します。

<nav>
  {% for item in site.navigation %}
      {% assign class = nil %}
      {% if page.url contains item.url %}
          {% assign class = 'active' %}
      {% endif %}
      <a href="{{ item.url }}" class="{{ class }}">
          {{ item.title }}
      </a>
  {% endfor %}
</nav>

また、equals =演算子の代わりにcontains演算子を使用しているため、「/ blog / post-name /」や「projects / project-name / 」などのURLで機能させるために追加のコードを記述する必要はありません。'。だからそれは本当にうまくいきます。

PS：ページにパーマリンク変数を設定することを忘れないでください。

これを実現するために、JavaScriptを少し使用しました。メニューには次のような構造があります。

<ul id="navlist">
  <li><a id="index" href="index.html">Index</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="videos.html">Videos</a></li>
</ul>

このjavascriptスニペットは、現在の対応するページを強調表示します。

$(document).ready(function() {
    var pathname = window.location.pathname;

    $("#navlist a").each(function(index) {
        if (pathname.toUpperCase().indexOf($(this).text().toUpperCase()) != -1)
            $(this).addClass("current");
    });

    if ($("a.current").length == 0)
        $("a#index").addClass("current");
});

私のアプローチは、ページのYAMLフロントマターでカスタム変数を定義し、これを<body>要素に出力することです。

<body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}> 

私のナビゲーションリンクには、リンク先のページの識別子が含まれています。

<nav>
    <ul>
        <li><a href="artists.html" data-page-id="artists">artists</a></li>
        <li><a href="#" data-page-id="contact">contact</a></li>
        <li><a href="#" data-page-id="about">about</a></li>
    </ul>
</nav>

ページフロントマターでは、ページIDを設定します。

---
layout: default
title: Our artists
id: artists
---

そして最後に、アクティブなリンクを設定するためのjQueryを少し追加します。

// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
    $("a[data-page-id='" + currentPage + "']").addClass("active");
}

あなたのウェブサイトのナビゲーションは順序付けられていないリストでなければなりません。リストアイテムがアクティブなときに明るくするために、次の液体スクリプトはそれらに「アクティブ」クラスを追加します。このクラスはCSSでスタイル設定する必要があります。以下のコードに示すように、アクティブなリンクを検出するために、スクリプトは「contains」を使用します。

<ul>
  <li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
    <a href="https://stackoverflow.com/getting-started/">Getting started</a>
  </li>
  ...
  ...
  ...
</ul>

このコードは、Jekyllのすべてのパーマリンクスタイルと互換性があります。'contains'ステートメントは、次のURLの最初のメニュー項目を正常に強調表示します。

• 入門/
• get-started.html
• get-started / index.html
• はじめに/サブページ/
• get-started / subpage.html

ソース：http：//jekyllcodex.org/without-plugin/simple-menu/

ここには紛らわしい答えがたくさんあります。私は単にif：を使用します

{% if page.name == 'limbo-anim.md' %}active{% endif %} 

このページを直接参照して、クラス内に配置します

<li><a class="pr-1 {% if page.name == 'limbo-anim.md' %}activo{% endif %} " href="limbo-anim.html">Animación</a></li>

完了。クイック。

私はpage.pathファイル名を使用し、削除してきました。

<a href="https://stackoverflow.com/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>

すでにたくさんの良い答えがあります。

これを試して。

上記の答えを少し変更します。

_data/navigation.yaml

- name: Home
  url: /
  active: home
- name: Portfolio
  url: /portfolio/
  active: portfolio
- name: Blog
  url: /blog/
  active: blog

ページ内-> portfolio.html（比較的アクティブなページ名を持つすべてのページで同じ）

---
layout: default
title: Portfolio
permalink: /portfolio/
active: portfolio
---

<div>
  <h2>Portfolio</h2>
</div>

Navigation html part

<ul class="main-menu">
  {% for item in site.data.navigation %}
    <li class="main-menu-item">
      {% if {{page.active}} == {{item.active}} %}
        <a class="main-menu-link active" href="{{ item.url }}">{{ item.name }}</a>
      {% else %}
        <a class="main-menu-link" href="{{ item.url }}">{{ item.name }}</a>
      {% endif %}
    </li>
  {% endfor %}
</ul>

jekyllにMinimaテーマを使用している場合は、header.htmlのclass属性にターナリを追加するだけで済みます。

 <a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">

完全な抜粋：

        <div class="trigger">
        {%- for path in page_paths -%}
          {%- assign my_page = site.pages | where: "path", path | first -%}
          {%- if my_page.title -%}
          <a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
          {%- endif -%}
        {%- endfor -%}
      </div>

これを_config.ymlに追加します

header_pages:
  - classes.markdown
  - activities.markdown
  - teachers.markdown

そしてもちろんあなたのCSS：

   a.active {
                color: #e6402a;
            }

これは同じことをするjQueryメソッドです

  var pathname = window.location.pathname;

  $(".menu.right a").each(function(index) {
    if (pathname === $(this).attr('href') ) {
      $(this).addClass("active");
    }
  });