github を使用して静的サイトをホストし、Jekyll を使用してそれを生成しています。
メニューバー ( as <ul>) があり<li>、現在のページに対応する に CSS ハイライト用の別のクラスを割り当てたいと考えています。
疑似コードのようなもの：
<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>
または<ul>、Jekyll で全体を生成することもできます。
問題のある部分以外の最小限の変更でこれを行うにはどうすればよい<ul>ですか?
はい、できます。これを達成するために、現在のページは常にテンプレート内
の Liquid 変数で表されるという事実と、各投稿/ページの属性に一意の識別子があるという事実を利用します。pagepage.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
最後に、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 が示したようにフロント マターを使用する必要があります。
現在のページを強調表示する最良の方法だと思う私の解決策は次のとおりです。
次のように、 _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: ページにパーマリンク変数を設定することを忘れないでください。
@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>
ナビゲーション内のリンクの量が非常に狭いため、これは私にとってはうまくいきます。
これを実現するために、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>
ページの front matter で、ページ 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");
}
多くの良い答えがすでにあります。
これを試して。
上記の回答を少し変更します。
_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>
同じことを行うjQueryメソッドは次のとおりです
var pathname = window.location.pathname;
$(".menu.right a").each(function(index) {
if (pathname === $(this).attr('href') ) {
$(this).addClass("active");
}
});