How to add & ldquo; active & rdquo; class link to navigation, if you are on a single page of publication in Jekyll

advertisements

My personal site is developed over Jekyll. Also, I have implemented active navigation logic. So if I would click on "Journal", it will take me to the list page where you can find all posts.

Navigation Items:

  1. Home
  2. Journal
  3. Projects
  4. About
  5. Contact

Now I am looking for a solution where I can give active class to "Journal" while I am on a single post page or reading a post.

You can consider current-post-ancestor, current-menu-parent or current-post-parent post classes in WordPress for better understanding of this question.

Thanks in advance.


Each post has a page.path variable like _posts/postName.md. So with your code, you can use page.path contains "_posts/" like this :

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

Note : it seems that {% if page.url == '/journal/' || page.url == '/post.html/' || page.path contains "_posts/" %} is not working.