实战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技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...
随机推荐
- SQL Server参数化查询中应用Like
一般情况下是SQL语句: Select * From Users Where UserName Like 'Lin%' Select * From Users Where UserName Like ...
- 云计算PAAS平台测试设计之镜像管理
下面是云计算PAAS平台页面概览: 今天我们要讲的是镜像管理页面的测试设计: 可以看到,这个页面主要有增删改查四个功能. 1. 查询镜像 (1)易用性:查看镜像查询界面,界面上各组件设计合理.美观.易 ...
- EXTJS 6 新特性(译文)
Extjs 新特性 简介 使用extjs,sencha 团队开发一个简单的框架,可以为创建在任何类型设备上运行的应用,从手机端到平板电脑再到桌面应用,你将能够产生最佳的用户体验,编写更少的代码量,结合 ...
- rsync安装使用
安装 yum install rsync mkdir /etc/rsyncd cd /etc/rsyncd vi rsyncd.conf pid file = /var/run/rsyncd.pid ...
- 内存泄漏检测工具Valgrind
1概述 1.1 介绍 Valgrind是一套Linux下,开放源代码(GPL V2)的仿真调试工具的集合.Valgrind由内核(core)以及基于内核的其他调试工具组成.内核类似于一个框架(fram ...
- jenkins smtp设置调试
- 网络设备模拟器 GNS3
https://www.gns3.com/support/docs/linux-installation sudo dpkg --add-architecture i386 sudo add-apt- ...
- PHP获取今天、昨天、明天的日期
<?php echo "今天:".date("Y-m-d")."<br>"; echo "昨天:".d ...
- OpenGL函数解析之glLoadIdentity()
函数原型:void glLoadIdentity(void) 函数说明:调用glLoadIdentity()函数可以恢复初始坐标系,用一个4x4的单位矩阵来代替当前矩阵,实际上就是对当前矩阵进行初始化 ...
- Windows server 2008R2部署服务批量安装Windows7教程
利用Windows server 2008 R2下的Windows部署服务可以批量安装Windows 7,以下简称WDS. WDS需要用到域和dhcp.DNS服务,所以,基础环境必须要有域控制器,dh ...