5.1 使用模板
为了创建一个Django网页,我们需要把许多东西都集中到一起.现在我们有两个视图以及一些连接它们的映射.下面我们将学习如何把模板加入到里面.
设计优秀的网站会重用他们的布局结构.你是否看到过同样header和footer的页面,这些重复布局会提高网站的组织性同时会给人连续感.Django提供了与应用逻辑上可分的模板来为开发者更容易的实现这样的设计目标.在本章,你将会创建一个模板来创建一个HTML页面.这个模板将会传递给Django的视图.在第7章,我们会用模板做更复杂的事情.
5.1.1 设置模板目录
为了建立和启动模板,你需要设置一个储存模板的目录.
在你的Django项目目录里(例如<workspace>/tango_with_django_project/)),创建一个新的目录叫做templates.在这个目录里创建另一个rango目录.所以我们将在<workspace>/tango_with_django_project/templates/rango/目录里存放关于rango应用的模板.
为了告诉Django我们的模板在哪里,我们需要修改项目的settings.py文件.找到TEMPLATE_DIRS并把创建的templates目录路径加入到里面.
略
5.1.2 动态路径
略
5.1.3 添加模板
在我们创建模板目录和设置好路径以后,我们需要在template/rango/目录里建立一个叫做index.html的文件,在新文件里加入下面代码:
<!DOCTYPE html>
<html>
<head>
<title>Rango</title>
</head>
<body>
<h1>Rango says...</h1>
hello world! <strong>{{ boldmessage }}</strong><br />
<a href="/rango/about/">About</a><br />
</body>
</html>这个HTML代码创建一个问候用户的简单HTML页面.你可能注意到了在上面有一段非HTML代码{{boldmessage}}.这是Django模板的变量,他可以在输出时为这个变量赋值.一会我们就会用它.
为了使用这个模板,我们需要重新修改一下我们先前创建的index()视图.这次我们不让他传递简单的信息,而是让他返回我们的模板.
在rango/views.py里,确定文件头部有如下代码.
from django.shortcuts import render修改index()视图函数如下,注释解释每行作用.
def index(request):
# Construct a dictionary to pass to the template engine as its context.
# Note the key boldmessage is the same as {{ boldmessage }} in the template!
context_dict = {'boldmessage': "I am bold font from the context"}
# Return a rendered response to send to the client.
# We make use of the shortcut function to make our lives easier.
# Note that the first parameter is the template we wish to use.
return render(request, 'rango/index.html', context_dict)首先我们建立一个在模板中使用的字典,然后我们调取render()函数.这个函数接受用户的request,模板名称和内容字典作为参数.这个render()函数将会把这些参数聚合到一起生成一个完整的HTML页面.然后返回给用户的浏览器.
当模板文件被加载到Django模板系统里时,它模板内容也会被创建.在简单的例子里模板的内容是字典里的模板变量对应的Python变量.在我们早先创建的模板文件,我们创建了一个叫做boldmessage的模板变量.在index(request)视图例子中,字符串I am bold font from the context映射到模板变量boldmessage.所以字符串I am bold font from the context将会替换模板里所有的{{ boldmessage }}.
现在你已经更新了视图,运行Django服务并访问 http://127.0.0.1:8000/rango/ .你讲会看到如下图所示.
如果你没有看到上图,试着读读错误日志重新检查一下刚才修改的文件.确定所有所有的更改都正确.通常都是在settings.py文件中设置模板路径产生的错误.有时候需要添加print语句来输出BASE_DIR和TEMPLATE_PATH,确保它们俩设置的正确性.
这个例子展示了在视图里如何使用模板.然而我们仅仅接触了一些Django模板方面的功能.在我们的教程里将会接触到更复杂的模板应用.同时你可以参考templates from the official Django documentation.
5.2 提供静态媒体
现在Rango网站确实比较原始,没有样式也没有图片.为了增加样式和引入动态行为我们可以在我们的网站里加入CSS,Javascript和图像这些静态媒体.这些文件和网页有一些不同.这是因为它们不想HTML页面是生成出来的.这章节将会教你如何在Django项目里设置静态媒体.我们将会为我们的模板添加一些静态媒体.
5.2.1 设置静态媒体目录
为了设置静态媒体,你需要设立存储它们的目录.在你的项目目录(例如<workspace>/tango_with_django_project/),创建叫做static的目录.在static里再创建一个images目录.
现在在static/images目录里放置一个图片.如下图所示我们选择一张变色龙的图案来做我们项目的吉祥物.
略
5.3 静态媒体文件和模板
现在你已经为你的Django项目设置了静态媒体,你可以在你的模板里加入这些媒体.
下面将展示hi如何加入静态媒体,打开位于<workspace>/templates/rango目录的index.html文件.像下面一样修改HTML源代码.新加入两行用注释标示.
<!DOCTYPE html>
{% load staticfiles %} <!-- New line -->
<html>
<head>
<title>Rango</title>
</head>
<body>
<h1>Rango says...</h1>
hello world! <strong>{{ boldmessage }}</strong><br />
<a href="/rango/about/">About</a><br />
<img src="{% static "images/rango.jpg" %}" alt="Picture of Rango" /> <!-- New line -->
</body>
</html>首先,我们需要使用{% load static %}标签来使用静态媒体.所以我们才可以用{% static "rango.jpg" %}在模板里调用static文件.Django模板标签用{ }来表示.在这个例子里我们用static标签,它将会把STATIC_URL和rango.jpg连接起来,如下所示.
<img src="/static/images/rango.jpg" alt="Picture of Rango" /> <!-- New line -->如果因为什么原因图片不能加载我们可以用一些文本来代替.这就是alt属性的作用 - 如果图片加载失败就显示alt属性中的文本.
好了,让我们再次运行Django服务访问http://127.0.0.1:8000/rango.幸运的话可以看到下图.
当你希望在模板里使用静态媒体你需要调用{% static %}函数.下面的代码将展示给你如何在你的模板里添加Javascript,CSS和图片.
<!DOCTYPE html>
{% load static %}
<html>
<head>
<title>Rango</title>
<link rel="stylesheet" href="{% static "css/base.css" %}" /> <!-- CSS -->
<script src="{% static "js/jquery.js" %}"></script> <!-- JavaScript -->
</head>
<body>
<h1>Including Static Media</h1>
<img src="{% static "images/rango.jpg" %}" alt="Picture of Rango" /> <!-- Images -->
</body>
</html>很显然你需要引入的静态文件需要在你的static目录里.如果文件不存在或者引用错误的话,控制台将会输出错误.试试看引入一个不存在的文件将会发生什么.
5.4 静态媒体服务
现在你可以使用静态文件,让我们看看如何上传媒体.许多网站提供了上传图像的功能.这章我们将展示如何为你的Django项目开发一个简单的媒体服务.在开发媒体服务中需要用到的文件上传表格我们将会在第9章里接触到.
那么,我们怎么样才能开发媒体服务呢?第一步是需要在我们Django项目根目录里(比如<workspace>/tango_with_django_project/)创建一个新的目录,名字叫media.这个目录就在templates和static同级目录里.在你创建目录后,需要要修改位于设置目录(例如<workspace>/tango_with_django_project/tango_with_django_project/)里的urls.py文件.修改如下.
# At the top of your urls.py file, add the following line:
from django.conf import settings
# UNDERNEATH your urlpatterns definition, add the following two lines:
if settings.DEBUG:
urlpatterns += patterns(
'django.views.static',
(r'^media/(?P<path>.*)',
'serve',
{'document_root': settings.MEDIA_ROOT}), )通过导入django.conf的settings模块我们可以得到我们项目里settings.py文件的变量.接下来的条件判断语句判断Django是否处在DEBUG模式.如果DEBUG被设定为True,那么就会在urlpatterns加入URL匹配模式.所有以media/开头的青豆都会传递给django.views.static视图.这个视图将会把上传的媒体传给你.
在修改了urls.py文件后,我们需要修改settings.py文件.我们需要创建MEDIA_URL和MEDIA_ROOT两个变量.
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # Absolute path to the media directory第一个变量MEDIA_URL定义了基地址.如果把MEDIA_URL设置为/media/意味着上传URL为http://127.0.0.1:8000/media/.MEDIA_ROOT用来告诉Django你的上传文件保存在电脑的哪个位置.在上边的例子中,我们用5.1章节设置的PROJECT_PATH变量和/media/连接.就变成了绝对路径<workspace>/tango_with_django_project/media/
没看明白5.4说的是啥玩意，可能因为我用的是Django 1.10
5.5 基本流程
学完这章,你应当学会如何设置和创建模板,在你的视图里使用模板,设置和使用Django来发送静态媒体文件,包括模板里的图片和为了文件上传设置Django静态媒体服务.我们已经学了很多了!
创建模板并在视图里使用是这章的关键.它需要一些步骤,但是当你尝试几次后就非常容易掌握了.
首先,创建你希望使用的模板并把它保存在templates目录里,这个目录需要你写入settings.py文件.你可以在模板里使用Django模板变量(例如{{ bariable_name }}).你可以在视图里更换这些变量.
在应用的views.py文件里查找或者创建一个新的视图.
增加视图逻辑.例如你可以从数据库里获得数据.
在视图里,创建一个字典对象可以吧模板内容传递给模板引擎.
使用render()函数来生成返回.确保引用request,然后是模板文件,最后是内容字典!
如果你还没有修改urls.py文件或者应用中的urls.py中的映射,你需要修改一下.
在你的页面上获取一个静态媒体文件也是一个你需要掌握的很重要的步骤.
把你要添加的静态文件放入static目录.这个目录是你在settings.py中设置的STATICFILES_DIRS元组.
在模板中添加静态媒体引用.例如一个HTML网页的图片用<img />标签.
记得用{% load staticfiles %}和{% static "filename" %}命令在模板中设置静态文件.
下一章我们将会学习数据库.我们将学习如何用Django出色的数据库层来帮助我们摆脱繁琐!
5.6 练习
下面两个练习来巩固本章.
- 把about页面也用一个about.html模板来设置.
- 在about.html模板里,在你的静态媒体里增加图片.
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
