实战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技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...
随机推荐
- opencv编程解决warning C4003: “max”宏的实参不足
忘了把程序出错的代码附上了,运行修改好的程序才发现的.只好把问题的代码大致写一下了: warning C4003: “min”宏的实参不足 error C2589: “(”:“::”右边的非法标记 e ...
- 【LeetCode】15. 3Sum 三个数和为0
题目: Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find al ...
- CA提供的身份认证配置弃用
场景:从CA网站登录,在CA主页点击我们集成到CA的业务系统图标进行跳转,发现业务系统登录过身份(没cookies),身份认证自动使用 url,跳转到CA登录页,造成二次登录 [Authorize] ...
- AD转换精度的计算
声明原文来源于:http://wenku.baidu.com/view/1e6d8f3083c4bb4cf7ecd1c2.html 讨论AD转换分辨率的算法(zt) (1)在总长度为5米的范围里,平均 ...
- (转)TextView属性大全
TextView属性大全 今天研究了TextView一天了,发现网上有一篇讲TextView属性的,非常全,收藏一下先. 发现TextView有一个比较大的问题,就是文字排版的问题,遇到数字,字母,符 ...
- C#中如何判断联系电话的合法性
string tel = tb_tel.Text.Trim();//联系电话if (!string.IsNullOrEmpty(tb_tel.Text.Trim())){try{//num = Con ...
- CSS长度单位
罗列了CSS中常用的长度单位及比较 单位 含义 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 rem 相对于根元素字体大小 px 相对于屏幕分辨率而不是视窗大小: ...
- APUE第4章 文件和目录
4.2 文件函数 #include <sys/stat.h> int stat(const char *restrict pathname, struct stat *restrict b ...
- 2016-03-15:关于VS中模块定义文件
1 def模块定义文件 在使用开源库libx265时,因x265项目的头文件x265中有如下的宏定义 #ifdef X265_API_IMPORTS #define X265_API __declsp ...
- Use EnCase to acquire data from a smartphone
Yesterday someone asked me a question can EnCase acquire data from a smartphone, and my reply was &q ...