在这一章， 我们介绍Django模版引擎， 同时展示怎样引用静态文件和多媒体文件，这两种都可以继承到应用网页中。
4.1 使用模版
截至到这个点， 我们只是连接URL和视图。然而，Django框架是基于MVT(Model-View-Template)架构。在这一章， 我们将会深入模版怎样和视图结合起来， 接下来几章，和模型结合起来。
为什么使用模版？为了复用html代码， 很多东西都是 重复的。
配置模版文件夹
在Django项目目录(e.g.<workspace>/tango_with_django_project/)，创建一个templates的文件夹。在templates文件夹中创建rango目录。这个目录存储这和rango应用相关的模版。
把模版加入到项目设置中,不要写死路径。
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
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',
],
},
},
]
添加一个模版
在 templates/rango/文件夹下新建一个文件，添加如下内容。
<!DOCTYPE html>
<html>
<head>
<title>Rango</title>
</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>
然后在rango/views.py中， 修改
from django.shortcuts import render
from django.http import HttpResponse
from django.shortcuts import render
# Create your views here.
def index(request):
# return HttpResponse("Rango says hey there partner!")
context_dict = {'boldmessage': "Crunchy, creamy, cookie, candy, cupcake!"}
return render(request, 'rango/index.html', context=context_dict)
def about(request):
return HttpResponse("Rango says here is the about page.")
4.2 静态多媒体文件
配置静态多媒体文件夹
在你的项目主目录，建一个static的文件夹，在static文件夹中创建一个images文件夹，在images这个目录下放入一个图片（rango.jpg）
修改主目录setting.py
STATIC_DIR = os.path.join(BASE_DIR, 'static') STATICFILES_DIRS = [STATIC_DIR, ] STATIC_URL = '/static/'
在浏览器中访问 http://127.0.0.1:8000/static/images/rango.jpg即可看到刚刚那张图片。
静态文件和模版
<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<title>Rango</title>
</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>