编写你的第一个 Django app,第六部分(Page 11)转载请注明链接地址

本教程上接前面第五部分的教程。我们构建了一个经过测试的 web-poll应用,现在我们会添加一个样式表和一张图片。

除了服务器上生成的HTML,web应用一般需要其他文件 —— 例如图片,JavaScript,或CSS —— 渲染完整的web页面所必须的内容。在Django中,我们引用的这些文件称为“静态文件”。

对于小的项目,这没有什么大不了。因为你只要将这些静态文件保存到你的web服务器可以找到的地方就可以了。然而在比较大的项目中 —— 尤其有多个app组成的项目中 —— 处理多个应用提供的静态文件集合会变得很棘手。

这正是 django.contrib.staticfiles 的用途: 它从将每个应用收集到的静态文件集中到一个在生产环境中容易维护的单独的位置(意思就是把静态文件收集起来,放到一个指定的位置,这个位置为可以方便项目使用)。

自定义你的应用的外观

首先,在polls应用的目录下创建一个名为static目录。Django从这里查找静态文件,和Django在polls/templates/中查找模板一样。

Django 的STATICFILES_FINDERS(这里少一个链接)设置包含一个查找器列表,它知道如何从多个源中发现静态文件。默认的一个是AppDirectoriesFinder,它会在每个INSTALLED_APPS(这里少一个链接)中查找“static”子目录,就像查找我们刚刚在polls中创建的“static”一样。admin站点为它的静态文件使用相同的目录结构。

在你刚刚创建的static目录中,创建另外一个名字是polls的目录,并在它下面创建一个名字是 style.css 的文件。也就是说,你的样式表文件应该被放在 polls/static/polls/style.css。由于AppDirectoriesFinder静态文件查找器的工作方式,你可以在django中以polls/style.css的方式应用这个静态文件,与你引用模板的路径类似。

静态文件命名空间

就像模板一样,我们可以直接将惊天文件放入polls/static中(而不是创建另外一个polls目录),但这实际上是个坏主意。如果你在不同的应用中使用了同名的静态文件,Django就会无法区分它们,Django会选择找到的第一个名字匹配的静态文件。我们需要告诉Django找到正确的的那一个,最简单的方式是通过命名空间。也就是说,把这些静态文件放入以应用自己的名字命名的另外一个目录。

将下面的代码放入样式表中(polls/static/polls/style.css):

/* polls/static/polls/style.css */
li a {
color: green;
}

下一步,在polls/templates/polls/index.html顶部加入如下代码:

<!--polls/templates/polls/index.html-->
{% load static %} <link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />

{% static %}模板标签会生成静态文件的绝对路径。

这就是你在开发中需要做的所有事情。重新打开http://localhost:8000/polls/,你会看到question的链接是绿色的(django的样式),这表示你的样式表被正确的加载了。

添加一张背景图片

下一步,我们会为图片创建一个子目录。在polls/static/polls/目录创建一个images子目录。在这个目录里,放一张名字是background.gif的图片。也就是说,把你的图片放在polls/static/polls/images/background.gif

然后,把它添加到你的样式表中(polls/static/polls/images/background.gif):

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

重新打开http://localhost:8000/polls/,你会看到在屏幕的右下角加载了一张背景图片。

注意

{% static %} 模板标签在不是通过django生成的静态文件中是无效的(意就是说 {% static %} 是django自己用的)。你应该使用相对路径将你的静态文件链接起来,因为这样你就可以修改STATIC_URL (这里少一个链接)(静态模板标签( static template tag(这里少一个链接))用来生成它的URLs)而不用修改许多静态文件中的路径。

这些都是基础知识,更多关于设置和其他细节的内容请查看 the static files howto(这里少一个链接)the staticfiles reference(这里少一个链接)Deploying static files(这里少一个链接) 讨论如何在真是的服务器上使用静态文件。

如果你已经熟悉了静态文件,就可以开始学习下一节内容了:如何自定义django自动生成的admin站点(page 12)。

Django 2.0.1 官方文档翻译:编写你的第一个 Django app,第六部分(Page 11)的更多相关文章

  1. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第一部分(Page 6)

    编写你的第一个 Django app,第一部分(Page 6)转载请注明链接地址 Django 2.0.1 官方文档翻译: Django 2.0.1.dev20171223092829 documen ...

  2. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第五部分(Page 10)

    编写你的第一个 Django app,第五部分(Page 10)转载请注明链接地址 我们继续建设我们的 Web-poll 应用,本节我们会为它创建一些自动测试. 介绍自动测试 什么是自动测试 测试是简 ...

  3. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第二部分(Page 7)

    编写你的第一个 Django app,第二部分(Page 7)转载请注明链接地址 本教程上接前面的教程.我们会配置数据,创建你的第一个 model,并对Django 自动生成的 admin 站点进行快 ...

  4. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第七部分(Page 12)

    编写你的第一个 Django app,第七部分(Page 12)转载请注明链接地址 本节教程承接第六部分(page 11)的教程.我们继续开发 web-poll应用,并专注于自定义django的自动生 ...

  5. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第四部分(Page 9)

    编写你的第一个 Django app,第四部分(Page 9)转载请注明链接地址 该教程上接前面的第三部分.我们会继续开发 web-poll 应用,并专注于简单的表单处理和简化代码. 写一个简单的表单 ...

  6. Django 2.0.1 官方文档翻译: 编写你的第一个 Django app,第三部分(Page 8)

    编写你的第一个 Django app,第三部分(Page 8)转载请注明链接地址 本页教程接前面的第二部分.我们继续开发 web-poll app,我们会专注于创建公共接口上 -- "视图& ...

  7. Django 2.0.1 官方文档翻译:编写你的第一个djang补丁(page 15)

    编写你的第一个djang补丁(page 15) 介绍 有兴趣为社区做一些贡献?可能你发现了django中的一个你想修复的bug,或者你你想添加一个小小的功能. 回馈django就是解决你遇到的问题的最 ...

  8. Django 2.0.1 官方文档翻译: 高级教程:如何编写可重用的app (page 13)

    高级教程:如何编写可重用的app (page 13) 本节教程上接第七部分(Page 12).我们会把我们的 web-poll应用转换成一个独立的python包,你可以在新的项目中重用或者把它分享给其 ...

  9. Django 2.0.1 官方文档翻译: 如何安装 django (Page 17)

    如何安装 django(Page 17) 这一部分可以让你将 Django 运行起来. 安装 Python 作为 python 的一个 web 框架,Django 依赖 Python.Python 的 ...

随机推荐

  1. 第一个spring冲刺第二天

    讨论成员:王俊凯.罗凯杰.王逸辉.马志磊 地点:宿舍 话题:讨论关于安卓的控件的应用和如何调用 选题:四则运算 方向:更加实用的计算器功能,功能更加实用并且简单,没有太多的繁琐操作,可以的话会加上些趣 ...

  2. 《软件工程和Python》第0周作业1

    写在前面的话 欢迎大家开始一段新的课程学习!从开博客开始吧.每次博客作业都会有评分,计入总成绩哦. 1.   截止日期 本次作业的提交截止时间:见老师要求 2.   作业要求 (1)建立个人技术博客和 ...

  3. MongoDB安装笔记

    2017年11月17日,在Windows Service 2008R2上成功安装MongoDB. 版本:mongodb-win32-x86_64-2008plus-ssl-3.4.6-signed.m ...

  4. 使用Fiddler重定向App的网络请求

    前言 开发中手机app只能访问生产环境地址,所以给开发调试带来不便,可以通过Fiddler的代理和urlreplace方式解决. 步骤 1.开启Fiddler的代理模式Tools->Teleri ...

  5. 程序集里包含多个版本dll引用 ,强制低版本到制定版本dll引用

    在 config 的 <configuration> 节点内加入以下 类似信息 以下是以Newtonsoft.Json 为例子 <runtime> <assemblyBi ...

  6. JVM内存模型二

    Java 中通过多线程机制使得多个任务同时执行处理,所有的线程共享JVM内存区域main memory,而每个线程又单独的有自己的工作内存,当线程与内存区域进行交互时,数据从主存拷贝到工作内存,进而交 ...

  7. spring+struts整合

    首先是为什么整合strut2和spring? struts2的action是由struts2自己创建出来的,它不受spring的委托,也不受spring的管理,所以无法进行自动注入:spring和st ...

  8. OpenSSL 自签名证书

    通过下面9步,可以轻松生成自签名证书. 1.安装.部署OpenSSL 略 2.创建文件夹(下面通常root文件夹).用来放即将创建的各种证书等.如:I:\Key10.167.219.64 3.在roo ...

  9. 远程连接工具SSH和linux的连接

    实际开发中,Linux服务器都在其他的地方,我们要通过远程的方式去连接Linux并操作它,Linux远程的操作工具有很多,企业中常用的有Puttty.secureCRT.SSH Secure等.我使用 ...

  10. 【BZOJ1858】序列操作(线段树)

    [BZOJ1858]序列操作(线段树) 题面 BZOJ 题解 这题思路很简单,细节很烦,很码 维护区间翻转和区间赋值标记 当打到区间赋值标记时直接覆盖掉翻转标记 下放标记的时候先放赋值标记再放翻转标记 ...