本教程从教程 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音视频开发28-Onvif信息获取

    一.前言 严格意义上来说,Onvif处理这块算不上音视频开发的内容,为何重新整理放在音视频开发这个类别,主要是为了方便统一管理,而且在视频监控处理这块,通过onvif来拿到音视频流这是必经的阶段,也算 ...

  2. OpenGL ES 3.x游戏开发(上+下卷)书籍的电子版+源程序

    直接附上电子书以及源代码下载链接:https://pan.baidu.com/s/1G10hw5aIi-Bc2LyktwKrdg

  3. keycloak~巧用client-scope实现token字段和userinfo接口的授权

    keycloak中的client-scope允许你为每个客户端分配scope,而scope就是授权范围,它直接影响了token中的内容,及userinfo端点可以获取到的用户信息,这块我们可以通过自定 ...

  4. Springboot 整合 xxl-job

    前言 很久很久以前写过好几篇关于定时任务的使用系列的文章: 这一篇是最简单的,就是单纯跑跑定时任务,那你看这篇就行,没必要用xxljob(因为xxljob要跑服务端,然后自己服务作为客户端接入): 文 ...

  5. runoob-Android 基础入门教程-1

    https://www.runoob.com/w3cnote/android-tutorial-interface-design.html 公司的话,大部分使用的都是Axure Rp,但是这个东西比较 ...

  6. JAVA多线程和并发性知识点总结

    一. 什么是进程.线程?线程和进程的区别?1. 进程当一个程序进入内存运行时,即变成一个进程.进程是处于运行过程中的程序.进程是操作系统进行资源分配和调度的一个独立单位.进程的三个特征: 独立性独立存 ...

  7. 第五章 ReentrantLock源码解析

    最常用的方式: int a = 12; //注意:通常情况下,这个会设置成一个类变量,比如说Segement中的段锁与copyOnWriteArrayList中的全局锁 final Reentrant ...

  8. Java怎样实现将数据导出为Word文档

    文章首发于我的博客:Java怎样实现将数据导出为Word文档 - Liu Zijian's Blog 我们在开发一些系统的时候,例如OA系统,经常能遇到将审批单数据导出为word和excel文档的需求 ...

  9. hackmyvm靶机拯救者模式解决分配不到ip的问题 转载

    https://www.cnblogs.com/jason-huawen/p/16851113.html https://www.cnblogs.com/asstart/p/12626494.html ...

  10. 2025春秋杯部分wpDAY1

    2025春秋杯 DAY1 WEB easy_flask 直接fenjing一把梭 file_copy 下载github上的脚本 MISC 简单算术 题目提示了异或 简单镜像提取 formost提取到镜 ...