Django零基础入门之静态文件的引用

更新时间：2021年09月02日 10:47:49 作者：孤寒者

这篇文章主要介绍了Django零基础入门之静态文件的引用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

效果展示：

在这里插入图片描述

点击确定之后：

在这里插入图片描述

1.静态文件引用：

（1）创建静态文件目录：

在项目目录下创建static目录, 为了区分开各种类型的静态文件，再分别创建css,image,js文件目录：

在这里插入图片描述

（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

在这里插入图片描述

2.CSS——创建文件/static/css/index.css：

在这里插入图片描述

3.image——创建文件/static/image/first.jpg：

在这里插入图片描述

总览：

在这里插入图片描述

（4）静态文件的引用：

{#静态文件的加载#}
{% load static %}

{#   注意：：： {%  %}这是模板标签    #}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试！</title>
    {#css文件的引用#}
    <link rel="stylesheet" href="{% static 'css/index.css' %}" rel="external nofollow" >
</head>
<body>

{#图片文件的引用#}
<img src="{%  static 'image/first.jpg' %}" alt="">

{#js文件的引用#}
<script src="{% static 'js/index.js' %}"></script>

</body>
</html>

到此这篇关于Django零基础入门之静态文件的引用的文章就介绍到这了,更多相关Django静态文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

从零学python系列之数据处理编程实例（一）
本文目的：用一个实例总结学习到的with语句，函数，列表推导，集合，排序，字符分割等内容
2014-05-05
对python 读取线的shp文件实例详解
今天小编就为大家分享一篇对python 读取线的shp文件实例详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-12-12
Pyqt5如何让QMessageBox按钮显示中文示例代码
这篇文章主要给大家介绍了关于Pyqt5如何让QMessageBox按钮显示中文的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Pyqt5具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
pycharm上的python虚拟环境移到离线机器上的方法步骤
本人在工作中需要在离线Windows环境中使用，本文主要介绍了pycharm上的python虚拟环境移到离线机器上的方法步骤，具有一定的参考价值，感兴趣的可以了解一下
2021-10-10
Python的print函数如何覆盖打印
这篇文章主要介绍了Python的print函数如何覆盖打印问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
django中的数据库迁移的实现
这篇文章主要介绍了django中的数据库迁移的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
python从网络读取图片并直接进行处理的方法
这篇文章主要介绍了python从网络读取图片并直接进行处理的方法,涉及cStringIO模块模拟本地文件的使用技巧,需要的朋友可以参考下
2015-05-05
使用Python 统计高频字数的方法
今天小编就为大家分享一篇使用Python 统计高频字数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-01-01
简化Python浏览器自动化的三种模式
在如今的网络数据处理与自动化任务中,浏览器自动化已成为不可或缺的技术,为了便于 Python 开发者更高效地进行网页操作,DrissionPage 提供了一种轻量级且功能强大的解决方案,本文将深入解读 DrissionPage 的三种核心模式,需要的朋友可以参考下
2025-03-03
python 中Mixin混入类的使用方法详解
这篇文章主要介绍了python 中Mixin混入类的使用方法详解，Mixin 混入也可以说是编程模式，并不是什么新的语法，用好混入类可以使自己的代码结构清晰，功能明了，所以以后在设计类时要多考虑使用Mixin混入类的实现方式
2022-07-07