4.1 使用模板
配置模板目录
在 Django 项目配置目录（/tango_with_django_project/）中创建一个名为 templates 的目录。注意，这个目录要与项目的 manage.py 脚本放在同一级。在这个新目录中再创建一个目录，名为 rango。我们将在 /tango_with_django_project/templates/rango/ 目录中存放
Rango 应用的模板。
接下来要告诉 Django 你把模板放在什么位置。打开项目的 settings.py 文件，找到 TEMPLATES。如果项目是使用 Django 1.9 创建的，TEMPLATES 的默认内容如下：
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
为了告诉 Django，模板在何处，我们要修改 DIRS 列表（默认为空）。把这个键值对改成下面这样：
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
'DIRS': [TEMPLATE_DIR, ]
添加一个模板
模板目录和路径设置好之后，在 templates/rango/ 目录中创建一个文件，命名为 index.html。在这个新文件中写入下述 HTML 代码。
<!DOCTYPE html>
{
% load static %} <!-- 新增 -->
<html>
<head>
<title>Rango</title>
<!-- CSS -->
<!-- JavaScript -->
</head>
<body>
<h1>Rango says...</h1>
<div>
hey there partner! <br />
<strong>{
{
boldmessage }}</strong><br />
</div>
<div>
<a href="/rango/about/">About</a><br />
</div>
</body>
</html>
这里有些内容不是 HTML，而是 {
{ boldmessage }} 形式。这是 Django 模板变量。
为了使用这个模板，我们要调整一下前面编写的 index() 视图，不再分发一个简单的响应对象，而是分发这个模板。
打开 rango/views.py 文件，看看文件顶部有没有下面这个 import 语句。
from django.shortcuts import render
def index(request):
# 构建一个字典，作为上下文传给模板引擎
# 注意，boldmessage 键对应于模板中的 {
{ boldmessage }}
context_dict = {
'boldmessage': "Crunchy, creamy, cookie, candy, cupcake!"}
# 返回一个渲染后的响应发给客户端
# 为了方便，我们使用的是 render 函数的简短形式
# 注意，第二个参数是我们想使用的模板
return render(request, 'rango/index.html', context=context_dict)
首先，构建一个字典，设定要传给模板的数据。然后，调用 render() 辅助函数。这个函数的参数是 request 对象、模板的文件名和上下文字典。render() 函数将把上下文字典中的数据代入模板，生成一个完整的 HTML 页面，作为 HttpResponse 对象返回，分发给 Web 浏览器。
4.2 伺服静态文件
配置静态文件目录
首先要指定一个目录，用于存放静态文件。在项目配置目录中新建一个目录，名为 static，然后在static 目录中再新建一个目录，名为 images。确保 static 目录与前面创建的 templates 目录位于同一级。然后，在 images 目录中放一个图像。
与前面的 templates 目录一样，我们要告诉 Django 这个 static 目录的路径。为此，还要编辑项目的settings.py 模块。在这个文件中，我们要定义一个变量，指向 static 目录，并在一个数据结构中告诉 Django 这个目录的路径。
STATIC_DIR = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = [STATIC_DIR, ]
STATIC_URL = '/static/'
STATIC_DIR 和 STATICFILES_DIRS 两个变量设定静态文件在电脑中的位置；STATIC_URL 变量则指定启动 Django 开发服务器后通过什么 URL
访问静态文件。例如，把 STATIC_URL 设为 /static/ 后，我们可以通过 http://127.0.0.1:8000/static/访问里面的静态内容。前两个变量相当于服务器端的位置，而第三个变量是客户端访问静态内容的位置。
在模板中引用静态文件
下面说明如何引用静态文件。打开 /templates/rango/ 目录中的 index.html 模板，参照下述代码修改。
<!DOCTYPE html>
{
% load static %} <!-- 新增 -->
<html>
<head>
<title>Rango</title>
<!-- CSS -->
<!-- JavaScript -->
</head>
<body>
<h1>Rango says...</h1>
<div>
hey there partner! <br />
<strong>{
{
boldmessage }}</strong><br />
</div>
<div>
<a href="/rango/about/">About</a><br />
<img src="{% static 'images/rango.jpg'%}"
alt="Picture of Rango"/><!--新增-->>
</div>
</body>
</html>
新增的第一行（{% load staticfiles %}）告诉 Django 模板引擎，我们将在模板中使用静态文件。这样便可以在模板中使用 static 模板标签引入静态目录中的文件。static “images/rango.jpg” 告诉 Django，我们想显示静态目录中名为 images/rango.jpg 的图像。static 标签会在images/rango.jpg 前加上 STATIC_URL 指定的 URL，得到 /static/images/rango.jpg。Django 模板引擎生成的 HTML 如下：
<img src="/static/images/rango.jpg" alt="Picture of Rango" />
4.3 伺服媒体文件
修改 settings.py
首先，打开 Django 项目配置目录中的 settings.py 模块。我们将在这个文件中添加一些内容。与静态文件一样，媒体文件也放在文件系统中专门的一个目录中。因此，要告诉 Django 这个目录的位置。
在 settings.py 模块的顶部，找到 BASE_DIR、TEMPLATE_DIR 和 STATIC_DIR 变量。在它们后面加上以下。MEDIA_ROOT 变量告诉 Django 在哪里寻找上传的媒体文件，MEDIA_URL 变量则指明通过什么 URL 伺服媒体文件。这样设置之后，上传的 cat.jpg 文件在 Django 开发服务器中将通过 http://localhost:8000/media/cat.jpg 访问。
MEDIA_DIR = os.path.join(BASE_DIR, 'media')
MEDIA_ROOT = MEDIA_DIR
MEDIA_URL = '/media/'
找到 settings.py 文件中的 TEMPLATES 列表，里面嵌套着 context_processors 列表。在context_processors 列表中添加一个处理器，django.template.context_processors.media。添加之后，context_processors 列表应该类似下面这样：
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [TEMPLATE_DIR],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
'django.template.context_processors.media',
],
},
},
]
调整 URL
在开发环境中伺服媒体文件的最后一步是，让 Django 使用 MEDIA_URL 伺服媒体内容。打开项目的urls.py 模块，修改 urlpatterns 列表，调用 static() 函数：
from django.urls import path
from rango import views
from django.conf.urls import include
from django.conf.urls import url
# 新增
from django.conf import settings
# 新增
from django.conf.urls.static import static
urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^rango/',include('rango.urls')),
url(r'^admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) # 新增
4.4 基本流程
至此，你应该知道如何设置和创建模板，知道如何在视图中使用模板，知道如何设置并让 Django开发服务器伺服静态媒体文件，以及如何在模板中引入图像了。本章的知识可不少！
- 本章的重点是知道如何创建模板，并在 Django 视图中使用模板。这其中涉及好几步，不过多做几次就会习惯的。
➊ 首先，创建要使用的模板，保存到 templates 目录中（在项目的 settings.py 模块中设定）。模板中可以使用 Django 模板变量（例如 { { variable_name }}）或模板标签。模板变量的值在相应的视图中设定。
➋ 在应用的 views.py 文件中找到所需的视图，或者新建一个。
➌ 把视图相关的逻辑写在视图函数中。例如，从数据库中检索数据，存到列表中。
➍ 在视图中构建一个字典，通过模板上下文传给模板引擎。
➎ 使用 render() 辅助函数生成响应。这个函数的参数是请求对象、模板文件名和上下文字典。
➏ 如果还没把视图映射到 URL 上，修改项目的 urls.py 文件和应用的 urls.py 文件。 - 在网页中引入静态文件的步骤也很重要，应该熟练掌握。具体方法参见下述步骤。
➊ 把想用的静态文件放到项目的 static 目录中。这个目录在项目的 settings.py 模块中的STATICFILES_DIRS 列表中设定。
➋ 在模板中引用静态文件。例如，图像通过 标签插入 HTML 页面。
➌ 记得在模板中加上 {% load staticfiles %}，然后使用 {% static “” %} 标签引用静态文件。把 替换成图像或其他资源的路径。只要想引用静态文件，使用static 模板标签。 - 伺服媒体文件的步骤与伺服静态文件差不多。
➊ 把媒体文件放到项目的 media 目录中。这个目录由项目的 settings.py 模块中的 MEDIA_ROOT变量设定。
➋ 在模板中使用 { { MEDIA_URL }} 上下文变量引用媒体文件。例如，引用上传的图像cat.jpg：
<img src="{
{ MEDIA_URL}}cat.jpg" />
小结：
- 在html文件中用{% load static %}替换{% load staticfiles %}