我一直在使用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类处理着色。我想要的是这个类是由jekyll应用的，取决于使用液体/ YAML设置的一些变量。
有什么简单的方法可以解决这个问题吗？
由于条形图对所有页面都是通用的，因此它现在处于默认布局中。我可以通过使用Javascript来检测网址，并进行突出显示但是想知道在Jekyll中是否有任何方法可以做到这一点。
答案 0 :(得分：53)
我在Jekyll设置的两页中这样做。
我要做的第一件事是在_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，但现在很少发生。
我认为导航yaml可以进入一个名为“navigation”的_include或类似的东西，但我没有尝试过使用yaml，所以我不知道它是否会起作用。在我的情况下，由于我有一个多语言网站，所以更容易将所有内容配置（缺少翻译更容易发现）
我希望这会有所帮助。
答案 1 :(得分：50)
作为对方工作的进一步扩展，这是一种让它在没有湿透index.html显示所有漂亮网址的情况下工作的方法：
---
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语句中，它获取页面网址（自然包含index.html，然后将其剥离以匹配page.navigation漂亮网址。
答案 2 :(得分：18)
自从问题首次出现以来，这可能是一个新功能，但我发现这一切都可以在一个文件中完成：
所以在_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>
答案 3 :(得分：12)
我需要一些简单的东西，这就是我所做的。
在我的前面，我添加了一个名为active
e.g。
---
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>
这对我有用，因为导航中的链接数量很窄。
答案 4 :(得分：4)
在阅读完所有答案后，我想出了一个新的，更易于维护的解决方案：
{% include nav.html %}添加到您的_layouts/layout.html文件nav.html文件添加到_includes文件夹将以下内容添加到nav.html文件中。它将确定您的链接是否在当前页面上，并添加了active类，并从您的链接中删除index.html。它也适用于/repo-name这样的子文件夹， GitHub gh-pages 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>
然后将导航链接数组添加到_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.html s 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>
答案 5 :(得分：3)
导航突出显示逻辑是我在服务器端做的最后一件事。我宁愿坚持使用JS / jQuery的漂亮，干净和不引人注意的方法（如果这个选项适合你）。
需要突出显示的元素会进入这样的公共布局：
<nav>
<a id="section1" href="#">Section 1</a>
<a id="section2" href="#">Section 2</a>
<a id="section3" href="#">Section 3</a>
</nav>
在您的页面中（甚至在嵌套布局中）放置一个带data-ref="#section1"的元素（事实上，任何jQuery选择器都可以使用）。
现在，在<head>中包含以下JS代码段（显示为jQuery，但任何框架都可以）：
$(function() {
$("[data-ref]").each(function() {
$($(this).attr("data-ref")).addClass("current");
});
});
这种方法很不错，因为它不会对底层架构，框架，语言和模板引擎做出任何假设。
更新：作为some folks pointed out您可能想要省略将脚本绑定到DOM就绪事件的$(function() { ... })部分 - 只需将脚本按到您的底部即可<body>。
答案 6 :(得分：2)
这对我有用（对非英语代码抱歉）：
<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>
答案 7 :(得分：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>
答案 8 :(得分：1)
添加到incarnate的解决方案，使用jQuery的最简单的代码行是：
$( "a[href='{{ page.url | remove: "index.html" }}']" ).addClass("current");
完美适合我。
答案 9 :(得分：1)
我采用了一种简单的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;
}
主要的缺点是您需要对样式规则进行硬编码。