我正在使用github来托管一个静态站点，并使用Jekyll来生成它。
我有一个菜单栏（<ul>），并且希望为当前页面对应的<li>指定一个不同的CSS突出显示类。
就像伪代码一样：
<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>
或者甚至可能在Jekyll中生成整个<ul>。
如何在违规<ul>之外进行最少的更改？
答案 0 :(得分：110)
是的，你可以这样做。
为实现此目的，我们将利用以下事实：当前页面始终由模板中的液体变量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
最后，您可以在网站内看到它的实际效果。只需查看右侧导航，您将看到当前页面以绿色突出显示：Example highlighted nav link
答案 1 :(得分：43)
我觉得最简单的导航要求，列出的解决方案过于复杂。这是一个不涉及前端，javascript，循环等的解决方案。
由于我们可以访问页面网址，因此我们可以对网址进行规范化和拆分，并对网段进行测试，如下所示：
{% 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演示的前端问题。
答案 2 :(得分：17)
与@ ben-foster的解决方案类似但不使用任何jQuery
我需要一些简单的东西，这就是我所做的。
在我的前面，我添加了一个名为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>
这对我有用，因为导航中的链接数量很窄。
答案 3 :(得分：15)
这是我的解决方案，我认为这是突出显示当前页面的最佳方式：
在 _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 运算符而不是等于 = 运算符，所以您不必编写额外的代码来使其工作使用＆＃39; / blog / post-name /＆＃39; 或＆＃39; projects / project-name /＆＃39; 等网址。所以效果很好。
P.S：别忘了在你的网页上设置永久链接变量。
答案 4 :(得分：4)
我的方法是在页面的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");
}
答案 5 :(得分：1)
我一直在使用page.path并取消文件名。
<a href="/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>
答案 6 :(得分：0)
已经有很多好的答案。
试试这个。
我略微改变了上述答案。
_data/navigation.yaml
- name: Home
url: /
active: home
- name: Portfolio
url: /portfolio/
active: portfolio
- name: Blog
url: /blog/
active: blog
在页面中 - ＆gt; 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>
答案 7 :(得分：0)
您网站的导航应该是无序列表。要使列表项在活动时变亮，以下液体脚本会向它们添加“活动”类。这个类应该用CSS设置样式。要检测哪个链接处于活动状态，脚本将使用“包含”，如下面的代码所示。
<ul>
<li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
<a href="/getting-started/">Getting started</a>
</li>
...
...
...
</ul>
此代码与Jekyll中的所有永久链接样式兼容。 'contains'语句成功突出显示以下URL的第一个菜单项：
答案 8 :(得分：0)
这里有很多令人困惑的答案。
我只是使用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>
完成。快速。
答案 9 :(得分：0)
如果您对jekyll使用Minima主题，则只需在header.html中的class属性上添加三元组：
<a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">
完整摘录：
<div class="trigger">
{%- for path in page_paths -%}
{%- assign my_page = site.pages | where: "path", path | first -%}
{%- if my_page.title -%}
<a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
{%- endif -%}
{%- endfor -%}
</div>
将此添加到您的_config.yml
header_pages:
- classes.markdown
- activities.markdown
- teachers.markdown
当然还有您的CSS：
a.active {
color: #e6402a;
}
答案 10 :(得分：-2)
这是一个jQuery方法来做同样的事情
var pathname = window.location.pathname;
$(".menu.right a").each(function(index) {
if (pathname === $(this).attr('href') ) {
$(this).addClass("active");
}
});