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

Question

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

我有一个菜单栏(as <ul>),并希望<li>为当前页面对应的CSS高亮分配不同的类.

所以像伪代码:

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

或者甚至可能<ul>在Jekyll中产生整体.

如何通过犯罪之外的最小变化来完成这项工作<ul>？

Answer 1

是的,你可以这样做.
为了实现这一点,我们将利用当前页面始终由液体变量表示的事实: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

最后,您可以在网站内看到它的实际效果.只需查看右侧导航,您将看到当前页面以绿色突出显示:示例突出显示导航链接

Answer 2

我觉得最简单的导航要求,列出的解决方案过于复杂.这是一个不涉及前端问题,javascript,循环等的解决方案.

由于我们可以访问页面URL,因此我们可以对URL进行规范化和拆分并对段进行测试,如下所示:

{% assign current = page.url | downcase | split: '/' %}

<nav>
  <ul>
    <li><a href='/about' {% if current[1] == 'about' %}class='current'{% endif %}>about</a></li>
    <li><a href='/blog' {% if current[1] == 'blog' %}class='current'{% endif %}>blog</a></li>
    <li><a href='/contact' {% if current[1] == 'contact' %}class='current'{% endif %}>contact</a></li>
  </ul>
</nav>

当然,这仅在静态段提供描绘导航的方法时才有用.更复杂的事情,你必须使用@RobertKenny演示的前端问题.

Answer 3

类似于@ ben-foster的解决方案,但没有使用任何jQuery

我需要一些简单的东西,这就是我所做的.

在我的前面,我添加了一个名为的变量 active

例如

---
layout: generic
title:  About
active: about
---

我有一个导航包括以下部分

    <ul class="nav navbar-nav">
        {% if page.active == "home" %}
            <li class="active"><a href="#">Home</a></li>
        {% else %}
            <li><a href="/">Home</a></li>
        {% endif %}
        {% if page.active == "blog" %}
            <li class="active"><a href="#">Blog</a></li>
        {% else %}
            <li><a href="../blog/">Blog</a></li>
        {% endif %}
        {% if page.active == "about" %}
            <li class="active"><a href="#">About</a></li>
        {% else %}
            <li><a href="../about">About</a></li>
        {% endif %}
    </ul>

这对我有用,因为导航中的链接数量非常窄.

Answer 4

Here's my solution which I think is the best way to highlight the current page:

Define a navigation list on your _config.yml like this:

navigation:
  - title: blog
    url: /blog/
  - title: about
    url: /about/
  - title: projects
    url: /projects/

Then in your _includes/header.html file you must loop through the list to check if the current page (page.url) resembles any item of the navigation list, if so then you just set the active class and add it to the <a> tag:

<nav>
  {% for item in site.navigation %}
      {% assign class = nil %}
      {% if page.url contains item.url %}
          {% assign class = 'active' %}
      {% endif %}
      <a href="{{ item.url }}" class="{{ class }}">
          {{ item.title }}
      </a>
  {% endfor %}
</nav>

并且因为您使用的是contains运算符而不是equals =运算符,所以您不必编写额外的代码来使其与"/ blog/post-name /"或"projects/project-name /"等URL一起使用'.所以它运作得很好.

PS:不要忘记在页面上设置永久链接变量.

Answer 5

我使用了一些JavaScript来实现这一目标.我在菜单中有以下结构:

<ul id="navlist">
  <li><a id="index" href="index.html">Index</a></li>
  <li><a href="about.html">About</a></li>
  <li><a href="projects.html">Projects</a></li>
  <li><a href="videos.html">Videos</a></li>
</ul>

此JavaScript代码段突出显示当前相应的页面:

$(document).ready(function() {
    var pathname = window.location.pathname;

    $("#navlist a").each(function(index) {
        if (pathname.toUpperCase().indexOf($(this).text().toUpperCase()) != -1)
            $(this).addClass("current");
    });

    if ($("a.current").length == 0)
        $("a#index").addClass("current");
});