本教程从教程 5 停止的地方开始。我们已经构建了一个经过测试的网络投票应用程序,现在我们将添加一个样式表和一个图像。

除了服务器生成的 HTML 之外,Web 应用程序通常需要提供呈现完整网页所需的其他文件(例如图像、JavaScript 或 CSS)。在 Django 中,我们将这些文件称为“静态文件”。

对于小型项目,这没什么大不了的,因为您可以将静态文件保存在Web服务器可以找到的地方。但是,在较大的项目中(尤其是由多个应用程序组成的项目),处理每个应用程序提供的多组静态文件开始变得棘手。

这就是 django.contrib.staticfiles 的用途:它将每个应用程序(以及您指定的任何其他位置)的静态文件收集到一个可以在生产中轻松提供的位置。

一、自定义应用的外观和感觉

首先,在 polls 目录中创建一个名为 static 的目录。Django 将在那里查找静态文件,类似于 Django 在 polls/templates/ 中查找模板的方式。

Django 的 STATICFILES_FINDERS 设置包含一个发现者列表,这些查找器知道如何从各种来源发现静态文件。

默认值之一是 AppDirectoriesFinder ,它在每个 INSTALLED_APPS 中查找一个“静态”子目录,就像我们刚刚创建的 polls 中的子目录一样。管理站点对其静态文件使用相同的目录结构。

在您刚刚创建的 static 目录中,创建另一个名为 polls 的目录,并在该目录中创建一个名为 style.css 的文件。

换句话说,您的样式表应该在 polls/static/polls/style.css 。

由于 AppDirectoriesFinder 静态文件查找器的工作方式,您可以在 Django 中将此静态文件称为 polls/style.css ,类似于您引用模板路径的方式。

将以下代码放入该样式表 ( polls/static/polls/style.css ):

li a {
color: red;
}

接下来,在 polls/templates/polls/index.html 的顶部添加以下内容:

{% load static %}

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

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

这就是您需要为开发所做的一切。

启动服务器(如果它已经在运行,则重新启动它):

$ python manage.py runserver

重新加载 http://localhost:8000/polls/ ,你应该看到问题链接是绿色的(Django风格!),这意味着你的样式表已正确加载。

二、添加背景图像

接下来,我们将为图像创建一个子目录。在 polls/static/polls/ 目录中创建一个 images 子目录。

在此目录中,添加要用作背景的任何图像文件。出于本教程的目的,我们使用一个名为 background.png 的文件,

该文件将具有完整路径 polls/static/polls/images/background.png 。

然后,在样式表中添加对图像的引用 ( polls/static/polls/style.css ):

body {
background: white url("images/background.png") no-repeat;
} li a {
color: red;
}

重新加载 http://localhost:8000/polls/ ,您应该会看到屏幕左上角加载的背景。

这些是基础知识。有关框架中包含的设置和其他位的更多详细信息,请参阅静态文件操作方法和静态文件参考。

部署静态文件讨论了如何在真实服务器上使用静态文件。

当你熟悉静态文件时,请阅读本教程的第 7 部分,了解如何自定义 Django 自动生成的管理站点。

-----------------------------------end-------------------------------------

 

编写你的第一个 Django 应用程序,第6部分的更多相关文章

  1. 编写你的第一个django应用程序2

    从1停止的地方开始,我们将设置数据库,创建您的第一个模型,并快速介绍django自动生成的管理站点 数据库设置 现在,打开mysite/settings.py.这是一个普通的python模块,其中模块 ...

  2. 编写你的第一个django应用程序4

    本教程上接教程3,我们将继续开发网页投票应用,本部分将主要关注简单的表单处理以及如何对代码进行优化 写一个简单的表单 让我们更新一下在上一个教程中编写的投票详细页面的模板(‘polls/detail. ...

  3. 编写你的第一个django应用程序3

    这一篇从教程第2部分结尾的地方继续讲起.我们将继续编写投票应用,并且专注于如何创建公用界面--也被称为视图 概况 django视图概念是一类具有相同功能和末班的网页的集合,比如,在一个博客应用中,你可 ...

  4. Django教程:第一个Django应用程序(3)

    Django教程:第一个Django应用程序(3) 2013-10-08 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq 37391319 #博客: ...

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

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

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

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

  7. 第一个Django应用程序_part3

    一.概述 此文延续第一个Django应用程序part2. 官方文档:https://docs.djangoproject.com/en/1.11/intro/tutorial03/ view是Djan ...

  8. 编写你的第一个Django应用

    安装 Python 作为一个 Python Web 框架,Django 需要 Python.更多细节请参见 我应该使用哪个版本的 Python 来配合 Django?. Python 包含了一个名为  ...

  9. 搭建你的第一个Django应用程序

    首先你要确保你机器上面安装了python:Python开发_python的安装 python的相关学习资料:http://www.cnblogs.com/hongten/tag/python/ 其次, ...

  10. Django教程:第一个Django应用程序(4)

    Django教程:第一个Django应用程序(4) 2013-10-09 磁针石 #承接软件自动化实施与培训等gtalk:ouyangchongwu#gmail.comqq 37391319 #博客: ...

随机推荐

  1. Qt编写地图综合应用39-覆盖物圆形

    一.前言 圆形的应用场景和多边形.矩形基本一致,支持的属性也是一致,比如可以设置线条的颜色.线条的粗细.线条透明度等.也是用来框起一块区域,然后根据坐标点集合,找到该区域内的标注点集合,比如指定某个县 ...

  2. MFC-error C2589: “(”:“::”右边的非法标记

    MFC-error C2589: "(":"::"右边的非法标记 错误信息 出错语句 问题原因 解决办法 错误信息 ① 错误 C2589 "(&quo ...

  3. 在用Android StudioBuild项目时,提示:Could not resolve all files for configuration ':classpath'.Could not find com.android.tools.

    在用Android StudioBuild项目时,提示:Could not resolve all files for configuration ':classpath'.Could not fin ...

  4. 即时通讯技术文集(第33期):IM开发综合技术合集(Part6) [共12篇]

    为了更好地分类阅读 52im.net 总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第33 期. [- 1 -] IM开发技术学习:揭秘微信朋友圈这种信息推流背后的系统设计 [链接 ...

  5. 记一次 .NET某汗液测试机系统 崩溃分析

    一:背景 1. 讲故事 上个月在社区写的文章比较少,一直关注的朋友应该知道那段时间被狗咬了以及一些琐事处理,所以手头上也攒了不少需要分享的案例,这段时间比较空闲,逐个给大 家做个分享吧,刚好年后为新版 ...

  6. Redis学习笔记之spring-data-redis

    一.关于spring-data-redis spring-data-redis针对jedis提供了如下功能: 连接池自动管理,提供了一个高度封装的"RedisTemplate"类 ...

  7. CDS标准视图:维护计划 I_MaintenancePlanBasic

    视图名称:维护计划 I_MaintenancePlanBasic 视图类型:基础 视图代码: 点击查看代码 @AbapCatalog.compiler.compareFilter: true @Aba ...

  8. RESTful 架构详解-copy

    1. 什么是REST REST全称是Representational State Transfer,中文意思是表述(编者注:通常译为表征)性状态转移. 它首次出现在2000年Roy Fielding的 ...

  9. 基于C#实现多线程启动停止暂停继续

    大家好!我是付工. 大部分初学者在学习C#上位机编程时,多线程是一个很难逾越的鸿沟,不合理地使用多线程,会导致经常出现各种奇怪的问题,这也是很多初学者不敢使用多线程的原因.但是在实际开发中,多线程是一 ...

  10. IOC 操作Bean管理(xml 注入集合属性)+(bean 作用域)

    1.注入数组类型属性2.注入 List 集合类型属性3.注入 Map 集合类型属性(1)创建类,定义数组.list.map.set 类型属性,生成对应 set 方法 public class Stu ...