我们终于迎来了官方实例的最后一个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的更多相关文章

  1. 实战Django:官方实例Part1

    [写在前面] 撰写这个实战系列的Django文章,是很久之前就有的想法,问题是手头实例太少,一旦开讲,恐有"无米下锅"之忧. 随着对Django学习的深入,渐渐有了些心得,把这些心 ...

  2. 实战Django:官方实例Part2

    我们接着Part1部分往下讲.我们在part1中启动服务器后,并没有在管理页面中发现新添加的Polls应用,怎么办捏? 7.在管理界面中显示Question 只要注册一下这个应用就可以了.编辑poll ...

  3. 微软官方实例 RazorPagesMovie 在 asp.net core 2.1 版本下的实战

    微软官方实例 RazorPagesMovie 在 asp.net core 2.1 版本下的实战 友情提示: 操作系统: MacOS 10.13.5 dotnet core: version 2.1. ...

  4. 实战Django:简易博客Part1

    舍得学习新技能的时候,通常不喜欢傻读书--捧着一本阐述该项技能的书籍,然后傻看,一路看下来,脑子里塞满了新的概念.知识点,头是越来越大,但技能却几乎没掌握半分. 多年来,舍得养成了用做实例来学习新技能 ...

  5. 对《[Unity官方实例教程 秘密行动] Unity官方教程《秘密行动》(十二) 角色移动》的一些笔记和个人补充,解决角色在地形上移动时穿透问题。

    这里素材全是网上找的. 教程看这里: [Unity官方实例教程 秘密行动] Unity官方教程<秘密行动>(九) 角色初始设定 一.模型设置: 1.首先设置模型的动作无限循环. 不设置的话 ...

  6. Android实例-Delphi开发蓝牙官方实例解析(XE10+小米2+小米5)

    相关资料:1.http://blog.csdn.net/laorenshen/article/details/411498032.http://www.cnblogs.com/findumars/p/ ...

  7. 微信应用号开发知识贮备之altjs官方实例初探

    天地会珠海分舵注:随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生.从获得微信应用号邀请的业内人士发出来的一张开发工具源码截图可以看到,reacjs及其相应的FLUX框架altjs很有可能会成 ...

  8. 源于《Unity官方实例教程 “Space Shooter”》思路分析及相应扩展

    教程来源于:Unity官方实例教程 Space Shooter(一)-(五)       http://www.jianshu.com/p/8cc3a2109d3b 一.经验总结 教程中步骤清晰,并且 ...

  9. 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

随机推荐

  1. Hibernate——主键配置

    <id>元素中的<generator>用来为该持久化类的实例生成唯一的标识,hibernate提供了很多内置的实现. Increment:由hibernate自动递增生成标识符 ...

  2. sqlserver添加用户的时候出现 错误18456

    1.用本机默认的window身份验证登录 2.登录成功后,在数据库->安全性->登录名->右键属性->如图选择“新建登录名” 3.在如图所示的登录名中,输入将要新建的登录用户, ...

  3. MSDN(电驴)

    主站: http://msdn.itellyou.cn/ 辅站: http://msdn.ez58.net/

  4. [ CodeVS冲杯之路 ] P3955

    不充钱,你怎么AC? 题目:http://codevs.cn/problem/3955/ 最长上升子序列的加强版,n 有1000000,n 方的 DP 肯定会 TLE,那么用二分栈维护 二分栈我讲不好 ...

  5. 【Unity Shaders】学习笔记——SurfaceShader(六)混合纹理

    [Unity Shaders]学习笔记——SurfaceShader(六)混合纹理 转载请注明出处:http://www.cnblogs.com/-867259206/p/5619810.html 写 ...

  6. Android开发-API指南-<manifest>

    <manifest> 英文原文:http://developer.android.com/guide/topics/manifest/manifest-element.html 采集(更新 ...

  7. iOS copy&mutableCopy理解

    Copy&mutableCopy   通过copy方法可以创建可变或不可变对象的不可变副本,通过mutableCopy可以创建可变或不可变对象的可变副本. 拷贝分为浅拷贝和深拷贝: 浅拷贝:指 ...

  8. tar: 从成员名中删除开头的“/”

    在压缩文件时,当后面的备份目录使用绝对路径时,会出现: tar zcvf   /usr/OutFile.tar.gz  /data/CTest tar: 从成员名中删除开头的“/” 此时,对tar增加 ...

  9. NOI2002 银河英雄传说

    P1196 银河英雄传说 367通过 1.1K提交 题目提供者该用户不存在 标签并查集NOI系列2001(或之前) 难度提高+/省选- 提交该题 讨论 题解 记录 最新讨论 莱因哈特什么鬼? 私人代码 ...

  10. idea 文件名乱码问题的解决

    参考:http://www.cnblogs.com/xingma0910/p/4651889.html idea:文件名乱码: