Jekyll Liquid 子导航未正确选择

Question

我正在 gh-pages 上构建一个静态网站使用jekyll liquid 。我正在从数据文件正确生成一个简单的两级导航。我的问题是我一直在尝试做两件事:

1. 将“选定”类应用于当前页面链接项。
2. 当存在子链接菜单时，将“open”类应用于父列表项。

这是我在 _data/nav.yml 文件中使用的格式

- title: Top Level Nav Item
  url: level-1/
  sublinks:
    - title: Child Nav Item 1
    url: child-1/
    - title: Child Nav Item 2
    url: child-2/

以下是我构建导航的方法:

{% assign current_page = page.url | remove: 'index.html' %}
<ul class="-nav">
{% for nav in include.nav %}
    {% assign current = null %}
    {% if nav.url == current_page %}
        {% assign current = ' _selected' %}
    {% endif %}
    {% if nav.url contains current_page %}
        {% assign open = ' _open' %}
    {% endif %}
    <li class="-item{{ current }}{{ open }}">
        <a href="{{ site.url }}{{ nav.url }}">{{ nav.title }}</a>
        {% if nav.sublinks and current_page contains nav.url %}
            {% include navigation.html nav=nav.sublinks%}
        {% endif %}
    </li>
{% endfor %}
</ul>

这再次正确构建了我的导航，但它不应用选定的类或开放类。

这就是我希望它最终的样子:

我做错了什么？

Answer 1

终于成功了。我通过在页面的前面添加一个名为 permalink 的项目来解决这个问题我在其中指定了所需的页面永久链接。

---
layout: default
title: Example
permalink: url/example/
---

我使用此永久链接来检查当前的 page.url添加所需的 _selected <li> 上的类(class)元素。

我对示例数据文件进行了一项修改，将父级 url_part 添加到子级 url 中。我不知道为什么，但我无法正确打印整个 URL。

- title: Top Level Nav Item
  url: level-1/
  sublinks:
    - title: Child Nav Item 1
    url: level-1/child-1/
    - title: Child Nav Item 2
    url: level-1/child-2/

最后是我的navigation.html包括，以下是我如何创建主菜单，渲染子菜单(如果存在并且应该显示)，以及正确选择事件链接:

{% assign current_page = page.url | remove: 'index.html' %}
<ul class="-nav">
{% for nav in include.nav %}
    {% assign current = null %}
    {% if nav.url == page.permalink %}
        {% assign current = ' _selected' %}
    {% endif %}
    <li class="-item{{ current }}">
        <a href="/{{ nav.url }}">{{ nav.title }}</a>
        {% if nav.sublinks and current_page contains nav.url %}
            {% include navigation.html nav=nav.sublinks%}
        {% endif %}
    </li>
{% endfor %}
</ul>

这和我最初发布的代码片段之间的最大区别是我删除了 {{ open }}暂时的东西。一次解决一个问题。另一件事是我正在检查是否 nav.url等于 page.permalink 。在我检查 page.url 之前这对我来说总是失败。

这可能不是最漂亮的，但我终于得到了 jekyll liquid菜单以(半)动态生成并正确选择事件链接。