web-dev-qa-db-ja.com

ジキルは現在のページのURLを選択し、そのクラスを変更します

私は（保守が容易になるように）静的サイトにJekyllを使用しており、次の機能に行き詰まっています。

これは私のリンクバーです：

<ul id="links">
    <li class="first"><a class="active" href="/">Home</a></li>
    <li><a href="./associate.html">Associate With Us</a></li>
    <li><a href="./media.html">Media</a></li>
    <li><a href="./clients.html">Clients</a></li>
    <li class="last"><a  href="./contact.html">Contact Us</a></li>
</ul>

activeクラスはカラーリングを処理します。私が欲しいのは、このクラスは、液体/ YAMLを使用して設定された変数に応じてjekyllによって適用されることです。

これに対処する簡単な方法はありますか？

バーはすべてのページに共通なので、デフォルトのレイアウトになりました。 Javascriptを使用してURLを検出し、強調表示を行うことで回避できましたが、Jekyllでこれを行う方法があるかどうか疑問に思いました。

htmljekyll
51
Nemo

私はジキルで設定した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の「ブログ」および「プロジェクト」リンクには、「レイアウト」という追加のパラメーターがあることに注意してください）

ナビゲーションコードは次のように生成されます。

{% 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を再起動することを覚えておく必要がありますが、今ではほとんど発生しません。

私thinkナビゲーションyamlは、「navigation」などの_include内に入ることができますが、それらの中でyamlを使用したことがないため、機能するかどうかはわかりません。私の場合、私は多言語のサイトを持っているので、すべてをconfig内に含めるのが簡単です（翻訳がない場合は見つけやすい）

これがお役に立てば幸いです。

53
kikito

もう一方の作業のさらなる拡張として、ここにそれをぐずぐずせずに機能させる方法がありますindex.htmlすべての美しいURLに表示：

---
navigation:
 - text: Home
   url: /
 - text: Blah
   url: /blah/
---
{% assign url = page.url|remove:'index.html' %}
{% for link in page.navigation %}
<li {% if url == link.url %}class="active"{% endif %}>
    <a href="{{link.url}}" title="{{link.title}}">{{link.text}}</a>
</li>
{% endfor %}

ゴールドはassignステートメントにあり、ページのURLを取得します（これには自然にindex.htmlが含まれ、それを取り除いてpage.navigationのきれいなURLと一致します。

50
Oli

これは質問が最初に表示されてからの新機能の可能性がありますが、すべて1つのファイルで実行できることがわかりました。

  1. ナビゲーションをyamlヘッダーの変数として定義する
  2. 液体を使用して変数をループする

だから私の_layouts/base.html 私が持っています：

---
navigation:
- text: Home
  url: /index.html
- text: Travel
  title: Letters home from abroad
  url: /travel.html
---

<ul>
    {% for link in page.navigation %}
    <li {% if page.url == link.url %}class="current"{% endif %}>
       <a href="{{link.url}}" title="{{link.title}}">{{link.text}}</a></li>
    {% endfor %}
</ul>

これはHomeページでこれを生成します：

<ul>
    <li class="current"><a href="/index.html" title="">Home</a></li>
    <li><a href="/travel.html" title="Letters home from abroad">Travel</a></li>
</ul>

そして、これはTravelページにあります：

<ul>
    <li><a href="/index.html" title="">Home</a></li>
    <li class="current"><a href="/travel.html" title="Letters home from abroad">Travel</a></li>
</ul>
18
John Mee

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

前付けに、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>

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

12
RobertKenny

すべてのページで同じナビゲーション

その答えをすべて読んだ後、私は新しくて維持しやすいソリューションを思いつきました：

  1. {% include nav.html %}を_layouts/layout.htmlファイルに追加します
  2. nav.htmlファイルを_includesフォルダに追加します

  3. 次のコンテンツをnav.htmlファイルに追加します。リンクが現在のページにあるかどうかを判断し、activeのクラスを追加し、リンクからindex.htmlを削除します。 GitHub /repo-name Pagesブランチに必要なgh-pagesのようなサブフォルダーでも動作します。

    <nav>
    <ul class="nav">
        {% assign url = page.url|remove:'index.html' %}
        {% for link in site.navigation %}
            {% assign state = '' %}
            {% if page.url == link.url %}
                {% assign state = 'active ' %}
            {% endif %}
            <li class="{{ state }}nav-item">
                <a href="{% if page.url == link.url %}{{ site.baseurl }}{% else %}{{ site.baseurl }}{{ link.url }}{% endif %}" title="{{ link.title }}">{{ link.text }}</a>
            </li>
        {% endfor %}
    </ul>
</nav>

  4. 次に、次のようにnavリンク配列を_config.ymlファイルに追加します。 YAMLはかなりうるさいので（Jekyllも同様）、正しいインデントに注意してください。

    navigation:
      - text: Home
        title: Back to home page
        url: /index.html
      - text: Intro
        title: An introduction to the project
        url: /intro.html 
      - text: etc.
        title: ...
        url: /foo.html

自宅のみのナビゲーション-他の人にとっては「戻る」

「ホーム」ページ（index.html）へのリンクが_config.htmls navigation配列内の最初の配列部分であるとすると、次のスニペットを使用して、メイン/ホームページの異なるページと他のすべてのページのホームページへのリンク：

<nav>
    <ul class="grid">
        {% assign url = page.url | remove:'/index.html' %}
        {% assign home = site.navigation.first %}
        {% if url == empty %}
            {% for link in site.navigation %}
                {% assign state = '' %}
                {% if page.url == link.url %}
                    {% assign state = 'active ' %}
                {% endif %}
                {% if home.url != link.url %}
                    <li class="{{ state }}nav-item">
                        <a href="{% if page.url == link.url %}{{ site.baseurl }}{% else %}{{ site.baseurl }}{{ link.url }}{% endif %}" title="{{ link.title }}">{{ link.text }}</a>
                    </li>
                {% endif %}
            {% endfor %}
        {% else %}
            <li class="nav-item active">
                <a href="{{ home.url }}" title="{{ home.title }}">{{ home.text }}</a>
            </li>
        {% endif %}
    </ul>
</nav>
4
kaiser

ナビゲーションの強調表示ロジックは、サーバー側で最後に行うことです。 JS/jQueryを使用した、すてきでクリーンで邪魔にならないアプローチを採用したい（このオプションが機能する場合）。

  1. ハイライトが必要な要素は、次のような一般的なレイアウトの中にあります。

    _<nav>
  <a id="section1" href="#">Section 1</a>
  <a id="section2" href="#">Section 2</a>
  <a id="section3" href="#">Section 3</a>
</nav>
_

  2. ページ（またはネストされたレイアウトでも）に_data-ref="#section1"_を使用して要素を配置します（実際、jQueryセレクタはすべて機能します）。

  3. 次に、次のJSスニペット（jQueryとして表示されますが、すべてのフレームワークで実行可能）を_<head>_に含めます。

    _$(function() {
  $("[data-ref]").each(function() {
    $($(this).attr("data-ref")).addClass("current");
  });
});
_

このアプローチは、基盤となるアーキテクチャ、フレームワーク、言語、およびテンプレートエンジンを想定していないため、すばらしい方法です。

更新：一部の人々が指摘したように スクリプトをバインドする$(function() { ... })部分を省略したい場合がありますDOM対応イベントへ—そして、スクリプトを_<body>_の一番下までプッシュします。

3
incarnate

Jekyll 3.4.3では、これは機能します。

<ul>
    {% for my_page in site.pages %} 
        {% if my_page.title %}
            <li {% if my_page.url == page.url %} class="active" {% endif %}>
                <a href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}
                </a>
            </li>
        {% endif %} {% endfor %}
</ul>
2
Jack Morris

これは私にとってはうまくいきます（英語以外のコードでは申し訳ありません）：

<nav>
  <a href="/kursevi" {% if page.url == '/kursevi/' %} class="active"{% endif %}>Kursevi</a>
  <a href="/radovi" {% if page.url == '/radovi/' %} class="active"{% endif %}>Radovi</a>
  <a href="/blog" {% if page.url == '/blog/' %} class="active"{% endif %}>Blog</a>
  <a href="/kontakt" {% if page.url == '/kontakt/' %} class="active"{% endif %}>Kontakt</a>
</nav>
2
Damjan Pavlica

シンプルなCSSアプローチを採用しました。まず、前付けに識別子を追加します...

---
layout: page
title: Join us
permalink: /join-us/
nav-class: join <-----
---

これを<body>のクラスとして追加and your nav ...

<body class="{{ page.nav-class }}">

そして

<li class="{{ page.nav-class }}">...</a></li>

次に、CSSのすべてのページでこれらをリンクします。

.about .about a,
.join .join a,
.contact .contact a {
color: #fff;
}

主な欠点は、スタイルルールをハードコーディングする必要があることです。

1
Reg T

具現化のソリューションに加えて、jQueryを使用した最も単純なコード行は次のとおりです。

    $( "a[href='{{ page.url | remove: "index.html" }}']" ).addClass("current");

私にとっては完璧に機能します。

1
bitconquer