Jekyll 检测 sass 文件以 yaml front matter 作为页面

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 front matter 变量，用于添加菜单栏上显示的自定义菜单标题。

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

但是当我在浏览器上检查这个时，我得到了另一个空白菜单项 link 我到我的 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 文件夹。我假设 front matter 使这两个 sass 文件呈现为页面，这是因为我添加到我的两个 sass 文件中的 yaml front matter。我试图删除它们上面的双 --- 行，然后刷新本地主机，空白菜单项消失了。

我要呈现三个菜单项：

首页
有效
博客

但结果是五！

所以这是真的因为 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 是：

A subset of site.pages listing those which end in .html.

Answer 2

您的 if 子句在 menu_title 上过滤，但 else 子句没有过滤。您可以将条件更改为：

{% 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 %}

Jekyll 检测 sass 文件以 yaml front matter 作为页面

Jekyll detect sass file with yaml front matter as page

html

css

sass

jekyll

yaml-front-matter