添加样式表和图像

DjangoDjangoBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

本教程从《创建一些自动化测试》结束的地方开始。我们已经构建了一个经过测试的网络投票应用程序,现在我们将添加一个样式表和一张图片。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL django(("Django")) -.-> django/CoreConfigurationandRoutingGroup(["Core Configuration and Routing"]) django/CoreConfigurationandRoutingGroup -.-> django/applications("Applications") subgraph Lab Skills django/applications -.-> lab-153746{{"添加样式表和图像"}} end

自定义应用的外观

首先,在你的 polls 目录中创建一个名为 static 的目录。Django 会在那里查找静态文件,这与 Django 在 polls/templates/ 中查找模板的方式类似。

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

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

静态文件命名空间

就像模板一样,我们 也许 可以直接将静态文件放在 polls/static 中(而不是再创建一个 polls 子目录),但这实际上是个坏主意。Django 会选择它找到的第一个名称匹配的静态文件,如果你在 另一个 应用中有一个同名的静态文件,Django 将无法区分它们。我们需要能够让 Django 指向正确的文件,而确保这一点的最佳方法是通过 命名空间 它们。也就是说,将这些静态文件放在另一个以应用本身命名的目录中。

将以下代码放入该样式表(polls/static/polls/style.css):

li a {
  color: green;
}

接下来,在 polls/templates/polls/index.html 的顶部添加以下内容:

{% load static %}

<link rel="stylesheet" href="{% static 'polls/style.css' %}">

{% static %} 模板标签会生成静态文件的绝对 URL。

这就是开发时你需要做的全部。

启动服务器(如果它已经在运行则重启):

python manage.py runserver 0.0.0.0:8080

重新加载 Web 8080 标签页,你应该会看到问题链接是绿色的(Django 风格!),这意味着你的样式表已正确加载。

绿色问题链接示例

添加背景图像

接下来,我们将为图像创建一个子目录。在 polls/static/polls/ 目录中创建一个 images 子目录。在这个目录中,添加任何你想用作背景的图像文件。在本教程中,我们使用的是一个名为 background.png 的文件,你可以在虚拟机的 /tmp/background.png 目录中找到它。

你需要将 /tmp/background.png 复制到 polls/static/polls/images/background.png

然后,在你的样式表(polls/static/polls/style.css)中添加对图像的引用:

body {
  background: white url("images/background.png") no-repeat;
}

重新加载 Web 8080 标签页,你应该会看到背景图像加载在屏幕的左上角。

背景图像示例

{% static %} 模板标签不适用于非 Django 生成的静态文件,比如你的样式表。你应该始终使用 相对路径 来相互链接你的静态文件,因为这样你就可以更改 STATIC_URLstatic 模板标签用于生成其 URL),而无需同时修改静态文件中的一堆路径。

这些是 基础知识。有关该框架中设置和其他部分的更多详细信息,请参阅 静态文件操作指南 </howto/static-files/index>静态文件参考 </ref/contrib/staticfiles>部署静态文件 </howto/static-files/deployment> 讨论了如何在真实服务器上使用静态文件。

当你熟悉静态文件后,请阅读 自定义 Django 管理站点 以了解如何自定义 Django 自动生成的管理站点。

总结

恭喜你!你已经完成了“添加样式表和图像”实验。你可以在 LabEx 中练习更多实验来提升你的技能。