StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>How about a custom tag which you use to generate your nav item?</p> <p>The following takes the name of the url for which a nav item should be generated and the text it should display. It generates a li tag with a class of "selected" if the named url's path is the same as the current url (requires <code>'django.core.context_processors.request'</code> in your <code>TEMPLATE_CONTEXT_PROCESSORS</code>). Within the li, it generates an a tag with the path of the url specified by the <code>url_name</code>. It has the contents specified by <code>contents</code>.</p> <p>Obviously, this could be tweaked to generate different markup for the nav item, as required.</p> <p>The rest can be done using CSS.</p> <h2>Advantages:</h2> <ul> <li><p>Easy to use</p></li> <li><p>Little code required</p></li> <li><p>DRY</p></li> <li><p>Could be made to be more flexible</p></li> </ul> <h2>Disadvantages:</h2> <ul> <li><p>Requires <code>'django.core.context_processors.request'</code></p></li> <li><p>Requires urls to be named e.g. <code>urlpatterns = patterns('django.views.generic.simple', ... (r'^$', 'direct_to_template', {'template': 'index.html'}, 'index'), ... )</code>. This could potentially be done differently (e.g. pass in url).</p></li> <li><p>Doesn't cope with pages not exactly equal to the specified and therefore will not apply the selected class to the li when on a page lower in the url heirarchy. For example, if I'm on /products/, it will highlight the nav item directing to /products/. If I'm on /products/myProduct/, it will not highlight the /products/ link. This could be coded around, but it would force people to use sensible urls. For example, change the <code>additionalAttrs</code> assignment to <code>additionalAttrs = ' class=selected' if (context['request'].path.startswith(path) and path != '/') or (context['request'].path == path) else ''</code>.</p></li> </ul> <h2>Code:</h2> <pre><code>from django import template from django.core.urlresolvers import reverse register = template.Library() class NavNode(template.Node): def __init__(self, url_name, contents): self.url_name = url_name self.contents = contents def render(self, context): path = reverse(self.url_name) additionalAttrs = ' class=selected' if path == context['request'].path else '' return '<li'+additionalAttrs+'><a href="'+path+'">'+self.contents+'</a></li>' @register.tag def nav_link(parser, token): bits = token.split_contents() if len(bits) == 3: contents = bits.pop() url_name = bits.pop() else: raise template.TemplateSyntaxError, "%r tag requires a single argument" % bits[0] if contents[0] == contents[-1] and contents[0] in ('"', "'"): contents = contents[1:-1] return NavNode(url_name, contents) </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload