分类： Web开发
2014-12-07 20:28:57
在Part1中，我们完成了本项目的基本框架搭建，并完善了一下管理后台，现在我们来看如何设计面向公共的页面部分。
8.创建模板
首先，请在blog文件夹下建立templates文件夹，然后，在templates文件夹中建立一个叫bog的文件夹，在这个bog文件夹下新建一个archive.html文件，这个文件的路径应该是：
bog/templates/bog/archive.html
把下面这些代码添加到archive.html中：
bog/templates/bog/archive.html：
{% for post in posts %} <h2>{{ post.title }}h2> <p>{{ post.timestamp|date:"Y-m-d" }}p> <p>{{ post.body }}p> {% endfor %}
9.编写视图
编辑bog/views.py 文件，添加下面的内容：
bog/views.py：
from django.template import loader, Context from django.http import HttpResponse from blog.models import BlogPost def archive(request): posts = BlogPost.objects.all() t = loader.get_template("blog/archive.html") c = Context({ 'posts': posts }) return HttpResponse(t.render(c))
我们来简单分析一下这个视图，在第三行我们从模型中导入了BlogPost对象，这样，我们便可以在第五行，用BlogPost.objects.all() 来获取数据库中所有的文章内容。
第6行：我们只要告诉Django模板的名字，就能创建模板对象t,因为这个模板保存在应用的templates文件夹下，所以Django很轻松就能找到它。
第7行：Django渲染的数据是由一个字典类的对象context提供的，这里的context c只有一对键与值；
第8行：每个Django视图函数都会返回一个HttpResponse的对象，我们用render方法把字符串传递给HttpResponse，最终实现在用户的浏览器端看到整个页面。
10.创建Url模式
先在blog文件夹下创建一个叫url.py的文件，然后添加如下内容：
blog/urls.py ：
from django.conf.urls import patterns, url from blog import views urlpatterns = patterns('', url(r'^$', views.archive), )
我们还需要修改项目的urls.py,编辑blogproject/urls.py 文件，让它变成下面这样：
blogproject/urls.py ：
from django.conf.urls import patterns, include, url from django.contrib import admin urlpatterns = patterns('', url(r'^blog/', include('blog.urls', namespace="blog")), url(r'^admin/', include(admin.site.urls)), )
上面这个操作做完后，我们打开浏览器，在地址栏中输入：
可以看到我们的博客页面：
11.扩展模板
看上去很简陋是不是？要知道，我们的文章只是介绍编程这一块的内容，美术设计这种事，还是留给专业的的人员来干吧。他们可以对现有的模板进行各种美化，最终变成大家喜闻乐见的样子。
讲到页面风格，我们引申出一个话题，如果我们的网站上有好多种页面，比如博客、相册、“关于我们”等等，而且我们希望这些页面都使用统一的风格。最笨的办法是复制粘帖，做出三个差不多的模板。但在Django中，正确的做法是，创建一个基础模板，然后在这之上扩展出其它特定的模板来。
在bog/templates/blog文件夹下新建一个base.html文件，然后加入下列内容：
bog/templates/blog/base.html:
<html> <style type="text/css"> body { color: #000; background: #fff; padding: 0 5em; margin: 0; font-family:Microsoft Yahei; } h1 { color: #fff; padding: 2em 1em; background: #1162A0 } h2 { color: #1162A0; border-top: 1px dotted #fff; margin: 1em 20 } p { margin: 1em 20 } style> <body> <h1>实战Djangoh1> {% block content %} {% endblock %} body> html>
注意把这个文件储存为UTF-8编码。
注意{% block content %} 和{% endblock %} ，这是给要扩展的模板预留的接口。
修改archive.html模板，让它引用这个base.html模板：
bog/templates/bog/archive.html：
{% extends "blog/base.html" %} {% block content %} {% for post in posts %} <h2>{{ post.title }}h2> <p>{{ post.timestamp|date:"Y-m-d" }}p> <p>{{ post.body }}p> {% endfor %} {% endblock %}
最后，刷新一下浏览器，你可以看到如下的页面：
结合前面讲过的官方实例，你可以给这个简易博客应用增加更多的内容，比如，加入一个显示文章内容的页面，增加一个“关于”我们的页面，等等。技能只有在不断的练习中才能进步，不要仅仅满足于“把这些内容看懂”。
下一次，舍得要给大家介绍一个比较有趣的实例，叫网络相册，在那里，你可以看到更多有用的技巧。
附上本实例的源代码下载地址：
【The End】
本文版权归所有，欢迎转载，转载请注明作者和出处。谢谢！
作者：
首发：舍得学苑@博客园
