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


Posted in Python onJuly 28, 2019

在一个网页中,不仅仅只有一个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' %}" rel="external nofollow" >

注意: {% 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 不使用缓存加载一个文件

以上这篇对Django中static(静态)文件详解以及{% static %}标签的使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Django中利用filter与simple_tag为前端自定义函数的实现方法
Jun 15 Python
python实现学生管理系统
Jan 11 Python
python通过elixir包操作mysql数据库实例代码
Jan 31 Python
对python中的iter()函数与next()函数详解
Oct 18 Python
Python常见数据类型转换操作示例
May 08 Python
python定义类self用法实例解析
Jan 22 Python
Selenium启动Chrome时配置选项详解
Mar 18 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
Apr 01 Python
python3检查字典传入函数键是否齐全的实例
Jun 05 Python
Python引入多个模块及包的概念过程解析
Sep 21 Python
全网最详细的PyCharm+Anaconda的安装过程图解
Jan 25 Python
Python-OpenCV教程之图像的位运算详解
Jun 21 Python
解决Django Static内容不能加载显示的问题
Jul 28 #Python
基于Django静态资源部署404的解决方法
Jul 28 #Python
Python占用的内存优化教程
Jul 28 #Python
解决Django加载静态资源失败的问题
Jul 28 #Python
django之静态文件 django 2.0 在网页中显示图片的例子
Jul 28 #Python
python正则-re的用法详解
Jul 28 #Python
django ModelForm修改显示缩略图 imagefield类型的实例
Jul 28 #Python
You might like
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
use jscript List Installed Software
2007/06/11 Javascript
jquery ajax 简单范例(界面+后台)
2013/11/19 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
javascript获得当前的信息的一些常用命令
2015/02/25 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
2018/05/02 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
python里对list中的整数求平均并排序
2014/09/12 Python
Python import自定义模块方法
2015/02/12 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
Python用sndhdr模块识别音频格式详解
2018/01/11 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python实现大文件分割与合并
2019/07/22 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
python 回溯法模板详解
2020/02/26 Python
Django ValuesQuerySet转json方式
2020/03/16 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
Champion官网:美国冠军运动服装
2017/01/25 全球购物
周生生珠宝香港官网:Chow Sang Sang(香港及海外配送)
2019/09/05 全球购物
公路绿化方案
2014/05/12 职场文书
大学生简短的自我评价
2014/09/12 职场文书
2014年幼儿园学期工作总结
2014/12/05 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle