当前位置:   article > 正文

Python-Django 静态文件的引入和配置(五)_static怎么导入vscode

static怎么导入vscode

django中引入静态配置文件

第二章 Python 引入自己的静态配置文件


前言

 本系列文章以一个简单的学校项目来做演示,项目中遇到的问题会一一记录下来,仅供学习参考使用

此处学习版本 python3.8 django 4.0.6 bootstrap3 开发工具 VSCODE


一、创建目录

首先,在你的 子项目中目录里创建一个 templates 目录。Django 将会在这个目录里查找模板文件。

项目目录结构:

  1. school
  2. --school_env 虚拟环境目录
  3. --school_web 程序目录
  4. --school_web_grade 自己的项目目录
  5. --templates 页面存放地址
  6. --static 静态文件目录
  7. --db.sqlite3 数据库文件,此处以sqlite3为数据库进行演示
  8. --manage.py 主程序运行文件

 static 目录存放 静态文件

二、静态文件存放文件夹配置

在 项目同目录中创建 static 文件夹 存放自己的静态文件,然后还需要增加配置 上边的配置文件已列出下面的配置

此配置的目的是为了匹配路径

  1. # 别名
  2. STATIC_URL = 'static/'
  3. # statics配置的静态文件夹
  4. STATICFILES_DIRS = [
  5. os.path.join(BASE_DIR,'static'),
  6. ]

3.页面引用文件的方法

  1. <meta charset="utf-8" />
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  3. <meta name="viewport" content="width=device-width, initial-scale=1" />
  4. <!-- 静态地址引入方式-->
  5. <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  6. <link rel="stylesheet" href="/static/bootstrap-3.4.1/css/bootstrap.min.css" />
  7. <!-- 程序引入方式 -->
  8. <!-- 可选的 Bootstrap 主题文件(一般不用引入) -->
  9. <link rel="stylesheet" href="{% static 'bootstrap-3.4.1/css/bootstrap-theme.min.css' %}" />
  10. <script src="{% static 'js/jquery-3.2.1/jquery.min.js' %}"></script>
  11. <script src="{% static 'js/popper-1.15.0/umd/popper.min.js' %}"></script>
  12. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  13. <script src="{% static 'bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
  14. <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
  15. <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
  16. <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
  17. <!--[if lt IE 9]>
  18. <script src="/static/js/html5shiv-3.7.0/html5shiv.js"></script>
  19. <script src="/static/js/respond-1.4.2/respond.min.js"></script>
  20. <![endif]-->

django 中 使用本地文件的引用方式 是:

{% static 'js/jquery-3.2.1/jquery.min.js' %}


总结

本问介绍简单的创建项目和初始化步骤与使用中遇到的问题

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/725125
推荐阅读
相关标签
  

闽ICP备14008679号