Converting Flask to Hugo

support
1

I’m converting my blog from flask to Hugo and I have a menu bar at the top. Whenever I change the page/category in the nav bar, I have it change the menu thats highlighted with the active class tag.

This is my Jinja2 code

{% block headernav %}
    {% if url_for(request.endpoint) == '/index' %}
        <a href="{{ url_for('index') }}" class="nav-link active"><span class="nav-text">Home</span></a>
        <a href="{{ url_for('posts') }}" class="nav-link"><span class="nav-text">Posts</span></a>
        <a href="{{ url_for('homelab') }}" class="nav-link"><span class="nav-text">HomeLab</span></a>
        <a href="{{ url_for('aboutme') }}" class="nav-link"><span class="nav-text">About Me</span></a>
        <a href="https://github.com/tomburge" class="nav-link" target="_blank"><span class="nav-text">GitHub</span></a>
    {% elif url_for(request.endpoint) == '/posts/' %}
        <a href="{{ url_for('index') }}" class="nav-link"><span class="nav-text">Home</span></a>
        <a href="{{ url_for('posts') }}" class="nav-link active"><span class="nav-text">Posts</span></a>
        <a href="{{ url_for('homelab') }}" class="nav-link"><span class="nav-text">HomeLab</span></a>
        <a href="{{ url_for('aboutme') }}" class="nav-link"><span class="nav-text">About Me</span></a>
        <a href="https://github.com/tomburge" class="nav-link" target="_blank"><span class="nav-text">GitHub</span></a>
    {% elif url_for(request.endpoint) == '/homelab' %}
        <a href="{{ url_for('index') }}" class="nav-link"><span class="nav-text">Home</span></a>
        <a href="{{ url_for('posts') }}" class="nav-link"><span class="nav-text">Posts</span></a>
        <a href="{{ url_for('homelab') }}" class="nav-link active"><span class="nav-text">HomeLab</span></a>
        <a href="{{ url_for('aboutme') }}" class="nav-link"><span class="nav-text">About Me</span></a>
        <a href="https://github.com/tomburge" class="nav-link" target="_blank"><span class="nav-text">GitHub</span></a>
    {% elif url_for(request.endpoint) == '/aboutme' %}
        <a href="{{ url_for('index') }}" class="nav-link"><span class="nav-text">Home</span></a>
        <a href="{{ url_for('posts') }}" class="nav-link"><span class="nav-text">Posts</span></a>
        <a href="{{ url_for('homelab') }}" class="nav-link"><span class="nav-text">HomeLab</span></a>
        <a href="{{ url_for('aboutme') }}" class="nav-link active"><span class="nav-text">About Me</span></a>
        <a href="https://github.com/tomburge" class="nav-link" target="_blank"><span class="nav-text">GitHub</span></a>
    {% else %}
        <a href="{{ url_for('index') }}" class="nav-link"><span class="nav-text">Home</span></a>
        <a href="{{ url_for('posts') }}" class="nav-link"><span class="nav-text">Posts</span></a>
        <a href="{{ url_for('homelab') }}" class="nav-link"><span class="nav-text">HomeLab</span></a>
        <a href="{{ url_for('aboutme') }}" class="nav-link"><span class="nav-text">About Me</span></a>
        <a href="https://github.com/tomburge" class="nav-link" target="_blank"><span class="nav-text">GitHub</span></a>
    {% endif %}
{% endblock %}

How would I convert this to a Hugo conditional?

2

See this menu example from the docs:

1 Like