零基础学Python Web开发在线考试系统-Django框架入门项目第6课-静态文件(真正带你上路玩转实战项目开发)

本文章项目开源地址:
https://codechina.csdn.net/csdn-django-web/django_kaoshi_demo

系列文章目录
提示:需要下载代码的朋友可以去上面的开源项目库中拉代码,想参与一起学习的同学可以一起加入项目组中开发

零基础学Python Web开发在线考试系统-Django框架入门项目系列课程(真正带你上路玩转实战项目开发)——目录
《零基础学Python Web开发在线考试系统-Django框架入门项目第1课-请求和响应(真正带你上路玩转实战项目开发)》

《零基础学Python Web开发在线考试系统-Django框架入门项目第2课-模型和管理站点(真正带你上路玩转实战项目开发)》

《零基础学Python Web开发在线考试系统-Django框架入门项目第3课-视图和模板(真正带你上路玩转实战项目开发)》

《零基础学Python Web开发在线考试系统-Django框架入门项目第4课-表单和通用视图(真正带你上路玩转实战项目开发)》

《零基础学Python Web开发在线考试系统-Django框架入门项目第5课-测试(真正带你上路玩转实战项目开发)》

《零基础学Python Web开发在线考试系统-Django框架入门项目第6课-静态文件(真正带你上路玩转实战项目开发)》

《零基础学Python Web开发在线考试系统-Django框架入门项目第7课-自定义管理站点(真正带你上路玩转实战项目开发)》

提示:大家喜欢的请帮忙一键三连,有问题的朋友可以在评论区留言。

文章目录
系列文章目录
零基础学Python Web开发在线考试系统-Django框架入门项目系列课程(真正带你上路玩转实战项目开发)——目录
前言
一、准备工作
开发环境的安装:
Python安装:
Django安装:
PyCharm安装:
环境安装验证
二、开始开发
自定义 应用 的界面和风格
静态文件命名空间
kaoshi/static/kaoshi/style.css
kaoshi/templates/kaoshi/index.html
$ python manage.py runserver
添加一个背景
kaoshi/static/kaoshi/style.css
警告
总结
前言
本系列文章的目的:

带你零基础学Python Web开发,并通过真实项目-在线考试系统-来学习如何利用Django框架。
因为知识点比较多,工作量比较大,文章章节就7课时,所以最终实现的功能不多,先实现单选题的功能,
但整个项目下来,会让你真正的上手开发,后期你可以自己按照本系列文章继续添加其他功能。

废话咱就不多说了,下面开始吧,如果中途有问题请在评论区留言或私信联系。

一、准备工作
开发环境的安装:
Python安装:
楼梯在此:https://huidaoli.blog.csdn.net/article/details/121607251

Django安装:
楼梯在此:https://huidaoli.blog.csdn.net/article/details/121607251
或 https://huidaoli.blog.csdn.net/article/details/121465897

PyCharm安装:
楼梯在此:https://huidaoli.blog.csdn.net/article/details/121465897

环境安装验证
若要验证 Django 是否能被 Python 识别,可以在 shell 中输入 python。 然后在 Python 提示符下,尝试导入 Django:

>>> import django
>>> print(django.get_version())
3.2
1
2
3
当然了,你也可能安装的是其它版本的 Django。

二、开始开发
自定义 应用 的界面和风格
首先,在你的 kaoshi目录下创建一个名为 static 的目录。Django 将在该目录下查找静态文件,这种方式和 Diango 在 kaoshi/templates/ 目录下查找 template 的方式类似。

Django 的 STATICFILES_FINDERS 设置包含了一系列的查找器,它们知道去哪里找到 static 文件。AppDirectoriesFinder 是默认查找器中的一个,它会在每个 INSTALLED_APPS 中指定的应用的子文件中寻找名称为 static 的特定文件夹,就像我们在 kaoshi 中刚创建的那个一样。管理后台采用相同的目录结构管理它的静态文件。

在你刚创建的 static 文件夹中创建一个名为 kaoshi的文件夹,再在 kaoshi文件夹中创建一个名为 style.css 的文件。换句话说,你的样式表路径应是 kaoshi/static/kaoshi/style.css。因为 AppDirectoriesFinder 的存在,你可以在 Django 中以 kaoshi/style.css 的形式引用此文件,类似你引用模板路径的方式。

静态文件命名空间
虽然我们 可以 像管理模板文件一样,把 static 文件直接放入 kaoshi/static (而不是创建另一个名为 kaoshi的子文件夹),不过这实际上是一个很蠢的做法。Django 只会使用第一个找到的静态文件。如果你在 其它 应用中有一个相同名字的静态文件,Django 将无法区分它们。我们需要指引 Django 选择正确的静态文件,而最好的方式就是把它们放入各自的 命名空间 。也就是把这些静态文件放入 另一个 与应用名相同的目录中。

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

kaoshi/static/kaoshi/style.css
li a {
    color: green;
}

1
2
3
4
下一步,在 kaoshi/templates/kaoshi/index.html 的文件头添加以下内容:

kaoshi/templates/kaoshi/index.html
{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'kaoshi/style.css' %}">
1
2
3
{% static %} 模板标签会生成静态文件的绝对路径。

这就是你开发所需要做的所有事情了。

启动服务器(如果它正在运行中,重新启动一次):

$ python manage.py runserver
重新载入 http://localhost:8000/kaoshi/ ,你会发现有问题的链接是绿色的 (这是 Django 自己的问题标注方式),这意味着你追加的样式表起作用了。

添加一个背景
接着,我们会创建一个用于存在图像的目录。在 kaoshi/static/kaoshi目录下创建一个名为 images 的子目录。在这个目录中,放一张名为 background.gif 的图片。换言之,在目录 kaoshi/static/kaoshi/images/background.gif 中放一张图片。

随后,在你的样式表(kaoshi/static/kaoshi/style.css)中添加:

kaoshi/static/kaoshi/style.css
body {
    background: white url("images/background.gif") no-repeat;
}
1
2
3
浏览器重载 http://localhost:8000/kaoshi/,你将在屏幕的左上角见到这张背景图。

警告
{% static %} 模板标签在静态文件(例如样式表)中是不可用的,因为它们不是由 Django 生成的。你应该始终使用 相对路径 在你的静态文件之间相互引用,因为这样你可以更改 STATIC_URL (由 static 模板标签使用来生成 URL),而无需修改大量的静态文件。

这些只是 基础 。更多关于设置和框架的资料,参考 静态文件解惑 和 静态文件指南。部署静态文件 介绍了如何在真实服务器上使用静态文件。

总结
当你熟悉静态文件后,阅读 本系列文章第7课时来学习如何自定义 Django 自动生成后台网页的过程。


————————————————
版权声明:本文为CSDN博主「huidaoli」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/huidaoli/article/details/121610244

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值