本教程上接 Tutorial 5,我们已经建立一个经过测试的网页投票应用,现在我们将添加一张样式表和一张图片。
除了由服务器生成的HTML文件外,网页应用一般需要提供其它必要的文件 —— 比如图片文件、JavaScript脚本和CSS样式表 —— 来为用户呈现出一个完整的网站。 在Django中,我们将这些文件称为“静态文件”。
对于小型项目,这不是个大问题,因为你可以将它们放在你的网页服务器可以访问到的地方。 然而,在大一点的项目中 —— 尤其是那些由多个应用组成的项目 —— 处理每个应用提供的多个静态文件集合开始变得很难。
这正是django.contrib.staticfiles
的用途:它收集每个应用(和任何你指定的地方)的静态文件到一个单独的位置,这个位置在线上可以很容易维护。
自定义您的应用程序的外观和样式
首先在你的polls
中创建一个static
目录。 Django将在那里查找静态文件,这与Django在polls/templates/
中寻找对应的模板文件的方式是一致的。
Django 的 STATICFILES_FINDERS
设置包含一个查找器列表,它们知道如何从各种源找到静态文件。 其中默认的一个是AppDirectoriesFinder
,它会在每个 INSTALLED_APPS
(如我们创建的poll)下查找“static”子目录。 管理站点也为它的静态文件使用相同的目录结构。
在你刚刚创建的static
目录中,创建另外一个目录polls
并在它下面创建一个文件style.css
。 换句话讲,你的样式表应该位于polls/static/polls/style.css
。 因为polls/style.css
静态文件查找器的工作方式,你可以通过AppDirectoriesFinder
在Django
中访问这个静态文件,与你如何访问模板的路径类似。
静态文件的命名空间
与模板类似,我们可以将静态文件直接放在polls/static
(而不是在polls
中创建另外的子目录, ),但是实际上这是一个坏主意, Django将使用它所找到的第一个符合要求的静态文件的文件名,如果在你的不同应用中存在两个同名的静态文件,Django将无法区分它们。 我们需要告诉Django该使用其中的哪一个,最简单的方法就是为它们添加命名空间。 也就是说,将这些静态文件放进以它们所在的应用的名字命名的另外一个目录下。
将下面的代码放入样式表中 (polls/static/polls/style.css
):
polls/static/polls/style.css
li a {
color: green;
}
下一步,在polls/templates/polls/index.html
的顶端添加如下内容 :
polls/templates/polls/index.html
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />
{% static %}
模板标签生成静态文件的绝对URL。
这就是你在开发过程中所需要对静态文件做的所有处理。 重新加载http://localhost:8000/polls/,你应该看到问题链接是绿色的(Django样式!) 这意味着您的样式表已正确加载。
添加背景图片
下一步,我们将创建一个子目录来存放图片。 在polls/static/polls/
目录中创建一个images
子目录。 在这个目录中,放入一张图片background.gif
。 换句话,将你的图片放在 polls/static/polls/images/background.gif
。
然后,向你的样式表(polls/static/polls/style.css
)添加:
polls/static/polls/style.css
body {
background: white url("images/background.gif") no-repeat;
}
重新加载http://localhost:8000/polls/,你应该在屏幕的右下方看到载入的背景图片。
警告
当然,{% static %}
模板标签在不是由 Django 生成的静态文件(比如样式表)中是不可用的。 你应该永远使用相对路径来相互链接静态文件,因为这样你可以改变STATIC_URL
(static
而不用同时修改一大堆静态文件的路径。
这里有些基础需要了解。 关于静态文件设置的更多细节和框架中包含的其它部分,参见 the static files howto 和the staticfiles reference。Deploying static files讨论如何在真实的服务器上使用静态文件。
当您对静态文件感到满意时,请阅读本教程的 part 7 of this tutorial来学习如何自定义Django自动生成的admin站点。
下一节: Django 官网最新 Tutorial 渣翻 - Part 7