如何将"active"类添加到导航链接，如果您在 Jekyll 的单个帖子页面上

Question

我的个人网站是在Jekyll上开发的。此外，我还实现了active导航逻辑。因此，如果我单击"日记"，它将带我进入列表页面，您可以在其中找到所有帖子。

导航项：

1. 家
2. 杂志
3. 项目
4. 大约
5. 联系

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

您可以考虑在WordPress中current-post-ancestor，current-menu-parent或current-post-parent发布类，以便更好地理解这个问题。

提前谢谢。

Answer 1

每个帖子都有一个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/" %}不起作用。

Answer 2

如果"日记"是页面"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/

这可能需要自定义永久链接。有关自定义永久链接的信息可以在同一页面上找到。