Django Blog project #3: Using CSS and Template Inheritance
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 templatesI 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:
Related posts:
Django Blog Project #1: Creating a basic blog
Django Blog Project #2: Deploying at Webfaction
Django Blog Project #4: Adding post metadata
Django Blog Project #5: YUI CSS and serving static media
