django初学教程 投票应用 06 添加样式和图片

Posted 2021-09-05 ikventure

django官方教程 编写你的第一个Django应用--投票应用 06 添加样式和图片

https://docs.djangoproject.com/zh-hans/3.2/intro/tutorial06/

目录

• 自定义应用的界面和风格
• 添加一个背景图

给投票应用添加样式和图片

除了服务端生成的html以外，网络应用通常需要一些额外的文件（比如图片、脚本和样式表）来帮助渲染网络页面，这些文件统称为“静态文件”。

django.contrib.staticfiles将各个应用的静态文件统一收集，便于分发。

自定义应用的界面和风格

在polls目录下创建static目录，类似template，在该目录下创建polls目录，在polls下创建style.css。

Django 的 STATICFILES_FINDERS 设置包含了一系列的查找器，用于查找 static 文件。AppDirectoriesFinder 是默认查找器中的一个，它会在每个 INSTALLED_APPS 中指定的应用的子文件中寻找名称为 static 的特定文件夹，所以django可以以 polls/style.css 的形式引用此文件。

在样式表中添加超链接颜色（如绿色）：

/* polls/static/polls/style.css */
li a {
    color: green;
}

在polls/templates/polls/index.html文件头中设置静态文件：

{% load static %}

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

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

重启服务器，载入：

color设置为红色：

添加一个背景图

在 polls/static/polls 目录下创建一个名为 images 的子目录，用于存放图像（如文件名为eg0.jpg）。

/* polls/static/polls/style.css */
body {
    background: white url("images/eg0.jpg") no-repeat;
}

浏览器重载 http://localhost:8000/polls/，背景图会出现在屏幕左上角（显示效果与图片大小有关）：

下一部分学习自定义 Django 自动生成后台网页。