第二章 模板

回顾

如果，完成Hello World这一章的话，应当有一个完全工作的简单的web 应用程序，它有着如下的文件结构，如图2-1:

图2-1

在Eclipse启动Django Server或者执行命令($ python manage.py runserver)来运行应用程序，接着在你的网页浏览器上打开http://127.0.0.1:8000/app网址，就可以访问到一个返回包含“Hello, World. This is first Django page.”的画面。

在Python 中生成HTML 并不好玩，实际上是相当繁琐的，因为必须自行做好HTML 转义以保持应用程序的安全。由于这个原因，Django提供了模版功能，已降低在开发过程中生成HTML的工作量。此外，Django除了本身提供的模版之外，通过配置可以使用Jinja2作为模版引擎。在这一章中将会介绍一些模板基本概念以及基本用法。为了更清楚的演示，在这里将会对模版引擎配置采用两种方式：Django模版和Jinja2，如图2-2:

图2-2

配置完模版引擎后，需要在新建相应的文件夹，来存储模版，文件夹创建后，文件目录结构如图2-3:

图2-3

为了保证能够正确的运行Jinja2的模版，需要安装Jinja2类库，安装方式于安装Django相同，请自行安装。

为什么需要模板

接下来考虑下如何扩充microblog这个小的应用程序。

首先希望微博应用程序的主页上有一个欢迎登录用户的标题，这是这种类型的应用程序的一个“标配”。暂时忽略本应用程序暂未有用户的事实，将会在后面的章节引入用户的概念。

输出一个漂亮的大标题的一个容易的选择就是改变视图功能，输出HTML，也许像这个样子，如图2-4:

图2-4

配置URL分发器，增加一个html的分发，来处理用户的请求，如图2-5:

图2-5

起到Django Server， 看看网页浏览器上的显示情况。在浏览器中输入网址：http://127.0.0.1:8000/app/html。显示画面如图2-6:

图2-6

因为暂时还不支持用户，所以暂时使用占位符的用户对象，有时也被称为假冒或模仿的对象。这样让可以将精力集中关注应用程序的某一方面，而不用花心思在暂未完成的部分上。

希望你同意我的说法，上面的解决方案是非常难看！如果需要返回一个含有大量动态内容的大型以及复杂的HTML 页面的话，代码将会有多么复杂啊！如果需要改变网站布局，在一个大的应用程序，该应用程序有几十个视图，每一个直接返回HTML？这显然不是一个可扩展的选择。

模板从天而降

如果能够保持应用程序与网页的布局或者界面逻辑上是分开的，这样不是显得更加容易组织？难道你不觉得是这样吗？你甚至可以聘请一个网页设计师来设计一个杀手级的网页而你专注于Python 编码。模板可以帮助实现这种分离。因为Django支持多种模版引擎，在这里采用Django自身提供的模版引擎来处理模版，因此，模版的编写符合Django模版引擎。

接下来编写第一个模板文件/templates/django/index.html, 如图2-7：

图2-7

正如你在上面看到，只是写了一个包含大部分标准的HTML页面，唯一的区别是有一些动态内容的在{{ }}中。

现在看看怎样在视图函数中使用这些模板，如图2-8：

图2-8

试着运行下应用程序看看模板是如何工作的。一旦在网页浏览器上呈现该网页(http://127.0.0.1/app)，就可以浏览下HTML 源代码，并与原始的模板内容对比下差别。

为了渲染模板，必须从Django框架中导入一个名为get_template的新函数。此函数需要传入模板名来获取模版的内容，并使用render函数，传入渲染模版所用的参数，该函数返回一个所有变量被替换的渲染的模板。

模板中控制语句

不论Django模版，还是Jinja2模板同样支持控制语句，在{%...%}块中定义控制语句。接下来在模板中添加一个if 声明(文件 /templates/django/index.html)，如图2-9:

图2-9

修改试图中的函数，增加title变量，如图2-10:

图2-10

现在模板变得更加智能了，如果视图函数忘记输入页面标题的参数，不会触发异常反而会出现默认提供的标题。放心地去掉视图函数中render的调用中的title参数，看看if语句是如何工作的！

模板中的循环语句

在microblog应用程序中，登录的用户想要在首页展示他的或者他的联系人列表中用户最近的文章，看看如何才能做到。

首先先创建一些用户以及他们的文章用来展示(文件app/views.py)，如图2-11:

图2-11

为了表示用户的文章，在这里使用了列表，其中每一个元素包含author和body字段。当使用真正的数据库的时候，同样会保留这些字段的名称，因此在设计以及测试模板的时候尽管使用的是假冒的对象，但不必担心迁移到数据库上时，需要更新模板。

在模板这一方面，必须解决一个新问题。列表中可能有许多元素，多少篇文章被展示将取决于视图函数。模板不会假设有多少文章，因此它必须准备渲染视图传送的文章数量。

因此使用for来做到这一点(文件templates/django/posts.html)，如图2-12:

图2-12

接下来在urls.py中配置分发器，如图2-13:

图2-13

简单吧？试试吧，确保给予足够的文章列表。在浏览器中打开URL：http://127.0.0.1/app/posts，看一下运行的结果，如图2-14:

图2-14

模板继承

在microblog应用程序中，在页面的顶部需要一个导航栏。在导航栏里面有编辑账号，登出等等的链接。

可以简单的在index.html模板中添加一个导航栏，但是随着应用的扩展，越来越多的模板需要这个导航栏，因此需要在每一个模板中复制这个导航栏。然而你必须要保证每一个导航栏都要同步，如果存在大量的模板的话，这需要花费很大的力气，来保证所有页面中导航栏的一致性。

相反，可以利用模板继承的特点，来实现这个功能。模版继承功能允许把所有模板公共的部分移除出页面的布局，接着把它们放在一个基础模板中，在其他所有使用它的模板可以导入该基础模板。

接下来就定义一个基础模板，该模板包含导航栏以及上面谈到的标题文件templates/django/base.html，如图2-15:

图2-15

在这个模板中，使用block控制语句来定义派生模板可以插入的地方。block被赋予唯一的名字。

接着剩下的就是修改已经定义好的模版的index.html，使其继承自base.html，如图2-16：

图2-16

修改模版posts.html，同样使其继承自base.html，如图2-17：

图2-17

自定义标签

接下来是本章的最后部分，自定义Tag，并将自定义的Tag应用在Microblog中。在这里定义一个简单的Tag，将数字按照每三位一个逗号的方式进行格式化，并进行显示。首先创建一个文件夹(templatetags)用来保存自定义标签的文件，这个目录需要与models.py同级，并在其中创建一个app_extras.py文件来建立自定义标签，如图2-18：

图2-18

在settings.py中注册应用app，以保证{% load %}标签能够检测应用下自定一的标签库，如图2-19:

图2-19

向系统注册自定标签库，并定义自定义的标签，如图2-20:

图2-20

修改index.html模版，使用自定义标签来显示未读信息，如图2-21:

图2-21

接下来可以自行启动应用，并查看一下自定义标签的执行效果。在Django中，除了自定标签之外，还可以自定义filter，自定义filter的过程与自定义标签类似，请参考Guild，在这里就不进行讲解了。

结束语

在下一章中，将会讨论到表单。我希望能在下一章继续见到各位！