本教程从教程 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自定义控件大全文章导航

    文章 链接 Qt编写自定义控件1-汽车仪表盘 https://qtchina.blog.csdn.net/article/details/89407746 Qt编写自定义控件2-进度条标尺 https ...

  2. Qt开发经验小技巧166-170

    有时候需要暂时停止某个控件发射信号(比如下拉框combobox添加数据的时候会触发当前元素改变信号),有多种处理,推荐用 blockSignals 方法. //方法1:先 disconnect 掉信号 ...

  3. 9.4classtest rewrite(仓库管理系统)

    第一部分,设计界面以及类的定义. import java.util.Scanner; public class viovo { static int number = 5;//五个商品信息 stati ...

  4. OGC——WFS服务

    一.WFS简介    OGC的WMS和WMTS规范都是有关空间数据显示的标准,而WFS(Web Feature Service)则允许用户在分布式的环境下通过HTTP对空间数据进行增.删.改.查. 具 ...

  5. Slate文档编辑器-Decorator装饰器渲染调度

    Slate文档编辑器-Decorator装饰器渲染调度 在之前我们聊到了基于文档编辑器的数据结构设计,聊了聊基于slate实现的文档编辑器类型系统,那么当前我们来研究一下slate编辑器中的装饰器实现 ...

  6. 移动端弱网优化专题(十四):携程APP移动网络优化实践(弱网识别篇)

    本文由携程技术团队Aaron分享,原题"干货 | 携程弱网识别技术探索",下文进行了排版和内容优化. 1.引言 网络优化一直是移动互联网时代的热议话题,弱网识别作为移动端弱网优化的 ...

  7. Python_图片对比问题汇总

    问题一. raise OSError(f"cannot write mode {im.mode} as JPEG") from eOSError: cannot write mod ...

  8. CDS标准视图:有技术对象的维修工单 I_MAINTORDERTECHOBJCUBE

    视图名称:有技术对象的维修工单 I_MAINTORDERTECHOBJCUBE 视图类型:基础 视图代码: 点击查看代码 @EndUserText.label: 'Maintenance Order ...

  9. CDS标准视图:维护计划数据 C_MaintenancePlanDEX

    视图名称:维护计划数据 C_MaintenancePlanDEX 视图类型:基础 视图代码: 点击查看代码 @AbapCatalog.sqlViewName: 'CMAINTPLANDEX' @Aba ...

  10. CICD:持续集成、持续交付、持续部署-基础概念

    一.简介 CI / CD的采用改变了开发人员和测试人员如何发布软件. 最初是瀑布模型,后来是敏捷开发,现在是DevOps,这是现代开发人员构建出色的产品的技术路线.随着DevOps的兴起,出现了持续集 ...