Jekyll - 自动突出显示菜单栏中的当前选项卡

Question

我使用 github 托管静态站点并使用 Jekyll 生成它。

我有一个菜单栏(如 <ul> )并且想要 <li>对应于当前页面被分配不同的 CSS 高亮类。

像伪代码这样的东西:

<li class={(hrefpage==currentpage)?"highlight":"nothighlight"} ...>

或者甚至可能生成整个 <ul>在杰基尔。

如何在违规的 <ul> 之外进行最小的更改来完成此操作？ ？

Answer 1

是的，你可以做到这一点。
为了实现这一点，我们将利用以下事实:当前页面始终由模板中的 Liquid 变量:page 表示，并且每个帖子/页面在其 中都有一个唯一的标识符page.url 属性。

这意味着我们只需使用循环来构建导航页面，这样我们就可以针对循环的每个成员检查 page.url 。如果找到匹配项，它就会突出显示该元素。我们开始吧:

  {% for node in site.pages %}
    {% if page.url == node.url %}
      <li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
    {% else %}
      <li><a href="{{node.url}}">{{node.title}}</a></li>
    {% endif %}
  {% endfor %}

这按预期工作。但是，您可能不希望所有页面都在导航栏中。为了模拟页面“分组”，你可以这样做:

## Put the following code in a file in the _includes folder at: ./_includes/pages_list

{% for node in pages_list %}
  {% if group == null or group == node.group %}
    {% if page.url == node.url %}
      <li class="active"><a href="{{node.url}}" class="active">{{node.title}}</a></li>
    {% else %}
      <li><a href="{{node.url}}">{{node.title}}</a></li>
    {% endif %}
  {% endif %}
{% endfor %}
{% assign pages_list = nil %}
{% assign group = nil %}

现在页面可以“分组”。要为页面指定一个组，您需要在页面 YAML Front Matter 中指定它:

---
title: blah
categories: blah
group: "navigation"
---    

终于可以使用新代码了!无论您需要将导航放在模板中的何处，只需“调用”您的包含文件并向其传递一些页面和您想要显示的组即可:

<ul>
  {% assign pages_list = site.pages %}
  {% assign group = 'navigation' %}
  {% include pages_list %}
</ul>

示例

此功能是 Jekyll-Bootstrap 的一部分框架。您可以查看此处概述的代码的确切文档:http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

最后，您可以在网站本身中看到它的运行情况。只需查看右侧导航，您就会看到当前页面以绿色突出显示:Example highlighted nav link