51

私は静的サイトに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クラスは着色を処理します。私が欲しいのは、このクラスが、liquid/YAMLを使用して設定された変数に応じてjekyllによって適用されることです。

これを行う簡単な方法はありますか?

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

4

10 に答える 10

54

これは、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を使用しようとしたことがないため、機能するかどうかはわかりません私の場合、多言語サイトを持っているので、すべてを設定内に置く方が簡単です(翻訳が欠落していると見つけやすくなります)

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

于 2011-06-16T08:26:39.350 に答える
53

もう一方の作業のさらなる拡張として、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と一致するようにそれを取り除きます)を取得するステートメントにあります。

于 2013-06-20T13:47:26.847 に答える
18

これは質問が最初に表示されてからの新機能かもしれませんが、これはすべて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>
于 2013-01-22T04:23:40.990 に答える
12

私は何か簡単なものが必要でした、これは私がしたことです。

私の前書きでは、私はという変数を追加しました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>

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

于 2013-09-11T17:56:08.693 に答える
4

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

その答えをすべて読んだ後、私は新しくて保守が簡単なソリューションを思いつきました。

  1. ファイル{% include nav.html %}に追加_layouts/layout.html
  2. フォルダにnav.htmlファイルを追加します_includes
  3. 次のコンテンツをファイルに追加しnav.htmlます。リンクが現在のページにあるかどうかを判断し、クラスを追加したり、リンクからactive削除index.htmlしたりします。また、 GitHubPagesブランチ/repo-nameに必要なのようなサブフォルダーでも機能します。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. 次に、次のようにnavlink配列を_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 
    

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

「ホーム」ページ()へのリンクがs配列index.html内の最初の配列部分であるとすると、次のスニペットを使用して、メイン/ホームページのさまざまなページへのナビゲーションとホームに戻るリンクを表示できます。他のすべてのページのページ:_config.htmlnavigation

<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>
于 2013-07-13T16:07:15.640 に答える
3

これは私にとってはうまくいきます(英語以外のコードについては申し訳ありません):

<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>
于 2017-03-07T12:50:52.437 に答える
2

ナビゲーションの強調表示ロジックは、サーバー側で最後に行うことです。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() { ... })に、スクリプトをDOMreadyイベントにバインドする部分を省略してスクリプトをの下部にプッシュすることをお勧めします<body>

于 2013-05-16T14:47:57.827 に答える
2

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

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

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

于 2015-12-02T13:09:14.833 に答える
2

私は単純なCSSアプローチを採用しました。まず、前書きに識別子を追加します...

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

これをクラスとして追加し<body> ナビゲーションを...

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

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

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

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

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

于 2016-01-05T19:44:22.583 に答える
2

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>
于 2017-03-30T13:41:40.863 に答える