Jekyll-自动突出显示菜单栏中的当前选项卡 [英] Jekyll - Automatically highlight current tab in menu bar

问题描述

我正在使用github托管一个静态站点，并使用Jekyll生成它.

我有一个菜单栏(如<ul>)，并希望将与当前页面相对应的<li>分配给CSS高亮显示一个不同的类.

所以类似伪代码:

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

或者甚至可以在Jekyll中生成整个<ul>.

如何在违规的<ul>之外进行最小的更改?

解决方案

是的，您可以这样做.
为此，我们将利用以下事实:当前页面始终由模板中的液体变量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前端事项"中指定该页面:

---
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

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

I am using github to host a static site and Jekyll to generate it.

I have a menu bar (as <ul>) and would like the <li> corresponding to the current page to be assigned a different class for CSS highlighting.

So something like pseudo code:

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

Or perhaps even generate the whole <ul> in Jekyll.

How can this be done with minimal changes outside of the offending <ul>?

解决方案

Yes you can do this.
To accomplish this we will take advantage of the fact that the current page is always represented by the liquid variable: page in the template, and also that each post/page has a unique identifier in its page.url attribute.

This means that we just have to use a loop to build our navigation page, and by doing so we can check page.url against every member of the loop. If it finds a match, it knows to highlight that element. Here we go:

  {% 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 %}

This works as expected. However you probably don't want all your page's in your nav bar. In order to emulate page "grouping" you can something like this:

## 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 %}

Now pages can be "grouped". To give a page a group you need to specify it in the pages YAML Front Matter:

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

Finally you can use your new code! Wherever you need your navigation to go in your template, simply "call" your include file and pass it some pages and the group you want to display:

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

Examples

This functionality is part of the Jekyll-Bootstrap framework. You can see exact documentation for the code outlined here: http://jekyllbootstrap.com/api/bootstrap-api.html#jbpages_list

Finally you can see it in action within the website itself. Just look at the righthand navigation and you will see the current page is highlighted in green: Example highlighted nav link

这篇关于Jekyll-自动突出显示菜单栏中的当前选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！