Django<加载static目录下的CSS-JS>

最新推荐文章于 2021-04-11 23:01:17 发布

原创最新推荐文章于 2021-04-11 23:01:17 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#django

django 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了解决Django项目中加载静态文件如JS和CSS的问题。通过设置STATIC_URL、STATIC_ROOT及STATICFILES_DIRS，并使用collectstatic命令收集静态文件，最终实现在HTML中正确引用这些资源。

博主之前没有接触过Django,最近有一个项目需求要做一个可视化的展示，但是一直无法加载static文件下的JS和CSS，经过一番折腾，最后终于搞定了。下面是完整的过程：

1.我的项目结构：

这里写图片描述

2.在与settings.py文件的统计目录下，新建static文件夹，然后在新建两个子目录（static_dirs、static_root）,然后在settings.py文件中添加以下代码：

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'mysite', 'static', 'static_root')

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'mysite', 'static', 'static_dirs'),
)

3.在pycharm的终端中运行shell

 python manage.py collectstatic

这里写图片描述
不出意外的话，static/static_root下会多出这么写文件

这里写图片描述

接下来将需要使用到的js和css文件放到对应的目录下，如下图：

这里写图片描述

在html中引入这些js、css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}">
    <script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.js' %}"></script>
</head>
<body>
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
<table class="table">
    <caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>
</body>
</html>