如果您在 Jekyll 中的单个 post 页面上，如何将 "active" class 添加到导航 link

Question

我的 personal site 是在 Jekyll 上开发的。此外，我还实现了 active 导航逻辑。因此，如果我单击 "Journal"，它将带我到列表页面，您可以在其中找到所有 post。

导航项目：

1. 首页
2. 期刊
3. 项目
4. 关于
5. 联系方式

现在我正在寻找一种解决方案，当我在单个 post 页面上或阅读 post 时，我可以为 "Journal" 提供活动 class。

你可以考虑 current-post-ancestor, current-menu-parent 或 current-post-parent post classes in WordPress 以更好地理解这个问题。

提前致谢。

Answer 1

如果 'Journal' 是页面 'mysite.com/journal' 并且您的帖子在 'mysite.com/journal/postdate/postname' 上，您可以检查 URL 的第一部分是否等于菜单项，如下所示:

{% assign url_parts = page.url | split: '/' %}
<li {% if url_parts[1] == 'journal' %}class="active"{% endif %}> ... </li>

来源：http://jekyllcodex.org/basics/

这可能需要自定义永久链接。有关自定义永久链接的信息可以在 same page.

上找到

Answer 2

每个 post 都有一个 page.path 变量，例如 _posts/postName.md。因此，对于您的代码，您可以像这样使用 page.path contains "_posts/" :

<li {% if page.url == '/journal/' or page.url == '/post.html/' or page.path contains "_posts/" %} class="active"{% endif %}>
  <a href="{{ site.baseurl }}/journal">Journal</a>
</li>

注意：{% if page.url == '/journal/' || page.url == '/post.html/' || page.path contains "_posts/" %} 似乎不起作用。