How to add a conditional logic when on a different url but showing a single post

1

I had this in my settings.yml

menu :

      - {name: 'Blogs', url: 'blogs'}
      - {name: 'Work',  url: 'work'}
      - {name: 'Books', url: 'books'}
      - {name: 'Projects', url: 'projects'}
      - {name: 'Journal', url: 'journals'}

and so I looped it out in my html

  <nav class="nav-links">
              {% for item in site.data.settings.menu %}
                <a href="{{ site.github.url }}/{{ item.url }}" class="text-grey-dark font-sans font-bold no-underline hover:text-black">
                  {{ item.name }} 
                </a>
                {% endfor %} 
              </nav>

But what if I want to also add an active class to the Blogs link that starts with ‘/blog/’ url because I have a page that also shows my blog which is the link is like /blog/blue-sky not /blogs/blue-sky

In the /blogs url I show all the blogs but in the /blog/2024-first-blog only a single blog is shown.

I want that Blogs link to be highlighted also when I’m on /blog/** page.

Thanks in advance, I am asking this because I don’t have the luxury of time to read all the blogs inside this phenomenal page, as I have an another job that reqiures my full attention, I’m just finishing my simple website.

2

I see 2 possibilities:

  • change url in your settings.yml to be a list instead of a string, so this could look like - {name: 'Blogs', url: ['blogs', 'blog']} and when checking for the url to add the active class check with {% if item.url contains
  • handle the blog case individually in your html then handle the other ones in the for loop. This way you could check for {% if url contains "/blog" %}
3

thank you 4 responding to my question my friend.

but this line :
{name: 'Blogs', url: ['blogs', 'blog']}

isn’t url going to be accepting a string value and not an array ?

4

In this case url would be an array, then you would need to check if the first part of your url is contained in this array. It would work as:

  • extract the first part of your page url (/blog/)
  • check if it is contained in the list of your urls (/blog/ or /blogs/)
  • if it is, highlight this text in the navigation bar
5

yeah got it aalready. !