Jekyll Liquid 子导航没有正确选择答案

【问题标题】：Jekyll Liquid sub-navigation not properly selectingJekyll Liquid 子导航没有正确选择
【发布时间】：2016-09-13 17:54:11
【问题描述】：

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

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

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

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

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

我做错了什么？

【问题讨论】：

不确定这对输出是否重要，但您对值的引用不一致。另外，当您删除 {% assign current = null %} 语句时会发生什么？
@JoelGlovier 当我删除 {% assign current = null %} 时没有任何反应。

标签： gh-pages jekyll liquid jekyll liquid github-pages

【解决方案1】：

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

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

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

我对示例数据文件进行了一项修改，将父 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>

这与我最初发布的 sn-p 之间的最大区别是我现在放弃了 {{ open }} 的东西。一次一个问题。另一件事是我正在检查nav.url 是否等于page.permalink。在我检查 page.url 之前，这对我来说总是失败。

这可能不是最漂亮的，但我终于得到了一个jekyll liquid 菜单来（半）动态地生成并正确选择活动链接。

【讨论】：