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 %} 模板标签会生成静态文件的绝对路径。

重启服务器,载入:

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

color设置为红色:

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

添加一个背景图

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初学教程 投票应用 06 添加样式和图片

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

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

上一篇:当前的学习任务和时间分配


下一篇:Linux命令 ll详解