Jekyll将检测以yaml前端为页面的sass文件。

Question

我为导航菜单创建了一个液态模板，并试图将活动css规则添加到当前的活动菜单项中。

这里是我的液体标签来呈现菜单项：

<ul class="list-inline float-right">
    {% assign menu_pages = site.pages | sort: 'index' %}
    {% for p in menu_pages limit 3 %}
        {% if page.menu_title and page.url == p.url %}
        <li class="active"><a href="{{ p.url | prepend: site.baseurl }}">{{ p.menu_title }}</a></li>
        {% else %}
        <li><a href="{{ p.url | prepend: site.baseurl }}">{{ p.menu_title }}</a></li>
        {% endif %}
    {% endfor %}
</ul>

index是一个用于排序菜单项的yaml前端变量。

menu_title是一个yaml前端变量，用于添加显示在菜单栏上的自定义菜单标题。

我将上面这两个前面的变量直接添加到根目录中的.html文件中，这些变量将被呈现为页面。

但是，当我在浏览器上检查它时，我得到了另一个空白菜单项，它将我链接到我的main.css和framework.css文件。

下面是呈现的html：

<ul class="list-inline float-right">
    <li><a href="/css/main.css"></a></li>
    <li><a href="/css/framework.css"></a></li>
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/works/">Works</a></li>
    <li><a href="/blog/">Blog</a></li>
</ul>

这是在我将main.sass和framework.sass文件包含到位于css文件夹中的Jekyll资产，而在_sass文件夹中包含了部分sass文件之后发生的。我假设前面的内容会将这两个sass文件呈现为页面，这是因为我将yaml前端的内容添加到了我的两个sass文件中。我尝试删除它们上面的双---行，然后刷新localhost和空菜单项。

我有三个菜单项要呈现：

• 首页
• 作品
• 博客

但结果是五！

所以这是真的吗因为yaml的前沿问题？如何在使用Jekyll sass资产管道时修复这个问题？

Answer 1

在这种情况下，最好使用site.html_pages：

{% assign menu_pages = site.html_pages | sort: 'index' %}

来自https://jekyllrb.com/docs/variables/#site-variables的site.html_pages是：

site.pages的一个子集列出了以.html结尾的部分。

Answer 2

您的if子句是在menu_title上过滤的，而其他子句不是过滤的。您可以将状态更改为：

{% if page.menu_title %}
  <li{% if page.url == p.url %} class="active">{% endif %}
    <a href="{{ p.url | prepend: site.baseurl }}">{{ p.menu_title }}</a>
  </li>
{% endif %}