[英]Jekyll detect sass file with yaml front matter as page
I made a liquid template for navigation menu and tried to add active css rule to current active menu item. 我为导航菜单制作了一个液体模板,并尝试将活动的css规则添加到当前活动菜单项。
Here are my liquid tag to render the menu item: 这是我的液体标签,用于渲染菜单项:
<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
is a yaml front matter variable to sort menu items. index
是用于对菜单项进行排序的yaml front matter变量。
menu_title
is a yaml front matter variable to add custom menu title shown on the menu bar. menu_title
是一个yaml前端变量,用于添加菜单栏上显示的自定义菜单标题。
I add those two front matter variables above directly to my .html
file in root which are going to be rendered as pages. 我将上面的两个前面的事物变量直接添加到root中我的
.html
文件中,这些文件将被呈现为页面。
But when I checked this on browser, I got another blank menu items that link me to my main.css and framework.css file. 但是当我在浏览器上检查这个时,我得到另一个空白菜单项,将我链接到我的main.css和framework.css文件。
Here is the rendered html: 这是渲染的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>
This happened right after I include my main.sass and framework.sass file to Jekyll assets which located in css
folder while the partial sass file in _sass
folder. 这发生在我将main.sass和framework.sass文件包含在位于
css
文件夹中的Jekyll资产而_sass
文件夹中的部分sass文件之后。 I assume the front matter makes those two sass file being rendered as pages and this is because of yaml front matter I added to my two sass file. 我假设前面的事情使得这两个sass文件被呈现为页面,这是因为我添加到我的两个sass文件中的yaml前端问题。 I tried to delete the double
---
line on top of them then I refresh the localhost and the blank menu items gone. 我试图删除它们顶部的双
---
线然后我刷新localhost和空白菜单项。
I have three menu items to be rendered: 我有三个要呈现的菜单项:
but the result is five! 但结果就是五个!
So is it true that this because the yaml front matter? 所以这是真的,因为yaml前面的事情? How can I fix this while using Jekyll sass assets pipeline?
如何在使用Jekyll sass资产管道时修复此问题?
In this case you'd be better to use site.html_pages
instead: 在这种情况下,您最好使用
site.html_pages
:
{% assign menu_pages = site.html_pages | sort: 'index' %}
From https://jekyllrb.com/docs/variables/#site-variables , site.html_pages
is: 从https://jekyllrb.com/docs/variables/#site-variables ,
site.html_pages
是:
A subset of
site.pages
listing those which end in.html
.site.pages
一个子集,列出以.html
结尾的那些。
Your if clause is filtering on menu_title but the else clause is not filtering. 你的if子句在menu_title上过滤但是else子句没有过滤。 You can change your condition to :
您可以将您的条件更改为:
{% 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 %}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.