Jekyll 检测以 yaml 前端为页面的 sass 文件

Posted

技术标签:

【中文标题】Jekyll 检测以 yaml 前端为页面的 sass 文件【英文标题】:Jekyll detect sass file with yaml front matter as page 【发布时间】:2017-01-08 11:11:29 【问题描述】:

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

我要呈现三个菜单项:

首页 作品 博客

但结果是五个!

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

【问题讨论】:

【参考方案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 结尾的那些。

【讨论】:

感谢您的回答。这也将是一个很好的解决方案。以前从未使用过此变量。 嘿@RossPhillips。它解决了问题!但是我还是很好奇为什么 sass 文件会呈现为页面?但无论如何,我的 html 现在已正确呈现。谢谢。 :) 任何不是帖子或收藏项的前端文件似乎都在那里,我以前遇到过与 XML 文件相同的问题。我敢肯定它有一些很好的用例。 所以这不仅仅是我有同样的问题。谢谢你的解释?【参考方案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 %

【讨论】:

它帮助我简化了代码,谢谢! :) 但@rossp 有助于解决问题。这是关于文件扩展名的。我应该使用site.html_pages 而不仅仅是site.pages 来避免我的两个sass 文件在菜单链接上呈现。

以上是关于Jekyll 检测以 yaml 前端为页面的 sass 文件的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Jekyll 通过自定义 YAML 前端变量对帖子进行排序?

Jekyll/Liquid - 如何将大块文本添加到 YAML 前端?

在 jekyll 博客中支持标签的简单方法

Jekyll定制收藏钩

在 Java 中解析 YAML 前端

带有 Jekyll 和 Liquid 的排序导航菜单