Jekyll用yaml front matter檢測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 front matter變量。
menu_title是一個yaml前端變量，用於添加菜單欄上顯示的自定義菜單標題。

我將上面的兩個前面的事物變量直接添加到root中我的.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文件被呈現為頁面，這是因為我添加到我的兩個sass文件中的yaml前端問題。 我試圖刪除它們頂部的雙---線然后我刷新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上過濾但是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 %}