该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程

所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址。


前面我们编写了一个经过测试的投票应用,现在让我们给它添加一张样式表和一张背景图片。

除了由服务器生成的HTML文件外,WEB应用一般需要提供一些其它的必要文件,比如图片文件、JavaScript脚本和CSS样式表等等,用来为用户呈现出一个完整的网页。在Django中,我们将这些文件统称为“静态文件”,因为这些文件的内容基本是固定不变的,不需要动态生成。

对于小项目,这些都不是大问题,你可以将静态文件放在任何你的web服务器能够找到的地方。但是对于大型项目,尤其是那些包含多个app在内的项目,处理那些由app带来的多套不同的静态文件是个麻烦活。

但这正是django.contrib.staticfiles的用途:它收集每个应用(和任何你指定的地方)的静态文件到一个统一指定的地方,并且易于访问。

一、使用静态文件

首先在你的polls目录中创建一个static目录。Django将在那里查找静态文件,这与Django在polls/templates/中寻找对应的模板文件的方式是一致的。

Django的STATICFILES_FINDERS设置项中包含一个查找器列表,它们知道如何从各种源中找到静态文件。 其中一个默认的查找器是AppDirectoriesFinder,它在每个INSTALLED_APPS下查找static子目录,例如我们刚创建的那个static目录。admin管理站点也为它的静态文件使用相同的目录结构。

在刚才的static目录中新建一个polls子目录,再在该子目录中创建一个style.css文件。换句话说,这个css样式文件应该是polls/static/polls/style.css。你可以通过书写polls/style.css在Django中访问这个静态文件,与你如何访问模板的路径类似。

静态文件的命名空间:

与模板类似,我们可以将静态文件直接放在polls/static(而不是创建另外一个polls 子目录),但实际上这是一个坏主意。Django将使用它所找到的第一个匹配到的静态文件,如果在你的不同应用中存在两个同名的静态文件,Django将无法区分它们。我们需要告诉Django该使用其中的哪一个,最简单的方法就是为它们添加命名空间。也就是说,将这些静态文件放进以它们所在的应用的名字同名的另外一个子目录下(白话讲:多建一层与应用同名的子目录)。

PS:良好的目录结构是每个应用都应该创建自己的urls、views、models、templates和static,每个templates包含一个与应用同名的子目录,每个static也包含一个与应用同名的子目录。

将下面的代码写入样式文件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。(你可以使用任何你想要的图片)

在css样式文件polls/static/polls/style.css中添加下面的代码:

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

重新加载http://localhost:8000/polls/(CTRL+F5或者直接F5),你会在屏幕的右下方看到载入的背景图片。

提示:

很显然,{% static %}模板标签不能用在静态文件,比如样式表中,因为他们不是由Django生成的。 你应该使用相对路径来相互链接静态文件,因为这样你可以改变STATIC_URL ( static模板标签用它来生成URLs)而不用同时修改一大堆静态文件中路径相关的部分。

三、直接访问静态文件

实际上不管是在Django开发服务器上,还是在nginx+uwsgi+django部署的服务器上,都可以直接通过url访问静态文件,不需要在Django中专门为每个静态文件编写url路由和视图。

比如,通过http://www.liujiangblog.com/static/images/default_avatar_male_50.gif你就可以直接获得网站用户的默认头像图片了。

本节简要的介绍了如何使用静态文件,更多的内容留待后续。

Part 6:静态文件--Django从入门到精通系列教程的更多相关文章

  1. Part 7:自定义admin站点--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  2. Django简介--Django从入门到精通系列教程

    该系列教程系个人原创,并同步发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  3. Part 2:模型与后台管理admin站点--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  4. Part 5:Django测试--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. 本节将简要介绍Django的自动化测试相关内 ...

  5. Django环境安装--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  6. Part 1:请求与响应--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  7. Part 3:视图和模板--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  8. Part 4:表单和类视图--Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

  9. 模型和字段 -- Django从入门到精通系列教程

    该系列教程系个人原创,并完整发布在个人官网刘江的博客和教程 所有转载本文者,需在顶部显著位置注明原作者及www.liujiangblog.com官网地址. Python及Django学习QQ群:453 ...

随机推荐

  1. Python:GUI之tkinter学习笔记2界面布局显示

    相关内容: pack 介绍 常用参数 使用情况 常用函数 grid 介绍 常用参数 使用情况 常用函数 place 介绍 常用参数 使用情况 常用函数 首发时间:2018-03-04 14:20 pa ...

  2. Android、IOS文字居中偏离的解决方案

    前言 移动端开发,经常会遇到的问题,就是文字居中.一般都只能往css方向去fix这个问题. 自己以前也用过position:relative;top:-*px的方式去解决.

  3. [20171113]修改表结构删除列相关问题3.txt

    [20171113]修改表结构删除列相关问题3.txt --//维护表结构删除字段一般都是先ALTER TABLE <table_name> SET UNUSED (<column_ ...

  4. js实现页面锚点定位动画滚动

    项目上需要的效果,个人不想用jquery实现,想着用js自己试试,花了点儿时间,终于实现.. 上干货.. function scrollTo(y, duration) { /*y:目标纵坐标,dura ...

  5. python第十二天 生成器,迭代器,内置函数

    第二模块学习:  生成器,迭代器,内置函数 生成器特点:只有在调用时才会生成相应的数据,运行的速度快! 示例: def fil(max):#斐波那契数 n,a,b=0,0,1 #定义初始数据 whil ...

  6. 根据id来大量删除数据between

    id的范围来删除数据 比如要删除 110到220的id信息:delete id from 表名 where id between 110 and 220;

  7. 自定义mysql类用于快速执行数据库查询以及将查询结果转为json文件

    由于每次连接数据库进行查询比较麻烦,偶尔还需要将查询结果转为json格式的文件, 因此暂时定义一个mysql的类,将这些常用的方法进行封装,便于直接调用(代码如下,个人用,没写什么注释). 注:导入了 ...

  8. 【PAT】B1081 检查密码(15 分)

    水题 #include<cstdio> #include<string.h> #include<ctype.h> #include<algorithm> ...

  9. MATLAB数值积分法

    MATLAB数值积分法 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 一.实验目的 许多工程技术和数学研究中要用到定积分,如果无法直接算不出精确值(如含 ...

  10. python scrapy爬虫框架概念介绍(个人理解总结为一张图)

    python的scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架   python和scrapy的安装就不介绍了,资料很多 这里我个人总结一下,能更加快理解scrapy和快速上手一个简 ...