84

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

我有一个菜单栏（as <ul>），并希望<li>为当前页面的对应项分配一个不同的类以进行 CSS 突出显示。

所以类似于伪代码：

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

或者甚至可以<ul>在 Jekyll 中生成整体。

如何在违规之外进行最小的更改来做到这一点<ul>？

4

12 回答 12

117

是的，你可以这样做。
为了实现这一点，我们将利用当前页面始终由流动变量表示的事实：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

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

于 2012-02-04T03:54:49.053 回答
49

我觉得对于最简单的导航要求，列出的解决方案过于复杂。这是一个不涉及前端、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 演示的那样使用前面的内容。

于 2013-10-09T13:32:06.117 回答
17

类似于@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>

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

于 2013-09-11T17:58:14.000 回答
17

这是我的解决方案，我认为这是突出当前页面的最佳方式：

在_config.yml上定义一个导航列表，如下所示：

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

然后在您的_includes/header.html文件中，您必须遍历列表以检查当前页面（page.url）是否类似于导航列表中的任何项目，如果是，那么您只需设置活动类并将其添加到<a>标签中：

<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：不要忘记在您的页面上设置永久链接变量。

于 2015-01-20T23:19:23.083 回答
6

我使用了一点 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");
});
于 2012-08-02T05:44:18.727 回答
4

我的方法是在页面的 YAML 前端定义一个自定义变量，并将其输出到<body>元素上：

<body{% if page.id %} data-current-page="{{ page.id }}"{% endif %}>

我的导航链接包括它们链接到的页面的标识符：

<nav>
    <ul>
        <li><a href="artists.html" data-page-id="artists">artists</a></li>
        <li><a href="#" data-page-id="contact">contact</a></li>
        <li><a href="#" data-page-id="about">about</a></li>
    </ul>
</nav>

在 page front matter 中，我们设置了 page id：

---
layout: default
title: Our artists
id: artists
---

最后一点 jQuery 来设置活动链接：

// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
    $("a[data-page-id='" + currentPage + "']").addClass("active");
}
于 2013-08-18T08:04:52.363 回答
2

您网站的导航应该是一个无序列表。为了让列表项在它们处于活动状态时变亮，以下液体脚本向它们添加了一个“活动”类。此类应使用 CSS 进行样式设置。为了检测哪个链接处于活动状态，脚本使用“包含”，如下面的代码所示。

<ul>
  <li {% if page.url contains '/getting-started' %}class="active"{% endif %}>
    <a href="/getting-started/">Getting started</a>
  </li>
  ...
  ...
  ...
</ul>

此代码与 Jekyll 中的所有永久链接样式兼容。'contains' 语句成功突出显示以下 URL 的第一个菜单项：

  • 入门/
  • 入门.html
  • 入门/index.html
  • 入门/子页面/
  • 入门/subpage.html

来源：http: //jekyllcodex.org/without-plugin/simple-menu/

于 2017-10-27T22:05:13.520 回答
2

这里有很多令人困惑的答案。我只是使用一个if：

{% if page.name == 'limbo-anim.md' %}active{% endif %}

我直接引用页面并将其放在我想要的类中

<li><a class="pr-1 {% if page.name == 'limbo-anim.md' %}activo{% endif %} " href="limbo-anim.html">Animación</a></li>

完毕。快的。

于 2018-12-29T19:02:25.080 回答
1

我一直在使用page.path和关闭文件名。

<a href="/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>
于 2017-03-18T04:08:56.227 回答
0

很多好的答案已经存在。

试试这个。

我稍微改变了上面的答案。

_data/navigation.yaml

- name: Home
  url: /
  active: home
- name: Portfolio
  url: /portfolio/
  active: portfolio
- name: Blog
  url: /blog/
  active: blog

在一个页面中 -> portfolio.html（对于具有相对活动页面名称的所有页面都相同）

---
layout: default
title: Portfolio
permalink: /portfolio/
active: portfolio
---

<div>
  <h2>Portfolio</h2>
</div>

Navigation html part

<ul class="main-menu">
  {% for item in site.data.navigation %}
    <li class="main-menu-item">
      {% if {{page.active}} == {{item.active}} %}
        <a class="main-menu-link active" href="{{ item.url }}">{{ item.name }}</a>
      {% else %}
        <a class="main-menu-link" href="{{ item.url }}">{{ item.name }}</a>
      {% endif %}
    </li>
  {% endfor %}
</ul>
于 2016-07-30T08:26:37.867 回答
0

如果你使用 jekyll 的 Minima 主题，你只需要在 header.html 中的 class 属性上添加一个三元：

 <a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">

完整摘录：

        <div class="trigger">
        {%- for path in page_paths -%}
          {%- assign my_page = site.pages | where: "path", path | first -%}
          {%- if my_page.title -%}
          <a {% if my_page.url == page.url %} class="active"{% endif %} href="{{ my_page.url | relative_url }}">{{ my_page.title | escape }}</a>
          {%- endif -%}
        {%- endfor -%}
      </div>

将此添加到您的 _config.yml

header_pages:
  - classes.markdown
  - activities.markdown
  - teachers.markdown

然后当然是你的CSS：

   a.active {
                color: #e6402a;
            }
于 2020-05-27T02:40:00.607 回答
-2

这是一个 jQuery 方法来做同样的事情

  var pathname = window.location.pathname;

  $(".menu.right a").each(function(index) {
    if (pathname === $(this).attr('href') ) {
      $(this).addClass("active");
    }
  });
于 2015-12-11T11:58:32.410 回答