CODEWITHSUNDEEP
djangonavigationdjango-viewsdjango-templates
Robin
Robin

Reputation: 9644

Factorizing a header menu in Django template

I'm building a website using django with a header on top of every page, which basically is a menu with a few links, constant throughout the pages.

However, depending on the page you're on I'd like to highlight the corresponding link on the menu by adding the class "active". To do so, I am currently doing as follow: each page has a full menu block that integrates within a general layout, which does NOT contain the menu. For exemple, page2 would look like this:

{% extends "layout.html" %}
{% block menu %}
<li><a href="{% url 'myapp:index' %}">Home</a></li>
<li><a href="{% url 'myapp:page1' %}">page1</a></li>
<li class="active"><a href="{% url 'myapp:page2' %}">page2</a></li>
<li><a href="{% url 'myapp:page3' %}">page3</a></li>
{% endblock %}

The problem is that, beside from that solution being not so pretty, every time I want to add a link to the header menu I have to modify each and every page I have. Since this is far from optimal, I was wondering if any of you would know about a better way of doing so.

Thanks in advance!

Upvotes: 3

Views: 2517

Answers (3)

Hedde van der Heide
Hedde van der Heide

Reputation: 22459

If you have a "page" object at every view, you could compare a navigation item's slug to the object's slug

navigation.html

<ul>
    {% for page in navigation %}
        <li{% ifequal object.slug page.slug %} class="active"{% endifequal %}>
            <a href="{{ page.get_absolute_url }}">{{ page.title }}</a>
        </li>
    {% endfor %}
</ul>

base.html

<html>
    <head />
    <body>
        {% include "navigation.html" %}
        {% block content %}
            Welcome Earthling.
        {% endblock %}
    </body>
</html>

page.html

{% extends "base.html" %}

{% block content %}
    {{ object }}
{% endblock %}

Where navigation is perhaps a context_processor variable holding all the pages, and object is the current PageDetailView object variable

Disclaimer

There are many solutions for your problem as noted by Paulo. Of course this solution assumes that every view holds a page object, a concept usually implemented by a CMS. If you have views that do not derive from the Page app you would have to inject page pretenders within the navigation (atleast holding a get_absolute_url and title attribute).

This might be a very nice learning experience, but you'll probably save loads time installing feinCMS or django-cms which both define an ApplicationContent principle also.

Upvotes: 3

Dmitry Demidenko
Dmitry Demidenko

Reputation: 3407

You can create a custom templatetag:

from django import template
from django.core.urlresolvers import reverse, NoReverseMatch, resolve

register = template.Library()

@register.simple_tag
def active(request, view_name):
    url = resolve(request.path)
    if url.view_name == view_name:
        return 'active'
    try:
        uri = reverse(view_name)
    except NoReverseMatch:
        uri = view_name
    if request.path.startswith(uri):
        return 'active'
    return ''

And use it in the template to recognize which page is loaded by URL

<li class="{% active request 'car_edit' %}"><a href="{% url 'car_edit' car.pk %}">Edit</a></li>

Upvotes: 6

Paulo Bu
Paulo Bu

Reputation: 29804

You may use the include tag and pass it a value which is the current page.

For example, this may be a separate file for declaring the menu template only:

menu.html

{% if active = "a" %}
<li><a href="{% url 'myapp:index' %}">Home</a></li>
{% if active = "b" %}
<li><a href="{% url 'myapp:page1' %}">page1</a></li>
{% if active = "c" %}
<li class="active"><a href="{% url 'myapp:page2' %}">page2</a></li>
{% if active = "d" %}
<li><a href="{% url 'myapp:page3' %}">page3</a></li>

And call this from within your template like this:

{% include 'path/to/menu.html' with active="b"%} # or a or c or d.

Hope it helps!

Upvotes: 1

Related Questions