在 Jekyll 中设置活动链接不起作用

Question

我试图简单地在 Jekyll 中设置我的活动链接的样式，但没有成功地让它们工作。

这是我试图让他们工作的网站：http://concisecss.github.io/concise.css，您可以在这里看到源代码：https://github.com/ ConciseCSS/concise.css/tree/gh-pages。

我将此 YAML 代码放入我的

_config.yml

中来定义我的顶级导航：

# Main Navigation
nav:
- text: Welcome
  url: /concise.css/
- text: Why Concise
  url: /concise.css/why-concise/
- text: Get Started
  url: /concise.css/get-started/
- text: Documentation
  url: /concise.css/documentation/layout/container/
- text: Add-Ons
  url: /concise.css/add-ons/

然后在我的

header.html

包含中，这是我的导航所在，我有：

{% for link in site.nav %}
  <li>
    <a {% if link.url == page.url %}class="active"{% endif %} href="{{ link.url }}">{{ link.text }}</a>
  </li>
{% endfor %}

但是，每当我位于这些导航链接之一上时，都不会添加活动类（当您位于该链接上时，该链接应该是粉红色的。

其他一切都工作正常，所以我假设这可能只是我遇到的一个小问题。

编辑： 这是我的其中一页的首页内容：

---
layout: why-concise
title: Why Concise
permalink: /why-concise/
---

Answer 1

我刚刚在我的博客项目中做了同样的事情，该项目尚未向您展示，但它的工作原理如下：

1. 创建数据文件

nav.yml

文件并在文件夹 _data 中写入导航文本和 URL。

nav.yml

- text: Welcome
  url: /concise.css/

- text: Why Concise
  url: /concise.css/why-concise/

- text: Get Started
  url: /concise.css/get-started/

- text: Documentation
  url: /concise.css/documentation/layout/container/

- text: Add-Ons
  url: /concise.css/add-ons/

2. 在您的 html 页面中，您将通过 yml 文件的数据菜单列表创建一个循环。

{% for nav in site.data.nav %}
<li{% if nav.url == page.url %} class="active"{% endif %}><a href="{{ nav.url }}">{{ nav.text }}</a></li>
{% endfor %}

如果您在 nav.yml 中设置了

url:/concise.css/why-concise/

，请记住确保您的永久链接与 nav.yml 中写入的相同，这样您的永久链接应该与前面的内容相同。

---
layout: why-concise
title: Why Concise
permalink: /concise.css/why-concise/
---

更新： @Keenan 这是我之前告诉过你的一个例子http://adrianorosa.com。 来源可以在https://github.com/adrianorsouza/adrianorosa.com

找到

Answer 2

2023 年 9 月

我相信这个问题已经解决了。
现在已经是 2023 年了，我们仍然遇到这个问题。因此，如果有人正在寻找解决方案，就在这里。

我正在使用

ruby 3.3.2

和

jekyll 4.3.2

DRY：不要重复自己

.md

文件在编译时会转换为

.html

。
让我们从简单的导航开始。 我在 _config.yml 文件中创建了三个菜单。

nav:
- title: Home
  url: /
- title: About
  url: /about/
- title: Contact
  url: /contact/

前端

编译后是这个样子。 尽管所有页面都工作正常，但如果您注意到的话，没有一个文件具有

.html

扩展名。

<ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/contact/">Contact</a></li>
</ul>

原网址

如果输出

{{ page.url }}

，您将看到每个链接都附有

.html

。

/
/contact.html
/about.html

问题

您在这里所做的是将

/pagename/

与

/pagename.html

进行比较。这将如何运作？ 它仅适用于主页，因为 page.url 和 link.url 的主页都是斜杠

/

。

那么，如何解决这个问题？

解决方案1

您必须在所有 URL 中包含

.html

。 这将解决问题。

# Main Navigation
nav:
- text: Home
  url: /
- text: About
  url: /about.html
- text: Contact
  url: /contact.html

解决方案2

如果您有一个简单的网站，您可以使用

site.pages

直接输出所有页面。由于所有页面都有“标题”，因此您可以使用该属性。但在此之前，我们先通过 URL 来输出它们。

全部输出

url

<ol>
    {% for key in site.pages %}
        <li>{{key.url}}</li>
    {% endfor %}
</ol>

请注意，除了第四个“主页”之外，所有 URL 都附加了

.html

。

<ol>
    <li>/404.html</li>
    <li>/about.html</li>
    <li>/contact.html</li>
    <li>/</li>
    <li>/assets/main.css</li>
    <li>/feed.xml</li>
</ol>

输出者

title

让我们输出页面的所有titles。我假设所有 titles 都设置在 Front Matter 中。

<ol>
    {% for key in site.pages %}
        <li>{{key.title}}</li>
    {% endfor %}
</ol>

请注意，某些文件没有标题。网站需要有标题的。

<ol>
    <li></li>
    <li>About</li>
    <li>Contact</li>
    <li>Home</li>
    <li></li>
    <li></li>
</ol>

筛选条件

title

现在让我们使用

if

条件来过滤具有 title 的文件。

<ol>
    {% for key in site.pages %}
    {% if key.title %}
        <li>{{key.title}}</li>
    {% endif %}
    {% endfor %}
</ol>

输出以下内容

<ol>
    <li>About</li>
    <li>Blog</li>
    <li>Contact</li>
    <li>Home</li>
</ol>

结论

这是最终的菜单。 现在您可以使用

active

类条件；它应该适用于所有菜单。

<ol>
    <li><a href="/about.html">About</a></li>
    <li><a href="/blog.html">Blog</a></li>
    <li><a href="/contact.html">Contact</a></li>
    <li><a href="/">Home</a></li>
</ol>