web-dev-qa-db-ja.com

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

Githubを使用して静的サイトをホストし、Jekyllを使用して生成しています。

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

擬似コードのようなもの：

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

または、Jekyllで_<ul>_全体を生成することもできます。

問題のある_<ul>_以外の最小限の変更でこれを行うにはどうすればよいですか？

jekyll
75
paperjam

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

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

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

111
superjadex12

最も単純なナビゲーション要件として、リストされているソリューションは非常に複雑であると感じています。以下は、前兆、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が示したようにフロントマターを使用する必要があります。

45
Jonplussed

@ 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="/">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>

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

17
RobertKenny

現在のページを強調する最良の方法だと思う私のソリューションは次のとおりです。

次のように、_ 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>

そして、等号=演算子の代わりにcontains演算子を使用しているため、追加のコードを記述する必要はありません。 '/ blog/post-name /'や 'projects/project-name /'などのURLで動作するようにします。とてもうまく機能します。

追伸：ページにpermalink変数を設定することを忘れないでください。

15
chomba

これを実現するために、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");
});
6
stian

私のアプローチは、ページの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");
}
4
Ben Foster

ここで多くの混乱する答えがあります。私は単に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>

できた早く。

1
dawn

私はpage.pathを使用しており、ファイル名を削除しています。

<a href="/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>
1
Pat Migliaccio

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

これを試して。

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

_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>
0
Surender Lohia

あなたのウェブサイトのナビゲーションは順不同のリストであるべきです。リスト項目がアクティブなときにリスト項目を明るくするために、次のリキッドスクリプトはそれらに「アクティブな」クラスを追加します。このクラスはCSSでスタイル設定する必要があります。アクティブなリンクを検出するために、スクリプトは「次を含む」を使用します。以下のコードをご覧ください。

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

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

  • 入門/
  • getting-started.html
  • getting-started/index.html
  • 開始/サブページ/
  • getting-started/subpage.html

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

0
JoostS