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

10 回答

• 108

  Yes you can do this.
  为了实现这一点，我们将利用以下事实：当前页面始终由模板中的液体变量 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

  回复于 2024-04-28T13:24:36+08:00
• 6

  我觉得最简单的导航要求，列出的解决方案过于复杂 . 这是一个不涉及前端问题，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演示的前端问题 .

  回复于 2024-04-28T13:24:36+08:00
• 4

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

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

  回复于 2024-04-28T13:24:36+08:00
• 0

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

  在_1137307上定义导航列表，如下所示：

  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>
  

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

  P.S：不要忘记在页面上设置永久链接变量 .

  回复于 2024-04-28T13:24:36+08:00
• 17

  我使用了一些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");
  });
  

  回复于 2024-04-28T13:24:36+08:00
• 40

  我的方法是在页面的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>
  

  在页面前面我们设置页面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");
  }
  

  回复于 2024-04-28T13:24:36+08:00
• 15

  很多好的答案已经存在 .

  试试这个 .

  我略微改变了上面的答案 .

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

  回复于 2024-04-28T13:24:36+08:00
• 0

  我一直在使用 page.path 并取消文件名 .

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

  回复于 2024-04-28T13:24:36+08:00
• 0

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

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

  此代码与所有永久链接兼容杰基尔的风格 . 'contains'语句成功突出显示以下URL的第一个菜单项：

  • 入门/

  • getting-started.html

  • getting-started / index.html

  • getting-started / subpage /

  • getting-started / subpage.html

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

  回复于 2024-04-28T13:24:36+08:00
• -1

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

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

  回复于 2024-04-28T13:24:36+08:00