nav.yml

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文件夹中写下导航文本和网址。

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

找到

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

1 个答案:

nav.yml