我为导航菜单制作了一个液体模板,并尝试将事件的 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
文件中,这些文件将呈现为页面。
但是当我在浏览器上检查它时,我得到另一个空白菜单项,将我链接到我的 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 Assets 中,而部分 sass 文件包含在 _sass
文件夹中之后。我假设 front matter 使这两个 sass 文件呈现为页面,这是因为我添加到我的两个 sass 文件中的 yaml front matter。我尝试删除它们顶部的双 ---
行,然后刷新本地主机,空白菜单项消失了。
我要呈现三个菜单项:
- 主页
- 作品
- 博客
但结果是五!
所以这是真的,因为 yaml 前端很重要吗?如何在使用 Jekyll sass Assets 管道时解决此问题?
最佳答案
在这种情况下,您最好改用 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
.
关于html - Jekyll 检测带有 yaml 前端内容的 sass 文件作为页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39256761/