django

Question

I'm planning to create a website using django that will have a common header throughout the entire website. I've read django's documentation on templating inheritance, but I can't seem to find an elegant solution for the "dynamic" elements in my header.

For example, the header in the website will include tabs, say similar to http://www.google.com/ (where it has "Web", "Images", etc), where the selected tab will describe your current location in the website.

Using the django template inheritance, it would seem like you would create a base template like this:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <link rel="stylesheet" href="style.css" />
    <title>{% block title %}My Amazing Site{% endblock %}</title>
</head>
<body>
<div id="header">
    {% block header %}
     .... html to create tabs ...
    {% endblock header %}
</div>

and then in all of my other pages, i would do this:

{% extends "base.html" %}
{% block header % }
 .... html to create tabs with one tab "selected" ...
{% endblock header %}

which seems annoying as every single one of my pages would have to have duplicated HTML with the header information, but slightly different. So when its time to add a new tab, i have to modify every single HTML file.

Upon further reading, it seems like some other possible solutions are:

1 - Create a custom template tag that takes in which tab is currently selected, that way in each HTML page i just call: {% block header %} {% mycustomtag abc %} {% endblock header %}

I don't like this solution because it would requiring placing HTML into the python code for creating this custom tag.

2 - Create X number of sub-templates of base.html, all with the appropriate tab selected. Then each page would inherit from the appropriate sub-template based on which tab they want selected.

This solution seems fine, except for the fact that it will require X number of almost exactly the same HTML, and still runs into the issue of having to modify all the files when a tab is added or removed.

3 - Use javascript (like jquery) to modify the header on page load to "select" the correct tab.

This solution is fine but then would require one to remember to add this functionality to every page's javascript. the good part is that the header HTML would only live in a single HTML file.

Any other suggestions?

Thanks!

Alasdair · Accepted Answer

I'm assuming each tab is a list item in your template base.html.

<ul>
    <li>Tab 1</li>
    <li>Tab 2</li>
    ...
</ul>

Add an extra block to each li.

<ul>
    <li class="{% block class_tab1 %}inactive{% endblock %}">Tab 1</li>
    <li class="{% block class_tab2 %}inactive{% endblock %}">Tab 2</li>
    <li class="{% block class_tab3 %}inactive{% endblock %}">Tab 3</li>
    ...
</ul>

Then in your template if tab 1 is to be selected:

{% extends "base.html" %}

{% block class_tab1 %}active{% endblock %}
...

So the html rendered for Tab 1 is:

<ul>
    <li class="active">Tab 1</li>
    <li class="inactive">Tab 2</li>
    <li class="inactive">Tab 3</li>
    ...
</ul>

and you can write CSS to target the li .active as you wish.

django - using a common header with some dynamic elements

Tags:

python

javascript

1 Answers

Alasdair

Recent Activity

Donate For Us