编写你的第一个 Django 应用程序,第6部分
本教程从教程 5 停止的地方开始。我们已经构建了一个经过测试的网络投票应用程序,现在我们将添加一个样式表和一个图像。
除了服务器生成的 HTML 之外,Web 应用程序通常需要提供呈现完整网页所需的其他文件(例如图像、JavaScript 或 CSS)。在 Django 中,我们将这些文件称为“静态文件”。
对于小型项目,这没什么大不了的,因为您可以将静态文件保存在Web服务器可以找到的地方。但是,在较大的项目中(尤其是由多个应用程序组成的项目),处理每个应用程序提供的多组静态文件开始变得棘手。
这就是 django.contrib.staticfiles 的用途:它将每个应用程序(以及您指定的任何其他位置)的静态文件收集到一个可以在生产中轻松提供的位置。
一、自定义应用的外观和感觉
首先,在 polls 目录中创建一个名为 static 的目录。Django 将在那里查找静态文件,类似于 Django 在 polls/templates/ 中查找模板的方式。
Django 的 STATICFILES_FINDERS 设置包含一个发现者列表,这些查找器知道如何从各种来源发现静态文件。
默认值之一是 AppDirectoriesFinder ,它在每个 INSTALLED_APPS 中查找一个“静态”子目录,就像我们刚刚创建的 polls 中的子目录一样。管理站点对其静态文件使用相同的目录结构。
在您刚刚创建的 static 目录中,创建另一个名为 polls 的目录,并在该目录中创建一个名为 style.css 的文件。
换句话说,您的样式表应该在 polls/static/polls/style.css 。
由于 AppDirectoriesFinder 静态文件查找器的工作方式,您可以在 Django 中将此静态文件称为 polls/style.css ,类似于您引用模板路径的方式。
将以下代码放入该样式表 ( polls/static/polls/style.css ):
li a {
color: red;
}
接下来,在 polls/templates/polls/index.html 的顶部添加以下内容:
{% load static %}
<link rel="stylesheet" href="{% static 'polls/style.css' %}">
{% static %} 模板标签生成静态文件的绝对 URL。
这就是您需要为开发所做的一切。
启动服务器(如果它已经在运行,则重新启动它):
$ python manage.py runserver
重新加载 http://localhost:8000/polls/ ,你应该看到问题链接是绿色的(Django风格!),这意味着你的样式表已正确加载。
二、添加背景图像
接下来,我们将为图像创建一个子目录。在 polls/static/polls/ 目录中创建一个 images 子目录。
在此目录中,添加要用作背景的任何图像文件。出于本教程的目的,我们使用一个名为 background.png 的文件,
该文件将具有完整路径 polls/static/polls/images/background.png 。
然后,在样式表中添加对图像的引用 ( polls/static/polls/style.css ):
body {
background: white url("images/background.png") no-repeat;
}
li a {
color: red;
}
重新加载 http://localhost:8000/polls/ ,您应该会看到屏幕左上角加载的背景。

这些是基础知识。有关框架中包含的设置和其他位的更多详细信息,请参阅静态文件操作方法和静态文件参考。
部署静态文件讨论了如何在真实服务器上使用静态文件。
当你熟悉静态文件时,请阅读本教程的第 7 部分,了解如何自定义 Django 自动生成的管理站点。
-----------------------------------end-------------------------------------
编写你的第一个 Django 应用程序,第6部分的更多相关文章
- 编写你的第一个django应用程序2
从1停止的地方开始,我们将设置数据库,创建您的第一个模型,并快速介绍django自动生成的管理站点 数据库设置 现在,打开mysite/settings.py.这是一个普通的python模块,其中模块 ...
- 编写你的第一个django应用程序4
本教程上接教程3,我们将继续开发网页投票应用,本部分将主要关注简单的表单处理以及如何对代码进行优化 写一个简单的表单 让我们更新一下在上一个教程中编写的投票详细页面的模板(‘polls/detail. ...
- 编写你的第一个django应用程序3
这一篇从教程第2部分结尾的地方继续讲起.我们将继续编写投票应用,并且专注于如何创建公用界面--也被称为视图 概况 django视图概念是一类具有相同功能和末班的网页的集合,比如,在一个博客应用中,你可 ...
- Django教程:第一个Django应用程序(3)
Django教程:第一个Django应用程序(3) 2013-10-08 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq 37391319 #博客: ...
- Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第一部分(Page 6)
编写你的第一个 Django app,第一部分(Page 6)转载请注明链接地址 Django 2.0.1 官方文档翻译: Django 2.0.1.dev20171223092829 documen ...
- Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第五部分(Page 10)
编写你的第一个 Django app,第五部分(Page 10)转载请注明链接地址 我们继续建设我们的 Web-poll 应用,本节我们会为它创建一些自动测试. 介绍自动测试 什么是自动测试 测试是简 ...
- 第一个Django应用程序_part3
一.概述 此文延续第一个Django应用程序part2. 官方文档:https://docs.djangoproject.com/en/1.11/intro/tutorial03/ view是Djan ...
- 编写你的第一个Django应用
安装 Python 作为一个 Python Web 框架,Django 需要 Python.更多细节请参见 我应该使用哪个版本的 Python 来配合 Django?. Python 包含了一个名为 ...
- 搭建你的第一个Django应用程序
首先你要确保你机器上面安装了python:Python开发_python的安装 python的相关学习资料:http://www.cnblogs.com/hongten/tag/python/ 其次, ...
- Django教程:第一个Django应用程序(4)
Django教程:第一个Django应用程序(4) 2013-10-09 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq 37391319 #博客: ...
随机推荐
- Qt开源作品20-PNG图片警告去除工具
一.前言 在新版的Qt5中,我们之前在Qt4中使用的png图片,到了这里经常会报一个警告,libpng warning: iCCP: known incorrect sRGB profile,尽管这种 ...
- Qt音视频开发17-海康sdk解码
一.前言 在视频监控行业领域,海康当之无愧是老大,稳坐第一的宝座很多年了,近期需要将视频监控系统改成采用海康sdk的内核,于是特意去查阅了sdk的使用手册,sdk相关的文档和文件可以直接官网下载到,而 ...
- 使用 Visual Studio Code 进行调试
现在是时候实践你新获得的调试知识了. 我们刚好有一个完美的机会. 在我们的 Tailwind Traders 应用中,我们正在开发一项新功能:允许以多种货币显示产品的价格. 一位同事为这一目的编写了一 ...
- 《Maven应用实战》一书的在线学习网址和源码链接
<Maven应用实战>杨世文,孙会军 在线学习网址:http://c.biancheng.net/view/4756.html 源码链接:https://pan.baidu.com/s/1 ...
- C#中字符串格式化string.Forma中需要使用t转义字符的情况处理
此处汇总一下C#中字符串格式化string.Forma中需要使用t转义字符的情况处理. 1.C# string.Format() 方法中占位大括号的外面还有大括号,此时就需要使用转义大括号{}. 处理 ...
- Web网页端IM产品RainbowChat-Web的v7.1版已发布
一.关于RainbowChat-Web RainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIM ...
- 第一二章(Nginx+Lua)开发环境
第一章 安装OpenResty(Nginx+Lua)开发环境 首先我们选择使用OpenResty,其是由Nginx核心加很多第三方模块组成,其最大的亮点是默认集成了Lua开发环境,使得Nginx可以作 ...
- jQuery---操作指南
功能代码(1)---通过Jquery来处理复选框 实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 ...
- 小米CR6606,CR6608,CR6609 启用SSH和刷入OpenWRT 23.05.5
上个月极低的价格得到一台CR6606和一台CR6609, 一直没时间研究, 终于趁春节假期把这两个都刷成 OpenWRT 配置说明 CPU: MT7621AT,双核880MHz 内存: NT5CC12 ...
- 第一!天翼云领跑中国边缘云laaS市场!
近日,弗若斯特沙利文(Frost & Sullivan,简称"沙利文")联合头豹研究院发布<2023年中国边缘云市场报告>,天翼云在2023H1中国边缘云Iaa ...