How to assign the class "active" based on the path /{{ site.lang }} {{ page.url }}?

Help
1

Hi all. I have plugin installed GitHub - kurtsson/jekyll-multiple-languages-plugin: I18n support for Jekyll and Octopress

This code checks the current page url and assigns the class “active”.

          {% for child in nav.children %}
            <li><a href="{{ child.url | relative_url }}"{% if child.url == page.url %} class="active"{% endif %}>{{ child.title }}</a></li>
          {% endfor %}

However, “page.url” gives the url of the page without the /en/ language subfolder
Example:
blog/post

But in reality it is:
/en/blog/post

Therefore, the “active” class will never be assigned.

This code gives the correct url of the current page:
/{{ site.lang }} {{ page.url }}

But how to assign the class “active” based on this?
Help me please.

2

maybe with append?

{% if child.url == site.lang | append: page.url %}

3

Unfortunately this doesn’t work either.

I also tried this code. As a result, only an empty class is displayed

{% if nav.children != null %}
        <ul>
          {% for child in nav.children %}
            {% comment %} internal/external URL check {% endcomment %}
            {% if child.url contains "://" %}
              {% assign child_url = child.url %}
            {% else %}
              {% assign child_url = child.url | relative_url %}
            {% endif %}

            {% comment %} set "active" class on current page {% endcomment %}
            {% if child.url == site.lang | append: page.url %}
              {% assign active = "active" %}
            {% else %}
              {% assign active = "" %}
            {% endif %}

            <li><a href="{{ child_url }}" class="{{ active }}">{{ child.title }}</a></li>
          {% endfor %}
        </ul>
        {% endif %}
      </li>
    {% endfor %}
  </ul>
4

I always use a partial match in Hugo, not sure what the correct syntax is for Jekyll. Should be here: Liquid template language

5

have you tried outputting this to the page somewhere to see what it says? I’d first try outputting all the parts to the page to see what is going on, and then worry about getting the class to show.

6

This outputs:
en/articles/cryptocurrency/

real localhost url:

http://127.0.0.1:4000/en/articles/cryptocurrency/

7

Any ideas? output looks correct

8

then don’t you just need to compare it to child.url?

if not can you show what the value is of both?

I wouldn’t be worried about getting the active class to work yet, just try to get the comparison to work and output the different pieces so you can see what they are as you change things.

9

child.url output:

en/articles/cryptocurrency/

{% if child.url == site.lang | append: page.url %} output

/en/articles/cryptocurrency/

But the “active” class is still not being assigned…

10

the if on its own shouldn’t output anything I don’t think. What is the code you are trying to test?

I would try to do something like:

{% if child.url == site.lang | append: page.url %}
it works!
{% else %}
it doesn't work, child.url = {{child.url}} <br/>
page url with append: {{ site.lang | append: page.url }}
{% endif %}
11

Hi. I always use “contains” instead “==”. Maybe it works for you.

12

This code outputs:

it doesn't work, child.url =
page url with append: en/articles/cryptocurrency/
13

“contains” doesn’t work either

14

I thought your issue was with the other side of the comparison but apparently not? if child.url doesn’t exist then the other side to compare to doesn’t really matter.

my code wasn’t tested, you’ll need to fiddle around and see if you can ever get child.url to do anything.

Do the nav links work? what is in a nav item?

15

Yes. Masthead nav:

		<ul class="visible-links">
            <li class="masthead__menu-item">
             {% assign nav_language = site.lang %}
				{% assign menu_items = site.data.my-nav-lang.menu_items.[nav_language] %}
				{% unless menu_items %}
				{% assign menu_items = site.data.my-nav-lang.menu_items.[site.language_default] %}
				{% endunless %}
				{% for item in menu_items %}
			<li>
				<a href="{{ item.path }}">{{ item.label }}</a>
			</li>
			{% endfor %} 
            </li>
        </ul>
16

the initial question was how to get the site.lang as a prefix to the pag.url.

From what I can tell that has been accomplished? but now the child.url is nothing?

did the child.url ever work? is the path for the link set when you do this:
<li><a href="{{ child_url }}" class="{{ active }}">{{ child.title }}</a></li>

is there a link to the repo and actual site you can share?

17

Yes, GitHub - awesomebloging/cmsminers and Cryptocurrency Mining Software and Wallets [2023]

Sidebar Nav File: cmsminers/nav_list at main · awesomebloging/cmsminers · GitHub

18

I don’t see a sidebar on your website.

I’m guessing you are talking about the main nav bar along the top of the page? if so maybe you are looking at the wrong include? maybe the nav.html file is what you want?

19

img-2023-03-08-19-54-40
img-2023-03-08-19-54-401905×896 136 KB

example: Cryptocurrency Explained - What is It, Types, Pros & Cons [2023]