赵走x博客 - 开发者的网上家园

8、模板进阶

资源编号:76314 Tango with Django Python Web 热度：89

目前，我们为 Rango 应用的几个页面创建了 HTML 模板。你可能发现了，不同模板之间有很多 HTML 代码是重复的，这违背了 DRY 原则。此外，你可能也注意到了，链接中使用的是硬编码的 URL 路径。这些问题会导致网站难以维护，倘若想改变网站的整体结构，或者调整 URL 路径，每个模板都要修改。

目前，我们为 Rango 应用的几个页面创建了 HTML 模板。你可能发现了，不同模板之间有很多 HTML 代码是重复的，这违背了 DRY 原则。此外，你可能也注意到了，链接中使用的是硬编码 的 URL 路径。这些问题会导致网站难以维护，倘若想改变网站的整体结构，或者调整 URL 路 径，每个模板都要修改。

本章使用模板继承解决第一个问题，使用 URL 模板标签解决第二个问题。先看第二个问题。

# 8.1 使用相对 URL

目前，模板中的链接地址使用的是硬编码的 URL，例如 `<a href="/rango/about/">About</a>`。这 样做的缺点是一旦修改了 urls.py 中的 URL 映射，就要更新对应的所有 URL 引用。正确的方法是 使用模板标签 url 查询 urls.py 文件中的 URL 模式，动态插入 URL 路径。

在模板中使用相对 URL 十分简单。若想链接到关于页面，可以在模板中插入下面这行代码：

`<a href="{% url 'about' %}">About</a> `Django 模板引擎会检查 urls.py 模块中有没有 name 属性的值为 about 的 URL 模式，然后反向匹配 URL。这样一来，如果修改了 urls.py 模块中的 URL 映射，无需一个一个修改模板。

URL 模式也可以不通过名称引用，而是直接引用视图，如下所示：

`<a href="{% url 'rango.views.about' %}">About</a> `此时，必须保证 rango 应用的 views.py 模块中有名为 about 的视图。 Rango 应用的 index.html 模板中有个带参数的 URL，即 `/rango/category/{{ category.slug }}`。为了避 免硬编码，我们可以使用 url 模板标签，并指定 URL（或视图）的名称和分类的别名，如下所 示：
```
{% for category in categories %}
	<li> 
		<a href="{% url 'show_category' category.slug %}"> {{ category.name }} </a> 
	</li> 
{% endfor %}
```
别忙着把所有模板中硬编码的 URL 都更改为相对 URL，在此之前我们先利用模板继承调整模板 的结构，去除重复。

本书只专注于开发一个 Django 应用，即 Rango。然而，你的 Django 项目中可能有多个应 用，说不定有几百个 URL。这就引出一个问题：这么多 URL 要怎么组织呢？毕竟两个应用 中可能存在同名视图，从而导致冲突。

为了解决这个问题，Django 为各应用的 URL 配置模块提供了命名空间。在应用的 urls.py 模 块中加上 app_name 变量就设定了命名空间。下述示例把 Rango 应用的命名空间设为 rango。
```
from django.conf.urls import url from rango import views

app_name = 'rango' 
urlpatterns = [
		url(r'^$', views.index, name='index'),
		... 
]

```
添加 app_name 变量后，要像下面这样引用 Rango 应用中的 URL：
```
<a href="{% url 'rango:about' %}">About</a>
```
url 标签中的冒号负责分开命名空间和 URL 名称。

这是个高级功能，同一个项目中有多个应用时才能用得到，不过现在知道也没什么坏处。

# 8.2 去除重复

几乎每个专业的网站都有一系列重复的组件，例如页头、侧边栏和页脚，但是每个页面都重复编 写这些组件的 HTML 显然是不明智的。试想，如果要调整网站的页头呢？你要修改每个页面，换 用新的页头。这是个费时的工作，而且可能出现人为错误。

为免浪费时间复制粘贴 HTML 标记，我们可以利用 Django 模板引擎提供的模板继承功能尽量避 免重复。

使用模板继承的基本步骤如下。

➊ 找出模板中重复出现的部分，例如页头、侧边栏、页脚和内容区。有时，你可以把各页面 的结构画在纸上，这样便于找出通用的部分。

➌ 为应用的不同页面创建专门的模板，都继承自基模板，然后指定各区块的内容。

### 在基模板中定义重复出现的 HTML

显然，目前我们创建的模板有很多重复的 HTML 代码。下面把各页面显示的具体内容剔除，得到 各模板重复使用的骨架结构。

```
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rango</title>
</head>
<body>
    
</body>
</html>
```

我们暂且把这个 HTML 页面作为 Rango 应用的基模板。把上述代码保存在 templates/rango/ 目录 中的 base.html 文件里。
>DOCTYPE 放在开头
记住，<!DOCTYPE html> 声明必须放在模板的第一行。如若不然，渲染得到的页面可能不符 合 W3C HTML 指导方针。

### 定义区块

创建好基模板之后，接下来要指明模板中的哪些部分可由继承它的模板覆盖。为此，要使用 block 标签。例如，可以像下面这样在 base.html 模板中添加 body_block 区块：

```
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rango</title>
</head>
<body>
    {% block body_block %}
    {% endblock %}
</body>
</html>
```

还记得吗，Django 模板标签放在 {% 和 %} 之间。因此，区块以 {% block <NAME> %} 开头，其中 `<NAME> `是区块的名称。区块必须以 endblock 结尾，而且也要放在 {% 和 %} 之间，即 {% endblock %}。

可以为区块指定默认内容，在子模板没有提供该区块的内容时使用（见 8.3 节）。指定默认内容 的方法是在 {% block %} 和 {% endblock %} 之间添加 HTML 标记，如下所示。
```
{% block body_block %} 
		This is body_block's default content.
{% endblock %}
```
创建各页面的模板时，我们将继承 rango/base.html 模板，然后覆盖 body_block 区块的内容。模板 中的区块数量不限，可以根据需要定义。例如，可以创建页面标题区块、页脚区块、侧边栏区 块，等等。区块是 Django 模板系统一个特别强大的功能，详情参见 Django 文档。

>提取通用结构
在基模板中要尽量提取重复出现的内容。这样做看起来麻烦，但是后期节省的维护时间远比 这多。
思考是痛苦的，但总比做很多单调的工作要好！

### 进一步抽象

了解区块的作用之后，下面进一步抽象基模板。打开 rango/base.html 模板，像下面这样修改：
```
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rango -
        {% block title_block %}
            How to Tango with Django!
        {% endblock %}
    </title>
</head>
<body>
    <div>
        {% block body_block %}
        {% endblock %}
    </div>
    <hr/>
    <div>
        <ul>
            <li><a href="{% url 'add_category' %}">Add New Category</a></li>
            <li><a href="{% url 'about' %}">About</a></li>
            <li><a href="{% url 'index' %}">Index</a> </li>
        </ul>
    </div>
</body>
</html>
```

上述代码对基模板做了两处改动：

❏ 首先是增加了 title_block 区块。这样在子模板中可以为各页面定制标题。如果子模板没 有覆盖这个区块，使用默认值 How to Tango with Django!，得到的页面标题为 Rango How to Tango with Django!。请仔细看一下上述代码片段中的 `<title> `标签。

❏ 把 index.html 模板中的几个链接放在 HTML `<div> `标签里，放到 body_block 区块下面。这 样所有继承的子模板都将具有这些链接。这组链接前面有条水平线（`<hr />`），目的是从 视觉上把链接与 body_block 区块分开。

# 8.3 模板继承

创建好基模板之后，接下来要更新其他模板，让它们继承基模板。先重构 rango/category.html 模 板。

首先把模板中重复的 HTML 代码删除，只留下对所在页面有用的模板标签或命令。然后在模板的 开头添加下面这行代码：
```
{% extends 'rango/base.html' %}
```
extends 命令接受一个参数，即要扩展（继承）的模板。这个参数的值是个路径，相对项目的 templates 目录。例如，Rango 应用中的模板都继承 rango/base.html，而不是 base.html。继续修改 category.html 模板，如下所示：

```
{% extends 'rango/base.html' %}
{% load staticfiles %}

{% block title_block %}
    {{ category.name }}
{% endblock %}

{% block body_block %}
    {% if category %}
        <h1>{{ category.name }}</h1>
        {% if pages %}
            <ul>
            {% for page in pages %}
                <li><a href="{{ page.url }}">{{ page.title }}</a> </li>
            {% endfor %}
            </ul>
        {% else %}
            <strong>No pages currently in category.</strong>
        {% endif %}
        <a href="{% url 'add_page' category.slug %}">Add a Page</a>
    {% else %}
        The specified category does not exist!
    {% endif %}
{% endblock %}

```

>◆加载 staticfiles◆
用到静态文件的每个模板都要在文件顶部添加 {% load staticfiles %}。否则会导致错误！ 对 Django 模板而言，必须在用到模块的每个模板中导入模块。这与面向对象编程语言（例 如 Java）有所不同。在面向对象编程语言中，导入的模块会沿着类继承体系向下延伸。注意 我们是如何使用 url 模板标签引用` rango/<category-name>/add_page/ `URL 模式的。 category.slug 作为参数传给 url 模板标签，Django 模板引擎会据此生成正确的 URL。

现在 category.html 模板继承自 rango/base.html，并扩展了 title_block 和 body_block 区块，变得 简洁多了。category.html 模板不必是完整的 HTML 文档，因为 base.html 提供了所需的结构。我们 只需在基模板的基础上添加所需的内容，这样便能渲染得到完整的 HTML 文档，发给客户端。渲 染得到的 HTML 文档符合标准，包含所需的各部分标记，例如第一行的文档类型声明。

# 8.4 render() 函数和 request 上下文

视图有多种渲染模板的方式，不过首选的是 Django 提供的简洁方式，即 render() 函数。 render() 函数的第一个参数是 request 上下文，里面有大量信息，包括会话和用户等等，详情参 见 Django 文档。把 request 传给模板意味着，我们可以在模板中访问其中的信息。下一章将访问 关于用户的信息。现在请检查一下所有视图，确保都是用 render() 函数渲染模板的。如若不然， 后面就得不到所需的信息。

如何检查？

下面以 about() 视图为例说明如何检查和修改。about() 视图目前的实现方式是硬编码响应 字符串，如下所示。注意，我们只是发送字符串，没有用到传入视图的 request 参数。

```
def about(request):
    return HttpResponse('Rango says: Here is the about page. <a href="/rango/">Index</a>')
```

为了改用模板，我们要调用 render() 函数，并传入 request 对象。这样修改之后，模板引擎 就能访问关于请求（例如请求类型，GET 或 POST）和用户（例如用户的状态，参见第 9 章）的信息了。

```
def about(request):
    # 打印请求方法，是 GET 还是 POST
    print(request.method)
    # 打印用户名，如未登录，打印“AnonymousUser”
    print(request.user)
    return render(request,'rango/about.html',{})
```

注意，render() 函数的最后一个参数是上下文字典，用于把额外的数据传给 Django 模板引 擎。因为这里没什么额外数据要传给模板，所以使用一个空字典。

# 8.5 自定义模板标签

如果能在每个页面的侧边栏中展示有哪些分类可浏览就好了。根据目前所学，这个想法可以这样 实现：

❏ 在 base.html 模板中添加一些代码，显示分类列表

❏ 在每个视图中通过 Category 对象获取所有分类，通过上下文字典传给模板

可是这样的实现方式非常不好，因为我们要在所有视图中重复添加相同的代码。为了不违背 DRY 原则，我们可以自定义模板标签，把相关的操作封装起来。

### 定义模板标签

新建 rango/templatetags 目录，然后在其中新建两个模块：一个命名为 __init__.py，内容为空；另 一个命名为 rango_template_tags.py，写入下述代码。

```
from django import template
from rango.models import Category

@register.inclusion_tag('rango/cats.html')
def get_category_list():
    return {'cat': Category.objects.all()}

```

这段代码定义了一个名为 get_category_list() 的函数，返回结果为分类列表。但是从 register.inclusion_tag() 装饰器可以看出，这个函数需要 rango/cats.html 模板的支持。创建这个 模板，写入下述 HTML 标记。

```
<ul>
    {% if cats %}
        {% for c in cats %}
            <li><a href="{% url 'show_category' c.slug %}">{{ c.name }}</a> </li>
        {% endfor %}
    {% else %}
        <li><strong>There are no categories present.</strong></li>
    {% endif %}
</ul>
```

为了在 base.html 模板中使用这个模板标签，首先要在文件顶部添加 {% load rango_template_tags %}。然后创建一个区块，表示侧边栏。在侧边栏中通过下述代码调用我们自定义的模板标签。

```
<div>
        {% block sidebar_block %}
            {% get_category_list %}
        {% endblock %}
    </div>
```

试试看。现在继承自 base.html 模板的每个页面都将显示分类列表（稍后移到侧边）。

### 参数化模板标签

为了提高灵活性，可以参数化模板标签。举个例子：突出显示当前查看的分类。添加参数很简 单，参照下述代码修改 get_category_list() 函数。
```
def get_category_list(cat=None):
	return {'cats': Category.objects.all(), 'act_cat': cat}
	```

注意，cat 参数是可选的，如果未传入，默认为 None。 接下来修改 base.html 模板，传入当前查看的分类（仅当存在时）。
```
<div>
	{% block sidebar_block %} 
		{% get_category_list category %} 
	{% endblock %} 
</div>
```
此外，还要修改 cats.html。
```
<ul>
    {% if cats %}
        {% for c in cats %}
            {% if c == act_cat %}
                <li>
                    <strong>
                        <a href="{% url 'show_category' c.slug %}">{{ c.name }}</a>
                    </strong>
                </li>
            {% else %}
                <li>
                    <a href="{% url 'show_category' c.slug %}">{{ c.name }}</a>
                </li>
            {% endif %}
        {% endfor %}
    {% else %}
        <li><strong>There are no categories present.</strong></li>
    {% endif %}
</ul>
```

这里我们检查显示的分类与 for 循环当前遍历的分类是否相同（c == act_cat），如果相同，通 过 <strong> 标签加粗，突出显示当前查看的分类名。

# 8.6 小结

本章讨论了下述内容：

❏ 使用 url 模板标签避免硬编码 URL 
❏ 借助模板继承减少样板代码量
❏ 通过自定义模板标签减少视图中重复的代码

经过这些改进之后，模板代码比以前更简洁，也更易维护了。当然，Django 模板的功能还有很 多，详情参阅 Django 文档。