django模板加载静态文件的方法步骤


Posted in Python onMarch 01, 2019

加载静态文件

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

首先确保 django.contrib.staticfiles 已经添加到 settings.INSTALLED_APPS 中。

确保在 settings.py 中设置了 STATIC_URL 。

在已经安装了的 app 下创建一个文件夹叫做 static ,然后再在这个 static 文件夹下创建一个当前 app 的名字的文件夹,再把静态文件放到这个文件夹下。例如你的 app 叫做 book ,有一个静态文件叫做 zhiliao.jpg ,那么路径为 book/static/book/zhiliao.jpg 。(为什么在 app 下创建一个 static 文件夹,还需要在这个 static 下创建一个同 app 名字的文件夹呢?原因是如果直接把静态文件放在 static 文件夹下,那么在模版加载静态文件的时候就是使用 zhiliao.jpg ,如果在多个 app 之间有同名的静态文件,这时候可能就会产生混淆。而在 static 文件夹下加了一个同名 app 文件夹,在模版中加载的时候就是使用 app/zhiliao.jpg ,这样就可以避免产生混淆。)

如果有一些静态文件是不和任何 app 挂钩的。那么可以在 settings.py 中添加 STATICFILES_DIRS ,以后 DTL 就会在这个列表的路径中查找静态文件。比如可以设置为:

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

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

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

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

如果没有在 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)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python中使用PyQt把网页转换成PDF操作代码实例
Apr 23 Python
详解Python装饰器由浅入深
Dec 09 Python
用python做一个搜索引擎(Pylucene)的实例代码
Jul 05 Python
pandas进行数据的交集与并集方式的数据合并方法
Jun 27 Python
python3中os.path模块下常用的用法总结【推荐】
Sep 16 Python
用python打印1~20的整数实例讲解
Jul 01 Python
Python Django简单实现session登录注销过程详解
Aug 06 Python
python使用opencv在Windows下调用摄像头实现解析
Nov 26 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
Apr 22 Python
Python自带的IDE在哪里
Jul 01 Python
Python pip 常用命令汇总
Oct 19 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
Jan 15 Python
Python3中编码与解码之Unicode与bytes的讲解
Feb 28 #Python
Python multiprocessing多进程原理与应用示例
Feb 28 #Python
Python中的异常处理try/except/finally/raise用法分析
Feb 28 #Python
python使用phoenixdb操作hbase的方法示例
Feb 28 #Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
Feb 28 #Python
Python类的继承、多态及获取对象信息操作详解
Feb 28 #Python
django模板结构优化的方法
Feb 28 #Python
You might like
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
PHP常用正则表达式精选(推荐)
2019/05/28 PHP
PHP中非常有用却鲜有人知的函数集锦
2019/08/17 PHP
JQuery中extend使用介绍
2014/03/13 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
全面理解JavaScript中的闭包
2016/05/12 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
vue实现键盘输入支付密码功能
2018/08/18 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python使用struct处理二进制的实例详解
2017/09/11 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
TUMI香港官网:国际领先的行李箱、背囊品牌
2021/03/01 全球购物
诚实守信主题班会
2015/08/13 职场文书
JS新手入门数组处理的实用方法汇总
2021/04/07 Javascript
go:垃圾回收GC触发条件详解
2021/04/24 Golang
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js