ansaurus

Question

Django: Is there a better way to bold the current page link

Answer 1

+8 A:

Here's an elegant way to do this, which I copied from somewhere and I only wish I could remember where, so I could give them the credit. 8-)

I assign an id to each of my pages (or all the pages within a section) like this:

In index.html:    <body id='section-intro'>...
In faq.html:      <body id='section-faq'>...
In download.html: <body id='section-download'>...

And then an id for the corresponding links:

<li id='nav-intro'><a href="./">Introduction</a></li>
<li id='nav-faq'><a href="./faq.html">FAQ</a></li>
<li id='nav-download'><a href="./download.html">Download</a></li>

And the in the CSS I set a rule like this:

#section-intro #nav-intro,
#section-faq #nav-faq,
#section-download #nav-download {
    font-weight: bold;
    /* And whatever other styles the current link should have. */
}

So this works in a mostly declarative way to control the style of the link that the current page belongs in. You can see it in action here: http://entrian.com/source-search/

It's a very clean and simple system once you've set it up, because:

You don't need to mess about with template markup in your links
You don't end up using big ugly switch statements or if / else / else statements
Adding pages to a section Just Works [TM]
Changing the way things look only ever means changing the CSS, not the markup.

I'm not using Django, but this system works anywhere. In your case, where you "set their own respective titles and contents" you also need to set the body id, and there's no other Django markup required.

This idea extends easily to other situations as well, eg. "I want a download link in the sidebar on every page except the download pages themselves." You can do that in CSS like this:

#section-download #sidebar #download-link {
    display: none;
}

rather than having to put conditional template markup in the sidebar HTML.

RichieHindle 2009-06-21 16:01:38

Doesn't this mean a lot of duplicated content in the CSS though?

Net Citizen 2009-06-21 16:17:11

...I mean the style for each link id.

Net Citizen 2009-06-21 16:17:41

It's one line of CSS for each page/section. The style itself only appears once, with a comma-separated list of section/nav pairs before it.

RichieHindle 2009-06-21 16:30:27

ah gotcha, nice.

Net Citizen 2009-06-21 16:55:24

I first found about this technique from here: http://24ways.org/2005/auto-selecting-navigation

Antti Rasinen 2009-06-22 07:46:41

Answer 2

+1 A:

Haven't used Django, but I've dealt with the same issue in Kohana (PHP) and Rails.

What I do in Kohana:

<li><a href="/admin/dashboard" <?= (get_class($this) == 'Dashboard_Controller') ? "class=\"active\"" : NULL ?>>Dashboard</a></li>
<li><a href="/admin/campaigns" <?= (get_class($this) == 'Campaigns_Controller') ? "class=\"active\"" : NULL ?>>Campaigns</a></li>
<li><a href="/admin/lists" <?= (get_class($this) == 'Lists_Controller') ? "class=\"active\"" : NULL ?>>Lists</a></li>

What I do in Rails:

<li><a href="/main" <%= 'class="active"' if (controller.controller_name == 'main') %>>Overview</a></li>
<li><a href="/notifications" <%= 'class="active"' if (controller.controller_name == 'notifications') %>>Notifications</a></li>
<li><a href="/reports" <%= 'class="active"' if (controller.controller_name == 'reports') %>>Reports</a></li>

Abi Noda 2009-06-21 16:41:57

Answer 3

+1 A:

I see only a couple of ways of doing it, while avoiding repeated ifequals:

Javascript. Something along the lines of (jQuery):

var parts = window.location.pathname.split('/');
var page = parts[parts.length-1];
$('#sidebar1 a[href*=' + page + ']').addClass('current');

Change your views to contain a list of pages with their associated titles and URLs and create a {% for %} loop in your template, which will go through that list, and add a single {% ifequal %}.

Option 2 being the favorite from where I stand. If the logic for all of your pages is the same, and only the templates differ, you might consider using the FlatPages model for each of your pages. If the logic is different, and you need different models, you might consider using a menuing app of some sort. A shameless plug: I have a menuing app of my own

oggy 2009-06-21 16:42:29

ansaurus

tags:

views:

answers:

Django: Is there a better way to bold the current page link

related questions