本教程上接Part5 。前面已经建立一个网页投票应用并且测试通过,现在主要讲述如何添加样式表和图片。

  除由服务器生成的HTML文件外,网页应用一般还需要提供其它必要的文件——比如图片、JavaScript脚本和CSS样式表。这样才能为用户呈现出一个完整的网站。 在Django中,这些文件统称为“静态文件”。

  如果是在小型项目中,这只是个小问题,因为你可以将它们放在网页服务器可以访问到的地方。 但是呢,在大一点的项目中——尤其是由多个应用组成的项目,处理每个应用提供的多个静态文件集合还是比较麻烦的。

  但是Django提供了django.contrib.staticfiles:它收集每个应用(和任何你指定的地方)的静态文件到一个单独的位置,使得这些文件很容易维护。

自定义应用外观

  首先在polls路径中创建一个static目录。Django会从这里搜索静态文件,这个和Django在polls/templates/中查找对应的模板文件的方式是一样的。

  Django有一个STATICFILES_FINDERS的查找器,它会告诉Django从哪里查找静态文件。 其中有个内建的查找器AppDirectoriesFinder,它的作用是在每个INSTALLED_APPS下查找“static”子目录下的静态文件。管理站点的静态文件也是使用相同的目录结构。

  在你刚刚创建的static目录中,再创建一个polls目录并在它下面创建一个文件style.css。这样你的style.css样式表应该在polls/static/polls/style.css。因为根据AppDirectoriesFinder静态文件查找器的工作方式,Django会在polls/static找到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中添加如下内容:

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />

  {%static%}模板标签用户生成静态文件的绝对URL。以上你在开发过程中所需要对静态文件做的所有处理。 浏览器中重新载入http://localhost:8000/polls/, 你应该会看到Question的超链接变成了绿色(Django的风格),这也表明你的样式表成功引入了。

添加背景图片

  下一步,我们将创建一个子目录来存放图片。在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_URL( static模板标签用它来生成URLs)而不用同时修改一大堆静态文件的路径。

  这一上仅仅是基础。有关框架中包含的设置和其他更多详细信息,参见静态文件howto静态文件参考部署静态文件讲述如何在真实的服务器上使用静态文件。

  当您对静态文件掌握的差不多了时,请阅读本教程的第7部分,了解如何自定义Django自动生成的管理站点。

快速通道

Django 1.10中文文档-第一个应用Part6-静态文件的更多相关文章

  1. Django 1.10中文文档-第一个应用Part7-自定义管理站点

    开发第一个Django应用,Part7 本教程上接Part6.将继续完成这个投票应用,本节将着重讲解如果用Django自动生成后台管理网站. 自定义管理表单 通过admin.site.register ...

  2. Django 1.10中文文档-第一个应用Part2-模型和管理站点

    本教程继续Part1.我们将设置数据库,创建您的第一个模型,并快速介绍Django的自动生成的管理网站. 数据库设置 现在,编辑mysite/settings.py.它是一个用模块级别变量表示Djan ...

  3. Django 1.10中文文档-第一个应用Part5-测试

    本教程上接教程Part4. 前面已经建立一个网页投票应用,现在将为它创建一些自动化测试. 自动化测试简介 什么是自动化测试 测试是检查你的代码是否正常运行的行为.测试也分为不同的级别.有些测试可能是用 ...

  4. Django 1.10中文文档-第一个应用Part4-表单和通用视图

    本教程接Part3开始.继续网页投票应用程序,并将重点介绍简单的表单处理和精简代码. 一个简单表单 更新一下在上一个教程中编写的投票详细页面的模板polls/detail.html,让它包含一个HTM ...

  5. Django 1.10中文文档-第一个应用Part3-视图和模板

    本教程上接Django 1.10中文文档-第一个应用Part2-模型和管理站点.我们将继续开发网页投票这个应用,主要讲如何创建一个对用户开放的界面. 概览 视图是Django应用中的一“类”网页,它通 ...

  6. Django 1.10中文文档-第一个应用Part1-请求与响应

    在本教程中,我们将引导您完成一个投票应用程序的创建,它包含下面两部分: 一个可以进行投票和查看结果的公开站点: 一个可以进行增删改查的后台admin管理界面: 我们假设你已经安装了Django.您可以 ...

  7. Django 1.10中文文档—第一个Django应用Part1

    在本教程中,我们将引导您完成一个投票应用程序的创建,它包含下面两部分: 一个可以进行投票和查看结果的公开站点: 一个可以进行增删改查的后台admin管理界面: 我们假设你已经安装了Django.您可以 ...

  8. Django 1.10中文文档-执行查询

    Django 1.10中文文档: https://github.com/jhao104/django-chinese-doc 只要创建好 数据模型, Django 会自动为生成一套数据库抽象的API, ...

  9. Django 1.10中文文档-聚合

    Django 数据库抽象API 描述了使用Django 查询来增删查改单个对象的方法. 然而,有时候你要获取的值需要根据一组对象聚合后才能得到. 这个主题指南描述了如何使用Django的查询来生成和返 ...

随机推荐

  1. 关于对 NUMA 理解(学习笔记,便于以后查阅)

    对NUMA的理解: NUMA是多核心CPU架构中的一种,其全称为Non-Uniform Memory Access,简单来说就是在多核心CPU中,机器的物理内存是分配给各个核的,架构简图如下所示: 每 ...

  2. [剑指Offer] 55.链表中环的入口结点

    题目描述 一个链表中包含环,请找出该链表的环的入口结点. [思路]根据set集合的不重复,遍历链表时遇到的第一个重复结点就是环的入口结点. /* struct ListNode { int val; ...

  3. 第26天:js-$id函数、焦点事件

    一.函数return语句定义函数的返回值,在函数内部用return来设置返回值,一个函数只能有一个返回值.同时,终止代码的执行.所有自定义函数默认没有返回值return后面不要换行 var a=10, ...

  4. 判断IP地址是否在指定范围内的方法

    比如给定一个ip段:127.0.0.1 ~ 127.0.0.255,我们想判断一个给定的ip地址是否在此段内,可以先将ip地址转换成整数,然后整数比较大小就很容易了. 例如: 127.0.0.1 = ...

  5. bzoj4555-求和

    题目 \(S(i,j)\)表示第二类斯特林数,求: \[ f(n)=\sum _{i=0}^n\sum _{j=0}^iS(i,j)*2^j*j! \] 分析 公式推理很简单,关键是用到了第二类斯特林 ...

  6. [51nod1325]两棵树的问题

    description 题面 solution 点分治+最小割. 点分必选的重心,再在树上dfs判交,转化为最大权闭合子图. 可以做\(k\)棵树的情况. code #include<iostr ...

  7. [洛谷P3627][APIO2009]抢掠计划

    题目大意:给你一张$n(n\leqslant5\times10^5)$个点$m(m\leqslant5\times10^5)$条边的有向图,有点权,给你起点和一些可能的终点.问从起点开始,到任意一个终 ...

  8. BZOJ3771:Triple——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=3771 大意:给n把不同价值的斧子,从中选一把/两把/三把,所构成的每种价值和的可能情况有多少. 生 ...

  9. 从零开始学Linux系统(一)之引导流程解析

    Linux系统:分时多用户多任务的操作系统: Linux系统引导流程: inittab配置文件中: 定义了linux系统的运行的7个级别:从0~6 0.6:分别代表关机和重启,不建议设置为默认的运行级 ...

  10. 【DP】【P1586】四方定理

    传送门 Description Input 第一行为一个整数T代表数据组数,之后T行每行一个数n代表要被分解的数 Output 对于每个n输出一行,为方案个数 Sample Input Sample ...