Is-active Class not being generated by Jekyll / Liquid

Question

I'm trying to create a responsive site, mainly for keeping documentation. Like these two sites:

My page (as it stands is here) >> https://startech-enterprises.github.io/docs/data-integration-and-etl/branches-and-loops-local.html

But I have an issue

QUESTION:

Is there a way of changing the design so that:

I can show an is-active class for the menu item currently selected. Jekyll liquid code not generating the expected HTML

CONTEXT:

STRUCTURE OF LAYOUT PAGE:

The has a nav bar at the top, footer at the bottom, nested side menu on the left (25% of screen width), and main content area (75% of screen width).

Overall Layout:

<html>
<head></head>
<body>
<header></header>
<div class = "middle section">
<div class = "left side-bar">
{% include navigation.html %}
</div>
<div class = "contents">
{{content}}
</div>
</div>
<footer></footer>
</body>
</html>

CONTENT PAGES:

Every content has the front matter like so:

layout: default

CODE USED:

Default Layout Page in Jekyll

Here currently is the Jekyll code I'm using for the side bar:

<ul class="treegroup">
  {% for item in include.nav %}
    {% if item.link %}
      <li class="{% if item.link == page.url | prepend:site.baseurl %}is-active {% endif %}none"><a href="{{ item.link }}">{{ item.name }}</a></li>
    {% else %}
      <li class="{% if item.link == page.url | prepend:site.baseurl %}is-active {% endif %}treeitem"><span class="tree-expander"><span class="tree-indicator"><img src="/../docs/assets/images/chevron.png" class="chevron"></span>{{ item.name }}</span></li>
    {% endif %}
        {% if item.tree %}
          {% include navigation.html nav=item.tree %}
        {% else %}  
        {% endif %}
      </li>
  {% endfor %}
</ul>

CSS used for sidebar:

Here is my relevant sidebar CSS

 /* Active link */
  ul.toc li.is-active, ul.toc li.is-active a {
    font-weight: 500;
    background-color: #E8F0FF;
    color: #1967d2;
  }

  /* Links on mouse-over */
  ul.toc li:hover:not(.is-active){
    background-color: #F1F3F4;
  }

  ul.toc li:hover:not(.is-active) a {
    background-color: #F1F3F4;
    text-decoration: underline;
  }

YAML NAV file:

tree:
- name: Level 1
  link: /docs/level1.html
- name: Level 2
  link: /docs/level2.html
- name: Level 3
  tree:
  - name: Home  
    link: /docs/index.html
  - name: About
    link: /docs/about.html
  - name: Level 3.2
    tree:
      - name: Staff
        link: /docs/staff.html
      - name: People
- name: Level 4
  link: /docs/level4.html
- name: Level 5
  tree:
  - name: Blog
    link: /docs/blog.html
  - name: Level 5.2
    tree:
      - name: Branches & Loops
        link: /docs/data-integration-and-etl/branches-and-loops-local.html
      - name: People
        link: /docs/people.html

YAML config file

name: Hank Quinlan, Horrible Cop
markdown: kramdown
baseurl: /docs

Thanks

ST

Answer 1

TL;DR;

Here is the correct list item you are looking for:

<li class="{% if item.link == page.url %}is-active {% endif %}none">
  <a href="{{ item.link }}">{{ item.name }}</a>
</li>

Look at your rendered page, your liquid template:

<li {% if item.link == page.url | prepend:site.baseurl %}class="is-active"{% endif %} class="none">
  <a href="{{ item.link }}">{{ item.name }}</a>
</li>

generates this HTML code:

<li class="none">
  <a href="/docs/level1.html">Level 1</a>
</li>

So that means that you have two issues:

the URLs generated by item.link do not contains the site.baseurl , so your condition should rather be:

{% if item.link == page.url %}

You actually have a second issue in your template, if the condition actually pass, you will end up with this li , mind the double, and, so, invalid class attribute here:

<li class="is-active" class="none">

This means that the correct way of doing it would be to always have a class attribute, but, then, add an extra class when the item is active, and not add the extra attribute a second time:

<li class="{% if item.link == page.url %}is-active {% endif %}none">
  <a href="{{ item.link }}">{{ item.name }}</a>
</li>

would then be your solution.

Is-active Class not being generated by Jekyll / Liquid

Question

1 answers

solution1
1 2020-06-12 16:15:59

TL;DR;

Is-active Class not being generated by Jekyll / Liquid

Question

1 answers

solution1 1 2020-06-12 16:15:59

TL;DR;

solution1
1 2020-06-12 16:15:59