编写你的第一个 Django 应用,第 6 部分

这一篇从 教程第 5 部分 结尾的地方继续讲起。在上一节中我们为网络投票应用编写了测试,而现在我们要为它加上样式和图片。

除了服务端生成的 HTML 以外,网络应用通常需要一些额外的文件——比如图片,脚本和样式表——来帮助渲染网络页面。在 Django 中,我们把这些文件统称为“静态文件”。

For small projects, this isn't a big deal, because you can keep the static files somewhere your web server can find it. However, in bigger projects -- especially those comprised of multiple apps -- dealing with the multiple sets of static files provided by each application starts to get tricky.

这就是 django.contrib.staticfiles 存在的意义:它将各个应用的静态文件(和一些你指明的目录里的文件)统一收集起来,这样一来,在生产环境中,这些文件就会集中在一个便于分发的地方。

从哪里获得帮助:

If you're having trouble going through this tutorial, please head over to the Getting Help section of the FAQ.

自定义 应用 的界面和风格

首先,在你的 polls 目录下创建一个名为 static 的目录。Django 将在该目录下查找静态文件,这种方式和 Diango 在 polls/templates/ 目录下查找 template 的方式类似。

Django 的 STATICFILES_FINDERS 设置包含了一系列的查找器,它们知道去哪里找到 static 文件。AppDirectoriesFinder 是默认查找器中的一个,它会在每个 INSTALLED_APPS 中指定的应用的子文件中寻找名称为 static 的特定文件夹,就像我们在 polls 中刚创建的那个一样。管理后台采用相同的目录结构管理它的静态文件。

Within the static directory you have just created, create another directory called polls and within that create a file called style.css. In other words, your stylesheet should be at polls/static/polls/style.css. Because of how the AppDirectoriesFinder staticfile finder works, you can refer to this static file in Django as polls/style.css, similar to how you reference the path for templates.

静态文件命名空间

Just like templates, we might be able to get away with putting our static files directly in polls/static (rather than creating another polls subdirectory), but it would actually be a bad idea. Django will choose the first static file it finds whose name matches, and if you had a static file with the same name in a different application, Django would be unable to distinguish between them. We need to be able to point Django at the right one, and the best way to ensure this is by namespacing them. That is, by putting those static files inside another directory named for the application itself.

将以下代码放入样式表(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 %} 模板标签会生成静态文件的绝对路径。

这就是你开发所需要做的所有事情了。

启动服务器(如果它正在运行中,重新启动一次):

$ python manage.py runserver
...\> py manage.py runserver

重新载入``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`(由 :ttag:`static 模板标签用于生成 URL),而无需修改大量的静态文件。

这些只是 基础 。更多关于设置和框架的资料,参考 静态文件解惑静态文件指南部署静态文件 介绍了如何在真实服务器上使用静态文件。

当你熟悉静态文件后,阅读 此教程的第 7 部分 来学习如何自定义 Django 自动生成后台网页的过程。