Skip to main content

编写您的第一个Django应用程序,第6部分

本教程从 教程5 离开时开始。我们已经构建了一个测试的Web轮询应用程序,现在我们将添加样式表和图像。

除了由服务器生成的HTML之外,Web应用程序通常需要提供呈现完整网页所需的其他文件(例如图像,JavaScript或CSS)。在Django中,我们将这些文件称为“静态文件”。

对于小项目,这不是什么大不了的,因为你可以将静态文件保存在Web服务器可以找到的地方。然而,在更大的项目 - 特别是由多个应用程序组成的 - 处理由每个应用程序提供的多组静态文件开始变得棘手。

这就是 django.contrib.staticfiles 的用途:它将每个应用程序(以及您指定的任何其他地方)的静态文件收集到一个容易在生产环境中提供的位置。

自定义您的 app’s 外观和感觉

首先,在您的 polls 目录中创建一个名为 static 的目录。 Django会在那里寻找静态文件,类似于Django如何在 polls/templates/ 中找到模板。

Django的 STATICFILES_FINDERS 设置包含一个知道如何从各种来源发现静态文件的finders列表。默认值之一是 AppDirectoriesFinder,它在每个 INSTALLED_APPS 中寻找一个“static”子目录,就像我们刚刚创建的 polls 中的一个。管理站点对其静态文件使用相同的目录结构。

在刚刚创建的 static 目录中,创建另一个名为 polls 的目录,并在其中创建一个名为 style.css 的文件。换句话说,你的样式表应该在 polls/static/polls/style.css。由于 AppDirectoriesFinder 静态文件查找器的工作方式,您可以将Django中的此静态文件简单地称为 polls/style.css,与您如何引用模板的路径类似。

静态文件命名空间

就像模板一样,我们 might 能够把我们的静态文件直接放在 polls/static (而不是创建另一个 polls 子目录),但它实际上是一个坏主意。 Django将选择其找到的名字匹配的第一个静态文件,如果在 different 应用程序中有一个具有相同名称的静态文件,Django将无法区分它们。我们需要能够指向Django在正确的一个,和最简单的方法来确保这是由 namespacing 他们。也就是说,将这些静态文件放在为应用程序本身命名的 another 目录中。

在样式表(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 right bottom;
}

重新加载 http://localhost:8000/polls/,你应该看到在屏幕的右下角加载的背景。

警告

当然,{% static %} 模板标签不能用于静态文件,例如您的样式表,而不是由Django生成的。你应该总是使用 相对路径 链接你的静态文件之间,因为那样你可以改变 STATIC_URL (由 static 模板标签生成其URL),而不必修改静态文件中的一堆路径。

这些是 基本。有关框架中包括的设置和其他位的更多详细信息,请参阅 静态文件howto静态文件引用部署静态文件 讨论如何在真实服务器上使用静态文件。

当您对静态文件感到满意时,请阅读 本教程的第7部分 了解如何自定义Django的自动生成的管理网站。