Highlight current active page
Alex Rades
what kind of pattern do you use to add a class attribute to the
current page being viewed?
I mean the usual:
<ul id="navlist">
<li><a href="index.html" class="current_active">Home</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">contact us</a></li>
</ul>
I have this snipped of html defined in the base template and all pages
inherit from it.
Currently I'm using this templatetag:
http://gnuvince.wordpress.com/2007/09/14/a-django-template-tag-for-the-current-active-page/
while it's very useful, I don't like it too much, so I'm asking you
what is the best practice here.
Thank you
David Reynolds
On 30 Sep 2008, at 8:03 am, Alex Rades wrote:
> while it's very useful, I don't like it too much, so I'm asking you
> what is the best practice here.
I tend to do:
{% for page in page_list %}
<li><a href="{{ page.get_absolute_url }}"{% ifequal request.path
page.get_absolute_url %} class="current_active"{% endif %}>{{ page }}
</a></li>
{% endfor %}
But that obviously requires you to have a list of pages in your context.
--
David Reynolds
da...@reynoldsfamily.org.uk
Steven Armstrong
I usually do that through a css switch on the body tag.
e.g.
base template: -----
<body id="section-{% block section %}home{% endblock %}">
<ul id="navlist">
<li id="nav-home"><a href="index.html">Home</a></li>
<li id="nav-products"><a href="products.html">Products</a></li>
<li id="nav-faq"><a href="faq.html">FAQ</a></li>
<li id="nav-contact"><a href="contact.html">contact us</a></li>
</ul>
</body>
css: -----
#section-home #nav-home a,
#section-products #nav-products a,
#section-faq #nav-faq a,
#section-contact #nav-contact a {
background-color: blue;
}
products template: -----
{% block section %}products{% endblock %}
faq template: -----
{% block section %}faq{% endblock %}
hth
Cheers
Steven
Gerard Petersen
I don't understand why it's needs to be so complicated. When using a 'double' template inheritance, e.g: base > base_products > product_add
There's only one place where you have to maintain some navlist html/css code. This is where the 'active' attribute is maintained. So with multiple sections like: product, customer, invoices youre hierarchy looks like this:
base.html
base_product.html (extends base.html)
product_add.html (extends base_product.html)
base_customer.html
etc ...
base_invoice.html
etc ...
This comes straight from the docs: http://docs.djangoproject.com/en/dev/topics/templates/#id1
(See 'base_SECTIONNAME.html' about two screens down from there)
I personally dont' see the needs for loops and extra code. Or is my app to simple ... :-)
Regards,
Gerard.
--
urls = { 'fun': 'www.zonderbroodje.nl', 'tech': 'www.gp-net.nl' }
Gerard Petersen
Sorry, I replied to the wrong message in this thread. Your setup is actually quite charming.
Regards,
Gerard.
--
Alex Rades
sorry but I don't understand your setup.
Could you show us some sample code which does the actual navigation list?
Thank you very much for your time
Gerard Petersen
As the docs state, you can place code in a {% block [name] %} and it gets overwritten when another template has that block defined. This is the base.html: http://paste.pocoo.org/show/87935/
This is a subnavigation with a different active 'tab' in the navigation bar called base_product.html: http://paste.pocoo.org/show/87936/
As you can see the second overwrites the navbar, and they both have the 'content' block. So when you have content in a sub page for the order 'tab', you define the actual content in another file that looks like this:
http://paste.pocoo.org/show/87937/
And so the relation is: base.html > base_order.html > order_detail.html
Resulting in this: http://paste.pocoo.org/show/87938/
Then in your CSS file you can give the active li a different color.
Hope it helps!
Regards,
Gerard.
Nathaniel Whiteinge
div in each base_SECTION.html template:
# base.html
{% block content %}...{% endblock %}
{% block navigation %}
<ul>
<li{% block active_section_1 %}{% endblock %}><a href="#">Section
1</a></li>
<li{% block active_section_2 %}{% endblock %}><a href="#">Section
2</a></li>
</ul>
{% endblock %}
# base_section1.html
{% extends "base.html" %}
{% block active_section_1 %} class="active"{% endblock %}
# base_section2.html
{% extends "base.html" %}
{% block active_section_2 %} class="active"{% endblock %}
# section1_specific_page.html
{% extends "base_section1.html" %}
{% block content %}...{% endblock %}
Jesse Young
currently active page using similar syntax as the {% url %} tag (i.e.,
you can specify urlpattern names and arguments in the same way), e.g.:
<a {% ifactive request page1 %}class='active'{% endifactive %}
href='{% url
page1 %}'>Page 1</a>
<a {% ifactive request page2 %}class='active'{% endifactive %}
href='{% url
page2 %}'>Page 2</a>
...
<a {% ifactive request pageN %}class='active'{% endifactive %}
href='{% url
pageN %}'>Page N</a>
The code for this is at http://demo.apture.com/demo/ifactive.py .
I admit that the syntax {% ifactive request page2 %}...{% endifactive
%} is somewhat verbose, but the link above also explains how to write
specific template tags that are customized for your own templates,
e.g.:
<a {% activeif page2 %} href='{% url page2 %}'>Page 2</a>
I like this method because it determines whether a page is active by
checking if the same view is called with the same arguments, instead
of just comparing URLs. So it can handle cases where different URLs
map to the same view. It also doesn't require modifying any of the
child templates, like some of the solutions described above.
-Jesse