4

我为导航菜单制作了一个液体模板,并尝试将活动 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 文件包含到位于文件夹中的 Jekyll 资产中,css而部分 sass 文件位于_sass文件夹中之后。我假设前面的内容使这两个 sass 文件被呈现为页面,这是因为我添加到我的两个 sass 文件中的 yaml 前面的内容。我试图删除---它们顶部的双线,然后刷新本地主机并且空白菜单项消​​失了。

我要呈现三个菜单项:

  • 作品
  • 博客

但结果是五!

那么这真的是因为 yaml 前端很重要吗?在使用 Jekyll sass 资产管道时如何解决这个问题?

4

2 回答 2

2

在这种情况下,您最好site.html_pages改用:

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

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

site.pages列出以 . 结尾的子集.html

于 2016-09-02T02:43:18.007 回答
1

您的 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 %}
于 2016-09-02T07:46:59.920 回答