如何向href为location.pathname

Question

我正在尝试在Jekyll模板的基础上构建博客样式的网站。我目前正在编写和设置导航样式，这给我带来了两个问题。使用this question的答案，我设法在当前页面上添加了类active，但这是仍然需要解决的问题：

• 首先，页面加载时，所有“标签”均处于活动状态，而不仅仅是“主页”标签：

• 第二，当URL的深度超过第一级导航时，相关的“标签”将不再处于活动状态。以下屏幕截图的网址为[baseurl]/reviews/[name-of-post]，但评论“标签”未激活：

我不确定如何解决第一个问题，但是对于第二个问题，我认为我需要在location.pathname中搜索相关的href，但是我需要对此进行深入研究。会根据需要进行更新，但是我已经很久没有运气了，所以我想同时发布。

以下是相关部分的代码段：

侧面导航HTML（用Liquid编写）

<nav id="side-nav">
  <ul class="nav-items-list">
    <li id="nav-item"><a href="{{ site.baseurl }}/"><i class="fas fa-home"></i></a></li>
    {% for page in site.pages %}
    <li id="nav-item">
      <a href="{{ site.baseurl }}/{{ page.title | downcase }}/">
      <i class="{{ page.icon }}"></i>
      </a>
    </li>
    {% endfor %}
  </ul>
</nav>

示例页面（YAML重点）

---
layout: page
title: Reviews
permalink: /reviews/
icon: "fas fa-star-half-alt"
---

jQuery

$(function(){
  var current = location.pathname;
  $('#nav-item a').each(function(){
      var $this = $(this);
      if($this.attr('href').indexOf(current) !== -1){
          $this.addClass('active');
      }
  })
})

这应该足够了，但是如果需要更多代码，请告诉我。所有代码也都可以在GitHub上使用，其中项目也是hosted on GitHub Pages。

谢谢。

杰米

Answer 1

以下理论上应该起作用：

// Compute the closest (2-part) base path from the current location
var basePath = '/' + window.location.pathname.split('/', 3).filter(Boolean).join('/') + '/';

// Add `active` class to the corresponding link if any
$('#nav-item a[href="' + basePath + '"]').addClass('active');

第一行基本上采用pathName的前2个部分，因此：

• 如果URL为/glossd/，则产生/glossd/，
• 如果URL为/glossd/reviews/，则产生/glossd/reviews/，
• 如果URL为/glossd/reviews/something/，它仍然会产生/glossd/reviews/。