本教程从教程 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开源作品20-PNG图片警告去除工具

    一.前言 在新版的Qt5中,我们之前在Qt4中使用的png图片,到了这里经常会报一个警告,libpng warning: iCCP: known incorrect sRGB profile,尽管这种 ...

  2. Qt音视频开发17-海康sdk解码

    一.前言 在视频监控行业领域,海康当之无愧是老大,稳坐第一的宝座很多年了,近期需要将视频监控系统改成采用海康sdk的内核,于是特意去查阅了sdk的使用手册,sdk相关的文档和文件可以直接官网下载到,而 ...

  3. 使用 Visual Studio Code 进行调试

    现在是时候实践你新获得的调试知识了. 我们刚好有一个完美的机会. 在我们的 Tailwind Traders 应用中,我们正在开发一项新功能:允许以多种货币显示产品的价格. 一位同事为这一目的编写了一 ...

  4. 《Maven应用实战》一书的在线学习网址和源码链接

    <Maven应用实战>杨世文,孙会军 在线学习网址:http://c.biancheng.net/view/4756.html 源码链接:https://pan.baidu.com/s/1 ...

  5. C#中字符串格式化string.Forma中需要使用t转义字符的情况处理

    此处汇总一下C#中字符串格式化string.Forma中需要使用t转义字符的情况处理. 1.C# string.Format() 方法中占位大括号的外面还有大括号,此时就需要使用转义大括号{}. 处理 ...

  6. Web网页端IM产品RainbowChat-Web的v7.1版已发布

    一.关于RainbowChat-Web RainbowChat-Web是一套Web网页端IM系统,是RainbowChat的姊妹系统(RainbowChat是一套基于开源IM聊天框架 MobileIM ...

  7. 第一二章(Nginx+Lua)开发环境

    第一章 安装OpenResty(Nginx+Lua)开发环境 首先我们选择使用OpenResty,其是由Nginx核心加很多第三方模块组成,其最大的亮点是默认集成了Lua开发环境,使得Nginx可以作 ...

  8. jQuery---操作指南

    功能代码(1)---通过Jquery来处理复选框 实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 ...

  9. 小米CR6606,CR6608,CR6609 启用SSH和刷入OpenWRT 23.05.5

    上个月极低的价格得到一台CR6606和一台CR6609, 一直没时间研究, 终于趁春节假期把这两个都刷成 OpenWRT 配置说明 CPU: MT7621AT,双核880MHz 内存: NT5CC12 ...

  10. 第一!天翼云领跑中国边缘云laaS市场!

    近日,弗若斯特沙利文(Frost & Sullivan,简称"沙利文")联合头豹研究院发布<2023年中国边缘云市场报告>,天翼云在2023H1中国边缘云Iaa ...