Jekyll Liquid 子导航未正确选择

Question

我正在 gh-pages using jekyll liquid 上构建一个静态网站。我从数据文件中正确地生成了一个简单的两级导航。我的问题是我无法尝试做两件事：

将 "selected" class 应用于当前页面 link 项。
当存在子link 菜单时，将"open" class 应用于父列表项。

这是我在 _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>

这再次正确地构建了我的导航，但它既不应用选定的也不应用打开的 class。

这是我希望它最后看起来的样子：

我做错了什么？

Answer 1

终于成功了。我通过在名为 permalink 的页面前面添加一个项目来解决它，我在其中指定了所需的页面 permalink。

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

我使用这个 permalink 来检查当前的 page.url 以在 <li> 元素上添加所需的 _selected 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 include，这是我创建主菜单的方式，呈现子菜单（如果它们存在并且应该显示），并正确 select 激活活动 link:

{% 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 菜单来生成（半）动态和正确 select 活动 link。

Jekyll Liquid 子导航未正确选择

Jekyll Liquid sub-navigation not properly selecting

liquid

jekyll

github-pages