当前位置：首页 > article >正文

【Django】 templates模板与static静态文件

article 2025/2/12 16:30:02

1.templates模板

在app01(你创建的app名称)文件夹下，创建templates文件夹，其中存放想要返回的html文件

对应关系如下

除了上面的方式，还可以在项目根目录下创建templates文件夹，这时需要在settings.py文件中增加一行代码（如红框所示）

os.path.join(BASE_DIR, 'templates')

查找逻辑：

(1)Django 会在项目根目录下的 templates 目录中查找模板文件。

(2)如果未找到，再查找每个app的 templates 目录（前提是 APP_DIRS 为 True）。

user_list.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>用户列表</h1>

</body>
</html>

运行结果

2.static静态文件

和templates类似，static放在app目录下，里面存放各种静态文件，我习惯把不同文件分类，放在不同的子文件夹中，例如css、img、js、plugins等

以图片为例，在上面user_list.html文件的基础上，增加一个img标签，把图片放上去，注意路径

结果

规范的引入静态文件

还是以user_list.html文件为例

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.3/css/bootstrap.css' %}">
</head>
<body>
<h1>用户列表</h1>
<img src="{% static 'img/p1.png' %}" alt="">

<!-- 测试 Bootstrap 按钮 -->
<div class="container mt-4">
    <button class="btn btn-primary">这是一个 Bootstrap 按钮</button>
</div>

<script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-5.3.3/js/bootstrap.bundle.js' %}"></script>


</body>
</html>