Building up a useful base template for a site largely consists of determining what the site’s overall look and feel will be, writing out the appropriate HTML to support it, and then deter-mining which areas will need to vary from page to page and turning them into blocks.
For this blog, let’s go with a common visual layout—a header at the top of the page with room for a site logo, and two columns below it. One column will contain the main content of the page, the other a sidebar with navigation, metadata, and other useful information.
In HTML terms, this works out to three divelements: one for the header area, then one each for the content area and the sidebar. The structure looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
</body>
</html>
Note that I’ve gone ahead and filled in some HTML idattributes on these divtags so that it’ll be easy to set up the layout with cascading style sheets (CSS).
Now, one thing that jumps out is the fact that the titleelement is empty. This is definitely something that will vary, according to which part of the site you’re in and what you’re looking at, so let’s go ahead and put a block there:
<title>My weblog {% block title %}{% endblock %}</title>
When you extend this template, you’ll add more things here. The final effect will be to get a title like My weblog | Entries | February 2008, as you’ll see in a moment.
Now, let’s fill in the header. It’s not something that’s likely to change a lot, so you don’t need a block here:
<div id="header">
<h1 id="branding">My weblog</h1>
</div>
Again, I’ve added an idattribute to make it easy to style it later with CSS. For example, you could use an image-replacement technique to replace the text of the h1with a logo.
Since the main content will vary quite a bit, you’ll make it a block:
<div id="content">
{% block content %}
{% endblock %}
</div>
All that’s left is the sidebar. The first thing you’ll need there is a list of links to different things so that visitors can easily navigate around the site. You can do that easily enough (again, using idattributes to make it easy to come back later and style this):
<div id="sidebar">
<h2>Navigation</h2>
<ul id="main-nav">
<li id="main-nav-entries">
<a href="/weblog/">Entries</a></li>
<li id="main-nav-links">
<a href="/weblog/links/">Links</a></li>
<li id="main-nav-categories">
<a href="/weblog/categories/">Categories</a></li>
<li id="main-nav-tags"><a href="/weblog/tags/">Tags</a></li>
</ul>
</div>
But one thing stands out: you have hard-coded URLs here. They match what you’ve set up in your URLConf. But after you went to all the trouble to modularize and decouple them on the Python side, it would be a shame to just turn around and hard-code things in your templates.
A better solution is to use the {% url %}template tag, which—like the permalink decora-tor you used on the get_absolute_url()methods of your models—can perform a reverse lookup in your URLConfto determine the appropriate URL. This tag has quite a few options, but the one you care about right now is pretty simple: you can feed it the name of a URL pat-tern, and it will output the correct URL.
Using the {% url %}tag, you can rewrite your navigation list like so:
<ul id="main-nav">
Now you won’t have to make changes to your templates if you decide to shuffle some URLs around later.
While you’re dealing with the navigation, let’s add a block inside the bodytag:
<body class="{% block bodyclass %}{% endblock %}">
A common technique in CSS-based web design is to use a classattribute on the bodytag to trigger changes to a page’s style. For example, you’ll have a list of navigation options in the sidebar, representing different parts of the blog—entries, links, and so forth—and it would be nice to highlight the part a visitor is currently looking at. By changing the class of the bodytag in different parts of the site, you can easily use CSS to highlight the correct item in the naviga-tion list.
For the rest of the sidebar’s content, it would be nice to have a little explanation of what a visitor is looking at, something like “An entry in my blog, published on February 7, 2008” or
“A list of entries in the category ‘Django.’” You can add a block for that as well:
<h2>What is this?</h2>
{% block whatis %}
{% endblock %}
You’re done with the base template—for now. (You’ll add a few things to it later on.) Here’s what it looks like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>My weblog {% block title %}{% endblock %}</title>
</head>
<body class="{% block bodyclass %}{% endblock %}">
<div id="header">
Now let’s set up some templates that will handle the different main areas of the blog. You’ll want one each for entries, links, tags, and categories. You’ll call the template for entries base_entries.html, and all you really need to do is extend the base template and fill in a couple of blocks:
{% extends "base.html" %}
{% block title %}| Entries{% endblock %}
{% block bodyclass %}entries{% endblock %}