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

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

我有一个菜单栏（如

），希望为当前页面对应的

分配一个不同的类以进行CSS突出显示

比如伪代码：

或者甚至可以在Jekyll中生成整个

---

如何在有问题的

之外进行最小的更改就可以做到这一点？
是的，您可以做到这一点。

为了实现这一点，我们将利用以下事实：当前页面始终由液态变量表示：
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 %}

最后你可以使用你的新代码了！
在模板中需要导航的地方，只需“调用”include文件并向其传递一些页面和要显示的组：

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


{%assign pages\u list=site.pages%}
{%assign group='导航'%}
{%include pages\u list%}


例子
此功能是框架的一部分。
您可以查看此处概述的代码的确切文档：

最后，您可以在网站本身中看到它的作用。只需查看右侧导航，您将看到当前页面以绿色突出显示：
是的，您可以这样做。

为了实现这一点，我们将利用以下事实：当前页面始终由液态变量表示：
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 %}

最后你可以使用你的新代码了！
在模板中需要导航的地方，只需“调用”include文件并向其传递一些页面和要显示的组：

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


{%assign pages\u list=site.pages%}
{%assign group='导航'%}
{%include pages\u list%}


例子
此功能是框架的一部分。
您可以查看此处概述的代码的确切文档：

最后，您可以在网站本身中看到它的作用。只要看看右边的导航，您就会看到当前页面以绿色突出显示：
我使用了一点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来实现这一点。我在菜单中有以下结构：

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

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

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

最后，使用jQuery设置活动链接：

// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
    $("a[data-page-id='" + currentPage + "']").addClass("active");
}

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

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

最后，使用jQuery设置活动链接：

// highlight current page
var currentPage = $("body").data("current-page");
if (currentPage) {
    $("a[data-page-id='" + currentPage + "']").addClass("active");
}

类似于@ben foster的解决方案，但不使用任何jQuery

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

在前面的内容中，我添加了一个名为
active

e、 g

我有一个包含以下部分的导航

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


{%if page.active==“home”%}

{%else%}

{%endif%}
{%if page.active==“blog”%}

{%else%}

{%endif%}
{%if page.active==“关于”%}

{%else%}

{%endif%}


这对我很有用，因为导航中的链接数量非常少。
类似于@ben foster的解决方案，但没有使用任何jQuery

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

在前面的内容中，我添加了一个名为
active

e、 g

我有一个包含以下部分的导航

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


{%if page.active==“home”%}

{%else%}

{%endif%}
{%if page.active==“blog”%}

{%else%}

{%endif%}
{%if page.active==“关于”%}

{%else%}

{%endif%}


这对我来说很有效，因为导航中的链接数量非常有限。
我觉得对于最简单的导航要求，列出的解决方案过于复杂。这里有一个解决方案，它不涉及前台、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>

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






当然，这只有在静态段提供了描绘导航的方法时才有用。任何更复杂的问题，您都必须使用前面的内容，如@RobertKenny演示。
我觉得对于最简单的导航要求，列出的解决方案过于复杂。这里有一个解决方案，它不涉及前台、javascript、循环等

因为我们可以访问页面URL，所以我们可以对URL进行规范化和拆分，并针对segmen进行测试
navigation:
  - title: blog
    url: /blog/
  - title: about
    url: /about/
  - title: projects
    url: /projects/

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

  var pathname = window.location.pathname;

  $(".menu.right a").each(function(index) {
    if (pathname === $(this).attr('href') ) {
      $(this).addClass("active");
    }
  });

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

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

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

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

<a href="/" class="{% if page.path == 'index.html' %}active{% endif %}">home</a>

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

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

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

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

   a.active {
                color: #e6402a;
            }