Django 1.10中文文档-第一个应用Part6-静态文件
目录[-]
本教程上接Part5 。前面已经建立一个网页投票应用并且测试通过,现在主要讲述如何添加样式表和图片。
除由服务器生成的HTML文件外,网页应用一般还需要提供其它必要的文件——比如图片、JavaScript脚本和CSS样式表。这样才能为用户呈现出一个完整的网站。 在Django中,这些文件统称为“静态文件”。
如果是在小型项目中,这只是个小问题,因为你可以将它们放在网页服务器可以访问到的地方。 但是呢,在大一点的项目中——尤其是由多个应用组成的项目,处理每个应用提供的多个静态文件集合还是比较麻烦的。
但是Django提供了django.contrib.staticfiles
:它收集每个应用(和任何你指定的地方)的静态文件到一个单独的位置,使得这些文件很容易维护。
自定义应用外观
首先在polls
路径中创建一个static
目录。Django会从这里搜索静态文件,这个和Django在polls/templates/
中查找对应的模板文件的方式是一样的。
Django有一个STATICFILES_FINDERS的查找器,它会告诉Django从哪里查找静态文件。 其中有个内建的查找器AppDirectoriesFinder
,它的作用是在每个INSTALLED_APPS
下查找“static”子目录下的静态文件。管理站点的静态文件也是使用相同的目录结构。
在你刚刚创建的static目录中,再创建一个polls目录并在它下面创建一个文件style.css。这样你的style.css样式表应该在polls/static/polls/style.css。因为根据AppDirectoriesFinder
静态文件查找器的工作方式,Django会在polls/static找到polls/style.css这个静态文件,和访问模板的路径类似。
静态文件命名空间: 和模板类似,其实我们也可以直接将静态文件直接放在polls/static下面(而不是再创建一个polls子目录),但是这样是一个不好的行为。Django会自动使用它所找到的第一个符合要求的静态文件的文件名,如果你有在两个不同应用中存在两个同名的静态文件,那么Django是无法区分它们的。所以我们需要告诉Django该使用其中的哪一个,最简单的方法就是为它们添加命名空间。也就是将这些静态文件放进以它们所在的应用的名字命名的子目录下。
样式表中写入这些内容(polls/static/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%}
模板标签用户生成静态文件的绝对URL。以上你在开发过程中所需要对静态文件做的所有处理。 浏览器中重新载入http://localhost:8000/polls/, 你应该会看到Question的超链接变成了绿色(Django的风格),这也表明你的样式表成功引入了。
添加背景图片
下一步,我们将创建一个子目录来存放图片。在polls/static/polls/
目录中创建一个images
子目录。在这个目录中,放入一张图片background.gif。换句话,将你的图片放在polls/static/polls/images/background.gif。然后,在样式表中添加(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模板标签用它来生成URLs)而不用同时修改一大堆静态文件的路径。
这一上仅仅是基础。有关框架中包含的设置和其他更多详细信息,参见静态文件howto 和静态文件参考。部署静态文件讲述如何在真实的服务器上使用静态文件。
当您对静态文件掌握的差不多了时,请阅读本教程的第7部分,了解如何自定义Django自动生成的管理站点。
快速通道
- Django 1.10中文文档-第一个应用Part1-请求与响应
- Django 1.10中文文档-第一个应用Part2-模型和管理站点
- Django 1.10中文文档-第一个应用Part3-视图和模板
- Django 1.10中文文档-第一个应用Part4-表单和通用视图
- Django 1.10中文文档-第一个应用Part5-测试
- 项目地址
- 常用SQL语句和语法汇总
- Python学习笔记1——斐波那契数列
- 视觉传感器几大技术要点详解!
- Spark之搜狗日志查询实战
- 区块链与数字货币是什么关系呢?
- 保存数据到MySql数据库——我用scrapy写爬虫(二)
- 人工智能将取代人类?危机亦或是新的机遇
- 大数据驱动的未来网络:体系架构与应用场景(下)网络架构与场景详解
- 冷静点,NVIDIA 禁止 Geforce 进数据中心想限制的并不是深度学习
- 智能机器人崛起背后的中国力量
- 企业微服务架构转型-实施步骤
- Andrew Ng机器学习课程笔记--week2(多元线性回归&正规公式)
- 科技第六感:黑客控制你的车!不信?其实很简单
- python多版本的pip共存问题解决办法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 遇到个小BUG之后
- 小白学PyTorch | 1 搭建一个超简单的网络
- 小白学PyTorch | 动态图与静态图的浅显理解
- Go 视图模板篇(五):模板布局和继承
- Go 视图模板篇(四):上下文感知与 XSS 攻击
- 引入 Laravel Mix 管理前端资源
- Go 视图模板篇(三):参数、管道和函数调用
- 基于独立的 Laravel Eloquent 组件编写 ORM 模型类
- 漫画:什么是 “跳表” ?
- JAVA | Guava EventBus 使用 发布/订阅模式
- Go | Gin 解决跨域问题跨域配置
- Go | Go 语言打包静态文件以及如何与Gin一起使用Go-bindata
- 解决SpringBoot jar包中的文件读取问题
- 记一次HEX和RGB互换算法的思考及应用
- beego 优雅重启