Django Blog project #3: Using CSS and Template Inheritance

Date: 2008-06-07 | Tags: blogproject, django | 3 Comments

Version 0.0.1 of my new blog had no style. For 0.0.2, I added a little CSS to my Django template to make it look a little better.

Create new Django templates

I created two new Django templates, base.html and frontpage.html. base.html contains all the HTML and CSS that is common to all the web pages that will be on this site. frontpage.html is the template for the front page of my new blog. It uses the object-oriented technique of extending my base.html template. It uses the boilerplate code in base.html and then fills in sections with content specific to the front page. It is similar to server side includes, but more powerful because specific content can be inserted anywhere instead of just at the beginning or end. Django does have an include mechanism which acts like server side includes, but the extension method (also called Template Inheritance) is the preferred way of doing things.

Here is the code for frontpage.html:

{% extends "base.html" %}

{% block main %}
  {% for post in post_list %}
    {{ post }}
    <hr />
  {% endfor %}

{% endblock %}

Here is the code for base.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
body {
 margin: 0;
 padding: 0;
 font-family: Georgia, Times, "Times New Roman", serif;
 color: black;
 width: 600px;
 border-right: 1px solid black;
}
#header {
 background-color: #666;
 border-bottom: 1px solid #333;
}
#sidebarLeft {
 float: left;
 width: 160px;
 margin-left: 10px;
 padding-top: 1em;
}
#mainRight {
 padding-top: 1em;
 margin: 0 2em 0 200px;
}
#footer {
 clear: both;
 background-color: #ccc;
 padding-bottom: 1em;
 border-top: 1px solid #333;
 padding-left: 200px;
}
h2.sidebar {
  font-size: 120%;
}
</style>
<title>{% block title %}Sofeng's Blog Version 0.0.2{% endblock %}</title>
</head>
<body>

<div id="header">
  <h1>Sofeng's Blog Version 0.0.2</h1>
</div>
<div id="sidebarLeft">
  {% block sidebar %}
  <h2 class="sidebar">ABOUT</h2>
  <p>This is my new blog created using <a href="http://www.djangoproject.com">Django</a>,
    a <a href="http://www.python.org">Python</a> web framework. This site is under 
    construction. My current blog is located at: 
    <a href="http://iwiwdsmi.blogspot.com">http://iwiwdsmi.blogspot.com</a>.
  </p>
  {% endblock %}
</div>
<div id="mainRight">
  {% block main %}{% endblock %}
</div>
<div id="footer">
  A <a href="http://www.djangoproject.com/">Django</a> site.
</div> 

</body>
</html>

Modify view to use new template

To use the new template, I created a new view called frontpage in ~/src/django/myblogsite/myblogapp/views.py:

from django.shortcuts import render_to_response
from myblogsite.myblogapp.models import Post

def frontpage(request):
    posts = Post.objects.all()
    post_body_list = [post.body for post in posts]
    return render_to_response('frontpage.html', 
                              {'post_list': post_body_list})

Correction 7/6/2008: I previously had from myblogapp.models import Post on the second line. This works, but is inconsistent with my urls.py below and can (and did for me) cause subtle errors in the future. I corrected the line to read: from myblogsite.myblogapp.models import Post.

Map an URL to the new view

To complete the change, I mapped the url /blog to the new frontpage view in ~/src/django/myblogsite/urls.py:

from django.conf.urls.defaults import *
from myblogsite.myblogapp.views import *

urlpatterns = patterns(
    '',
    (r'^admin/', include('django.contrib.admin.urls')),
    (r'^myview1/$', myview1),
    (r'^blog/$', frontpage),
)

Upload project to Webfaction server

I updated my previous post to include a section on installing Mercurial. Here are my steps for pushing my changes to the server. It's a little more complicated than it should be because I was mucking with the repository, but future pushes should be much easier.

$ hg pull -u --remotecmd /home/sofeng/bin/hg ssh://[email protected]/webapps/django/myblogsite
[email protected]'s password:
pulling from ssh://[email protected]/webapps/django/myblogsite
searching for changes
adding changesets
adding manifests
adding file changes
added 5 changesets with 4 changes to 5 files (+1 heads)
not updating, since new heads added
(run 'hg heads' to see heads, 'hg merge' to merge)
$ hg merge
 local changed templates/base.html which remote deleted
use (c)hanged version or (d)elete? c
3 files updated, 0 files merged, 3 files removed, 0 files unresolved
(branch merge, don't forget to commit)
$ hg commit -m 'commit after merge'
$ hg push --remotecmd /home/sofeng/bin/hg ssh://[email protected]/webapps/django/myblogsite
[email protected]'s password:
pushing to ssh://[email protected]/webapps/django/myblogsite
searching for changes
remote: adding changesets
remote: adding manifests
remote: adding file changes
remote: added 3 changesets with 5 changes to 6 files

Deploy

With my cleanup of the mercurial repository, I didn't have to make any file changes. I just updated the working directory of my project using hg update -C and restarted the Apache web server.

$ cd ~/webapps/django/myblogsite
$ hg update -C
5 files updated, 0 files merged, 0 files removed, 0 files unresolved
$ ~/webapps/django/apache2/bin/restart

Now, pointing my browser at http://saltycrane.com/blog/, shows new version 0.0.2 of my blog!

Here is a snapshot screenshot of my blog version 0.0.2:

Comments

#1 Luis commented on 2008-07-17:

Hello,

How do you manage using css like this:

< link rel="stylesheet" href="css/screen.css" >

#2 sofeng commented on 2008-07-20:

luis,
you need to set up your web server to serve static media files (e.g. your css stylesheet). see my Django blog project post #5

#3 website design london commented on 2010-04-06:

This is great....Thanks for sharing with us.

SaltyCrane Blog — Notes on JavaScript and web development

Django Blog project #3: Using CSS and Template Inheritance

Comments

Links