实战Django:官方实例Part6
我们终于迎来了官方实例的最后一个Part。在这一节中,舍得要向大家介绍Django的静态文件管理。
现在,我们要往这个投票应用里面添加一个CSS样式表和一张图片。
一个完整的网页文件,除了html文档外,通常还需要其它一些文件,比如图片、JS或者CSS,这些文件,我们称之为“静态文件”。
在那些小项目中,我们不需要对静态文件关注太多,因为你可以将这些文件随便放置,只要你的服务器能查找得到就好。但在大一点的项目中,尤其是那些拥有好多个应用的项目,静态文件的管理便变得非常重要,所以骚年,还是从一开始就养成良好的静态文件管理习惯吧!
25.添加样式表
首先,在polls文件夹下创建一个叫static的文件夹,Django会自动查找到这个文件夹,就象它能自动查到我们的模板文件夹一样。
Django拥有一系列的静态文件查找手段。其中一种就是在你的应用文件夹下查找有没有static文件夹。
在你把static文件夹建好后,接着在static下面建一个polls文件夹,然后在这个polls文件夹下创建一个叫styles.css的文件。这个文件的正确路径应该是:
polls/static/polls/style.css
在styles.css中加入下列内容:
polls/static/polls/style.css:
li a {
color: green;
}
接下来,编辑polls/templates/polls/index.html 文件,在开头处插入下述代码:
polls/templates/polls/index.html :
{% load staticfiles %} <link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />
{% load staticfiles %} 加载了 {% static %}模板标签,这个 {% static %}模板标签负责生成这个静态文件(style.css)的绝对路径。
让我们开启Django服务器(如何开启?请返回阅读Part1),然后访问http://127.0.0.1:8000/polls/,你会看到那个“What's Up?”已经变成了绿色,这就说明我们的样式表(style.css)已经发挥作用了。
26.添加背景图
下面,我们要创建一个图片文件夹,在polls/static/polls/文件夹下创建一个images文件夹,然后在这个文件夹里放一个叫background.gif的文件(找一个你认为合适的图片,改成这个名字就行),这个文件的正确路径应该是:
polls/static/polls/images/background.gif
然后,往样式表(style.css)里添加以下内容:
polls/static/polls/style.css :
body {
background: white url("images/background.gif");
}
刷新一下浏览器,你可以看到我们刚加上去的背景图。
好了,我们这个官方实例就介绍到这里,有一定英文阅读能力的童鞋,建议到Django官方网站(https://www.djangoproject.com/)下载官方文档来阅读。
在今后这段时间,舍得还会将自己整理的多个实例陆续介绍给大家。
最后,附上整个实例的源代码,下载地址:舍得学苑下载中心
本文版权归舍得学苑所有,欢迎转载,转载请注明作者和出处。谢谢!
作者:舍得
首发:舍得学苑@博客园
实战Django:官方实例Part6的更多相关文章
- 实战Django:官方实例Part1
[写在前面] 撰写这个实战系列的Django文章,是很久之前就有的想法,问题是手头实例太少,一旦开讲,恐有"无米下锅"之忧. 随着对Django学习的深入,渐渐有了些心得,把这些心 ...
- 实战Django:官方实例Part2
我们接着Part1部分往下讲.我们在part1中启动服务器后,并没有在管理页面中发现新添加的Polls应用,怎么办捏? 7.在管理界面中显示Question 只要注册一下这个应用就可以了.编辑poll ...
- 微软官方实例 RazorPagesMovie 在 asp.net core 2.1 版本下的实战
微软官方实例 RazorPagesMovie 在 asp.net core 2.1 版本下的实战 友情提示: 操作系统: MacOS 10.13.5 dotnet core: version 2.1. ...
- 实战Django:简易博客Part1
舍得学习新技能的时候,通常不喜欢傻读书--捧着一本阐述该项技能的书籍,然后傻看,一路看下来,脑子里塞满了新的概念.知识点,头是越来越大,但技能却几乎没掌握半分. 多年来,舍得养成了用做实例来学习新技能 ...
- 对《[Unity官方实例教程 秘密行动] Unity官方教程《秘密行动》(十二) 角色移动》的一些笔记和个人补充,解决角色在地形上移动时穿透问题。
这里素材全是网上找的. 教程看这里: [Unity官方实例教程 秘密行动] Unity官方教程<秘密行动>(九) 角色初始设定 一.模型设置: 1.首先设置模型的动作无限循环. 不设置的话 ...
- Android实例-Delphi开发蓝牙官方实例解析(XE10+小米2+小米5)
相关资料:1.http://blog.csdn.net/laorenshen/article/details/411498032.http://www.cnblogs.com/findumars/p/ ...
- 微信应用号开发知识贮备之altjs官方实例初探
天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生.从获得微信应用号邀请的业内人士发出来的一张开发工具源码截图可以看到,reacjs及其相应的FLUX框架altjs很有可能会成 ...
- 源于《Unity官方实例教程 “Space Shooter”》思路分析及相应扩展
教程来源于:Unity官方实例教程 Space Shooter(一)-(五) http://www.jianshu.com/p/8cc3a2109d3b 一.经验总结 教程中步骤清晰,并且 ...
- 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)
),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...
随机推荐
- MySql存储过程学习总结
创建存储过程 1.格式 MySQL存储过程创建的格式:CREATE PROCEDURE 过程名 ([过程参数[,...]]),举个例子: CREATE PROCEDURE proc1 (OUT s ...
- SQL在指定列后添加新的列
ALTER TABLE `MR_CustomerShopFuture` ADD COLUMN `ProcessID` INT(11) DEFAULT '0' COMMENT '审核流程ID';
- java中好玩的案例
1:实现猜数字游戏, 如果没有猜对可以继续输入你猜的数字,如果猜对了停止程序. 最多只能猜三次,如果还剩下最后一次机会的时候要提醒用户. 代码: Random random = new Random( ...
- (转)直接拿来用!最火的iOS开源项目(二)
“每一次的改变总意味着新的开始.”这句话用在iOS上可谓是再合适不过的了.GitHub上的iOS开源项目数不胜数,iOS每一次的改变,总会引发iOS开源项目的演变,从iOS 1.x到如今的iOS 7, ...
- maven的版本管理笔记
1. 版本管理 (1) 快照版本对应了项目的开发过程,往往对应了很长的时间:发布版本对应了项目的发布,因此仅仅代表某个时刻项目的状态. (2) 理想的发布版本应当对应项目某个时刻比较稳定的状态,包括源 ...
- 百度面试题:从输入url到显示网页,后台发生了什么?
参考http://igoro.com/archive/what-really-happens-when-you-navigate-to-a-url/ http://www.cnblogs.com/we ...
- OSGI.NET 学习笔记--应用篇
关于osgi.net ,想必大家也听说过,以下是自己在学习osgi.net 过程中整理出来的内容,供大家学习参与使用. 1. OSGI.NET 与UIOSP OSGi是Open Service Ga ...
- 实现web页面按比例缩放
对于web的掌握限于可以看懂别人的代码,并在框架中作相应修改或增加. 今天把另一个项目中的网页源代码粘过来做一个页面,结果问题百出. 首先,同样的代码,放在自己的项目里,页面排版错乱,看了下,引用的w ...
- java中HashMap的用法
重点介绍HashMap.首先介绍一下什么是Map.在数组中我们是通过数组下标来对其内容索引的,而在Map中我们通过对象来对对象进行索引,用来索引的对象叫做key,其对应的对象叫做value.在下文中会 ...
- python 基础知识(一)
python 基础知识(一) 一.python发展介绍 Python的创始人为Guido van Rossum.1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本 ...