Django中static(静态)文件详解以及{% static %}标签的使用

Django静态文件加载失败?手把手教你解决MIME type ‘text/html‘报错问题 本文深入解析了Django开发中常见的静态文件加载失败问题,特别是因MIME类型错误导致的‘text/html’报错。文章从问题根源入手,详细对比了开发与生产环境的不同配置方案,提供了从settings.py核心配置检查、Nginx服务器设置到使用Django Debug Toolbar进行高级调试的完整解决方案,帮助开发者彻底根治静态文件服务配置问题。 阅读详情

想要深入学习Django的可以看一些这个视频:超细讲解Django打造大型企业官网

在一个网页中,不仅仅只有一个html骨架,还需要css样式文件,js执行文件以及一些图片等。因此在DTL中加载静态文件是一个必须要解决的问题。在DTL中,使用static标签来加载静态文件。要使用static标签,首先需要{% load static %}。

加载静态文件的步骤如下:
首先确保django.contrib.staticfiles已经添加到settings.INSTALLED_APPS中。
确保在settings.py中设置了STATIC_URL。
注意: 上面两条都是在创建Django 项目的时候就自动给我们弄好了,只要我们没有去改动它,就不用管。
在已经安装了的app下创建一个文件夹叫做static,然后再在这个static文件夹下创建一个当前app的名字的文件夹,再把静态文件放到这个文件夹下。例如你的app叫做book,有一个静态文件叫做book.jpg,那么路径为book/static/book/book.jpg。

(为什么在app下创建一个static文件夹,还需要在这个static下创建一个同app名字的文件夹呢?原因是如果直接把静态文件放在static文件夹下,那么在模版加载静态文件的时候就是使用book.jpg,如果在多个app之间有同名的静态文件,这时候可能就会产生混淆。而在static文件夹下加了一个同名app文件夹,在模版中加载的时候就是使用app名/book.jpg,这样就可以避免产生混淆。)
注意: 文件夹的名字必须为static 。

如果有一些静态文件是不和任何app挂钩的。即不再任何一个app的目录下。那么可以在settings.py中添加STATICFILES_DIRS,以后DTL就会在这个列表的路径中查找静态文件。例如我们在manage.py的同级目录下新建一个static的文件夹。然后在settings.py:中添加STATICFILES_DIRS

STATICFILES_DIRS = [
	os.path.join(BASE_DIR,"static")
]

注: 第三种和第四种方法都可以加载静态文件,我的个人习惯是在manage.py的同级目录下新建一个static文件夹,然后将所有的静态文件进行分类的在里面存储。而不去app中新建一个static的文件夹。但这只是我的个人习惯。毕竟不管是黑猫白猫,能抓到老鼠的就是好猫,所以只要我们能把项目做出来能运行,并且代码结构有逻辑性、层次感就行了。

在模版中使用load标签加载static标签。比如要加载在项目的static文件夹下的style.css的文件。那么示例代码如下:

{% load static %}

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

注意: {% load static %}需要放在html的头部位置(至少在使用static标签的上面),一般都是放在html的最上面。如果{% extend %}标签和{% load static %}同时存在,{% extend %}需要放在最上面,然后再放{% load static %}等标签。

如果不想每次在模版中加载静态文件都使用load加载static标签,那么可以在settings.py中的TEMPLATES/OPTIONS添加’builtins’:[‘django.templatetags.static’],这样以后在模版中就可以直接使用static标签,而不用手动的load了。
注意: 位置不要添加错误了

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            #添加在这个位置
            'builtins' : [
                'django.templatetags.static'
            ],
        },
    },
]

下面的不常用,但是可以了解一下。
如果没有在settings.INSTALLED_APPS中添加django.contrib.staticfiles。那么我们就需要手动的将请求静态文件的url与静态文件的路径进行映射了。示例代码如下:

from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
	# 其他的url映射
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

但平时我们并不会用到这个,Django内置已经将django.contrib.staticfiles添加进去了的,我们为什么要给他删除来自找麻烦呢?放在这里也只是提供一个参考,了解一下。

最后分享一个快捷键的使用:在我们写项目的时候,有时候修改了代码而没有效果,这是因为浏览器使用的缓存加载,这个时候我们就可以使用这个快捷键来不使用缓存加载一个文件,来达到查看修改代码之后的效果的目地。

ctrl+shift+r 不使用缓存加载一个文件

作者:stu_xujin
来源:优快云
原文:https://blog.youkuaiyun.com/xujin0/article/details/83421626
版权声明:本文为博主原创文章,转载请附上博文链接!

Django 4.x Static 静态文件使用示例和配置方法 大家好,我是Mr数据杨。让我带领大家穿越到三国时期,来一起学习Django如何使用静态文件。现在就像是主角郭嘉需要布置一场战场,其中的每一个元素,如兵器、战车,都是静态文件。郭嘉需要在中进行配置,就像他必须对战场有详细的规划和配置。在模板中使用静态文件,就像他在战场上有效地利用各种资源,把他们放在最需要的地方。郭嘉需要检查配置是否生效。如果兵器未按他的计划放置,那么他的策略可能会失败。静态文件配置参数的作用就好比郭嘉的各种策略。 阅读详情

相关推荐

Innovus ECO修复时序违例:ecoAddRepeater插Buffer原理与实战

芯片物理设计越到后期,时序收敛越依赖局部修正而非全局重跑。ECO(Engineering Change Order)作为数字后端高频操作,能在不破坏既有布局布线结果的前提下,精准修复DRV违例、hold时序问题或实现功能补丁。其中,插入Buffer或Inverter是拆解长线RC负载、改善max_transition/max_capacitance最直接的手段。Innovus提供的ecoAddRepeater命令封装了单元选择、坐标摆放和网表重连等底层细节,配合ecoRoute可快速完成绕线。合理选型Buf

weixin_31858171的博客 300

Django框架(四):django的基本包及静态文件static的介绍

文件中,包含:STATIC_URL = '/static/';这句话主要作用是起到静态文件static别名的作用,在任何位置导入静态文件夹里面的文件,都用别名:"/static/xxxxx文件"(即:/static/开头)说明:不管你用哪一种方式导入静态文件,在浏览器中,都会显示成上面脚本中的{%%}都是渲染,最终在浏览器中都是一样的;1.在工程project中的共用的。

白骨梦儿 9705

投第一篇SCIE英文期刊(详细步骤)

一个投稿SCIE英文期刊的过程

weixin_48849679的博客 1万+

django 静态文件(static)+模板函数(template)+中间件

想要使用自定义模板函数的话需要先创建用于存放函数的文件夹,而在django中对于自定义函数文件夹的名称有严格的要求,即要求存放自定义模板函数的文件夹必须叫。utils.py自定义函数一般有三种:1、一种是filter,这个最多只能传递两个参数,可作为if条件使用- 数据处理,参数:1~2个- 数据处理,if条件2、一种是simple_tag,这种不会限制参数的个数,但是不能作为IF的条件来使用,参数无限制 & 返回文本3、一种是inclusion_tag,,参数无限制 & HTML片段。

m0_73399600的博客 1216

19-5 ACC 自适应巡航控制系统需求

本专题由深圳季连AIgraphX李博及团队出品,主要讲解ACC自适应巡航控制系统的开发与仿真测试。具体说来,包括ACC标准/法规分析、系统需求、系统架构、软件需求、软件架构、算法建模、验证场景分析、仿真实验搭建等内容。 本节主要讲ACC系统需求。

AIgraphX 1088

《UDS协议从入门到精通》系列——图解0x83:访问时间参数

详细介绍UDS协议0x83服务,目标ECU的时序参数设置有哪些注意点?

车载系统攻城狮 2138

Django 中加载静态文件(static)详解

加载静态文件的步骤如下: 1、首先确django.contrib.staticfiles已经添加到settings.INSTALLED_APPS中。 2、确保在settings.py 中设置了STATIC_URL 上面两条都是在创建Django项目的时候就自动给我们弄好了,只要我们没有改动它,就不用管。 3、在已经安装的app下创建一个static文件夹,然后再在这个static文件夹下创建一...

J_wb49的博客 1万+

嵌入式编程模型 | 原型模式

本文介绍了原型模式在嵌入式传感器网络中的应用。原型模式通过复制现有对象创建新实例,避免了重复初始化开销,适用于设备配置克隆、状态复制等场景。文章以传感器网络为例,展示了原型模式的结构(抽象原型类、具体原型类、客户端)和实现方式,通过C语言代码演示了温度/湿度传感器的克隆过程。该模式能有效提升嵌入式系统资源复用效率,实现快速部署相似配置的传感器节点,同时保持内存优化和配置灵活性。

嵌入式大杂烩 146

DJango 学习(5)—— Django 静态文件配置 以及 简单操作

【代码】DJango 学习(5)—— Django 静态文件配置 以及 简单操作。

ShiJieDeYinYu的博客 1306

Transformer 时间序列预测实战

Transformer 时间序列预测实战

机器学习深度学习业余选手 743

基于深度学习的文字识别与检测算法研究

基于深度学习的文字识别与检测算法研究 1. 背景介绍 1.1 文字识别与检测的重要性 在当今信息时代,文字作为人类交流和传递信息的主要载体,无处不在。从日常生活中的路牌、广告牌,到办公场所的文件、合同,再到互联网上的网页、图片等

AI天才研究院 1043

python static 的用法,对Django中static(静态)文件详解以及{% static %}标签的使用方法...

在一个网页中,不仅仅只有一个html骨架,还需要css样式文件,js执行文件以及一些图片等。因此在DTL中加载静态文件是一个必须要解决的问题。在DTL中,使用static标签来加载静态文件。要使用static标签,首先需要{% load static %}。加载静态文件的步骤如下:首先确保django.contrib.staticfiles已经添加到settings.INSTALLED_APPS中...

weixin_34510298的博客 1106

【思博伦】史上最详细Spirent TestCenter测试仪使用教程精讲(一)!图解超赞超详细!!!

3. 在弹出的界面中,找到菜单栏中的“Connect/Create”,选择下拉框中的“Connect to Physical/Visual Chassis”,在弹出的对话框中输入思博伦测试仪的IP地址:192.168.6.244,点击“OK”;说明:目前我们只需要使用到Raw Stream Block,不需要用到Bound Stream Block。说明:如果要使用100G模式,由于硬件限制,必须连续3个面板端口同时配置为100G使用。打开安装包,并按照提示按照即可。

风云说通信 6478

django静态文件配置和使用

在我们配置的{% static 'css/bootstrap.css' %},中,如果写成{% static '/css/bootstrap.css' %}也就是css前面有个"/",那么django就会认为这是一个绝对路径,而不会把STATIC_URL配置项加到css前面,官网:https://docs.djangoproject.com/en/2.2/topics/forms/media/#form-asset-paths 中的Paths in asset definitions条目。

淘淘桃的博客 8725

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

[django] 静态文件STATICFILES_DIRS

首先,我们配置静态文件,要在setting.py里面加入如下几行代码: STATIC_URL = ‘/static/’ #the dir for command “python manage.py collectstatic” #BASE_DIR 是项目的绝对地址 STATIC_ROOT = os.path.join(BASE_DIR, ‘collect_static’) #以下不是必须的 STA...

Moke 9697

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Django后端开发——静态文件

后端学习自用笔记

m0_73927795的博客 2005

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

Django的Web开发模板加载静态文件load static以及{% static %}标签的使用方法

模板需要加载css样式文件等,js执行文件以及一些图片等。Django中加载静态文件是使用static标签来加载静态文件。要使用static标签{% load static %} 加载静态文件的步骤 注意: 文件夹的名字必须为static 后在settings.py:中添加STATICFILES_DIRS STATICFILES_DIRS = [ os.path.join(BASE_DIR,"static") ] 模版中使用load标签加载static标签。比如要加载在项目的static文件夹下的sty

weixin_44048169的博客 3309

Django STATIC_URL 的理解

# the settings above # STATIC SETTINGS STATIC_URL = '/static/' # BASE_DIR 是项目的绝对地址 STATIC_ROOT = os.path.join(BASE_DIR, 'collect_static') #以下不是必须的 各个app共用的文件可以放在这 STATICFILES_DIRS = ( os.path....

luo_xinyu的博客 6607

五.Django静态文件

Django静态文件 author: Once Day date:2022年2月13日 本文档在于总结相关内容,零散的知识难以记忆学习。 本文档基于windows平台。 全系列文档查看:Django基础知识_优快云博客。 1.使用静态文件 除了由服务器生成的HTML文件外,WEB应用一般需要提供一些其它的必要文件,比如图片文件、JavaScript脚本和CSS样式表等等,用来为用户呈现出一个完整的网页。在Django中,我们将这些文件统称为“静态文件”,因为这些文件的内容基本是固定不变的,不需要动态生成

梅花香自苦寒来,宝剑锋从磨砺出。 4038

django 静态资源配置详解

django 静态资源配置详解学习了django1.8的Managing static files一章,自己动手实验之后仍遇到几个问题,通过阅读saticfiles模块部分的源码终于理解了当中奥妙。

SevenSins 1万+

Django 在模板中引用静态文件

我们已经做好设置,Django 项目能处理静态文件了。现在可以在模板中利用静态文件改进外观及增添功能了 打开 index.html 模板,参照下述代码修改。为了方便查找,新增的行旁边有注释。 <!DOCTYPE html> {% load staticfiles %} <!-- 新增 --> <html lang="en"> <head> ...

fangsi1994_的博客 1679
上一篇: Django 基于类的通用视图
下一篇: Django添加favicon.ico图标
PyTtCcMm
博客等级 码龄8年 21粉丝 22原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值