Django零基础入门之静态文件的引用
目录
- 效果展示:
- 1.静态文件引用:
- (1)创建静态文件目录:
- (2)静态文件路径的配置:
- (3)创建三大静态文件:
- (4)静态文件的引用:
在我们Django中如何引用三大静态文件(JavaScript,CSS,image)呢?
这就是本文要讲述的内容——静态文件的引用!
效果展示:
![Django零基础入门之静态文件的引用](https://img.it610.com/image/info11/d1fd401b8c9d45e1a2ec2ddab02b3483.jpg)
文章图片
点击确定之后:
![Django零基础入门之静态文件的引用](https://img.it610.com/image/info11/8531c3fa96fe45e9a20d133339b99c8e.jpg)
文章图片
1.静态文件引用:
(1)创建静态文件目录:
在项目目录下创建static目录, 为了区分开各种类型的静态文件,再分别创建css,image,js文件目录:
![Django零基础入门之静态文件的引用](https://img.it610.com/image/info11/cf277d795a60484e9f2e30952045e440.jpg)
文章图片
(2)静态文件路径的配置:
在settings.py文件中添加STATICFILES_DIRS
设置静态文件目录路径,同templates设置。
(settings.py文件中加入下述代码即可!)
# 配置静态文件的路径BASE_DIR是项目根目录STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]
(3)创建三大静态文件:
1.JS——创建文件/static/js/index.js
![Django零基础入门之静态文件的引用](https://img.it610.com/image/info11/fb99853e7eda4b028350fb7ddf5a5ba4.jpg)
文章图片
2.CSS——创建文件/static/css/index.css:
![Django零基础入门之静态文件的引用](https://img.it610.com/image/info11/868260affd8b441895ea94823208157d.jpg)
文章图片
3.image——创建文件/static/image/first.jpg:
![Django零基础入门之静态文件的引用](https://img.it610.com/image/info11/dac17a2acaf046328c6c33a6c37c2795.jpg)
文章图片
总览:
![Django零基础入门之静态文件的引用](https://img.it610.com/image/info11/c180c36731354a4a9aafde8276509775.jpg)
文章图片
(4)静态文件的引用:
{#静态文件的加载#}{% load static %}{#注意::: {%%}这是模板标签#}测试! - 锐客网 {#css文件的引用#}{#图片文件的引用#}![]()
文章图片
{#js文件的引用#}
【Django零基础入门之静态文件的引用】到此这篇关于Django零基础入门之静态文件的引用的文章就介绍到这了,更多相关Django静态文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 日志打卡
- django-前后端交互
- Python基础|Python基础 - 练习1
- Java|Java基础——数组
- Java基础-高级特性-枚举实现状态机
- 营养基础学20180331(课间随笔)??
- iOS面试题--基础
- HTML基础--基本概念--跟着李南江学编程
- 八零后也已经老了
- typeScript入门基础介绍