1

So first off, I wanted to say that I'm fairly positive I'm following the instructions provided both in the official documentation as well as SO posts that echo the documentation, as well as those that provide a bit of a different solution.

Either way, it's not working for me.

One of my questions revolves around how this code is appearing in my text editor. I'm attaching an image to demonstrate how the jinja2 code is being formatted -- everything inside the <li> element is being italicized and the double == also seems to be behaving strangely.

Here is the portion of code represented in the image:

<ul class="side-link-container center-align">
                {% for href, id, caption in navigation_bar %}
                <li{% if id == active_page %} class="active"{% endif
                %}><a href="{{ href|e }}">{{ caption|e }}</a>
                </li>
                {% endfor %}

It is identical pretty much with what is dictated in the jinja2 docs (the other portions of this code, namely the for loop for the navigation bar and the set activate page assignment, both in the child template and that layout.html, are not shown here.

Any advice or help with getting active page to be classed as such as I can style it accordingly in the nav? Thanks.

Image of code

user11424535
  • 67
  • 2
  • 6

1 Answers1

3

The way the code appears in the editor is not causing any issues, but it could mean you don't a have a syntax/language support plugin/add-on installed.

If you're not getting any template errors (TemplateSyntaxError, for example), it could be that the data in navigation_bar or active_page simply don't match. Could you include the data for these?

Alternatively, my go to is to have active_page set on the base template and each page template:

{% set active_page = 'home' %}

and in navigation items I add:

<li class="other-styles {{'active' if active_page == 'the page' }}">
djnz
  • 2,021
  • 1
  • 13
  • 13
  • Thanks for the reply! Is the code you list after "Alternatively, ..." all you're using? It's elegant and makes perfect sense to me, but unless there's more, it isn't working for me. I've got `{% extends 'layout.html' %} {% set active_page = "learning" %}` right at the top of my learning.html and `class="{{'active' if active_page == 'learning'}}"` inside the `
  • ` in my layout.html that points to the learning page (all my links are working just fine). Also, when I add a % to both sides of the inside of the {{}} brackets, I get a TemplateSyntaxError.
    • – user11424535 Apr 29 '19 at 01:34
  • Yes, that's all. Using the `{{ }}` syntax is correct for inline conditions. When you inspect the html, is it adding the active class? – djnz Apr 29 '19 at 02:09
  • Ah, it's working now! Thanks so much. I had to fool around with some stuff but apparently it only works if, in my CSS, I specific `.active a` (so, the link element as well as the class) and not simply `.active`. Its color wasn't changing when selecting the class alone, although its size was. Weird. But all works as intended now. – user11424535 Apr 29 '19 at 02:48