Django从入门到实战：编写你的第一个 Django 应用（6）

今天是一周工作日的中位线——周三，在这个风雨交加的日子，继续我们的Django实战......

 

在上一篇博客中我们为网络投票应用编写了测试，而现在我们要为它加上样式和图片。

除了服务端生成的 HTML 以外，还需要静态文件——比如图片，脚本和样式表——来帮助渲染网络页面。

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

 

自定义应用的界面和风格

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

Django 的 STATICFILES_FINDERS 设置包含了一系列的查找器，它们知道去哪里找到 static 文件。AppDirectoriesFinder 是默认查找器中的一个，它会在每个 INSTALLED_APPS 中指定的应用的子文件中寻找名称为 static 的特定文件夹。

在你刚创建的 static 文件夹中创建一个名为 polls 的文件夹，再在 polls 文件夹中创建一个名为 style.css 的文件。换句话说，你的样式表路径应是 polls/static/polls/style.css，这和创建模板文件的时候一样。

静态文件命名空间

       由于Django 只会使用第一个找到的静态文件。如果你在 其它 应用中有一个相同名字的静态文件，Django 将无法区分它们。我们需要指引 Django 选择正确的静态文件，而最简单的方式就是把它们放入各自的 命名空间 。也就是把这些静态文件放入 另一个 与应用名相同的目录中。

而因为 AppDirectoriesFinder 的存在，你可以在 Django 中简单地使用以 polls/style.css 的形式引用此文件，类似你引用模板路径的方式。

将以下代码放入样式表(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

重新载入``http://localhost:8000/polls/`` ，你会发现有问题的链接是绿色的 (这是Django自己的问题标注方式) ，这意味着你追加的样式表起作用了。

 

添加一个背景图

接着，我们会创建一个用于存在图像的目录。在 polls/static/polls 目录下创建一个名为 images 的子目录。在这个目录中，放一张名为 background.gif 的图片。换言之，在目录 polls/static/polls/images/中放一张图片。

随后，在你的样式表（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），而无需修改大量的静态文件。

当熟悉静态文件后，下篇博客我们一起来学习如何自定义 Django 自动生成后台网页的过程。

 

写在最后，欢迎关注一个一起学python的微信公众号：大众学python

掏出手机扫一扫：