如何在Django项目中添加模板、CSS、JS及Bootstrap？已执行部分配置

嘿，我来一步步帮你搞定在Django项目里配置模板、静态资源和Bootstrap的事儿，你已经完成了基础准备，接下来咱们把剩下的环节补全：

你已经设置了STATIC_URL，但还需要补充两个关键配置来让Django准确找到你的静态文件：
在settings.py里添加以下代码：

STATIC_URL = '/static/'

# 告诉Django去哪里找项目根目录下的static文件夹（非app内的静态文件）
STATICFILES_DIRS = [
    BASE_DIR / "static",
]

# 生产环境专属：收集所有静态文件到这个目录（部署时用，开发阶段可暂时忽略）
STATIC_ROOT = BASE_DIR / "staticfiles"

另外，建议把static文件夹做分类整理，比如：

static/
├── bootstrap/       # 解压后的Bootstrap文件（包含css、js子文件夹）
├── css/             # 你的自定义CSS
├── js/              # 你的自定义JS
└── images/          # 图片资源

这样后续引入资源时路径更清晰。

首先要让Django知道你的模板文件存在哪里：
在settings.py的TEMPLATES配置块中，确保DIRS指向项目根目录下的templates文件夹：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # 这行一定要加上！
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

然后把你的index.html放到项目根目录的templates文件夹里（如果没有就新建一个）。

接下来在视图里返回这个模板，比如在views.py中：

from django.shortcuts import render

def index(request):
    # 渲染templates文件夹下的index.html
    return render(request, 'index.html')

最后配置URL路由，在项目的urls.py中：

from django.urls import path
from . import views  # 如果视图在app里，就改成from your_app_name import views

urlpatterns = [
    path('', views.index, name='index'),  # 访问根路径时返回index页面
]

首先，Django 3.0+推荐使用{% load static %}替代旧的{% load staticfiles %}，所以先把模板开头改过来。然后按照以下方式引入资源（注意路径要和你static文件夹的结构对应）：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Business Casual - Start...</title>
    
    <!-- 引入Bootstrap的CSS文件 -->
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <!-- 引入你的自定义CSS -->
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
</head>
<body>
    <!-- 这里放你的页面内容 -->
    
    <!-- 先引入jQuery（Bootstrap的JS依赖必须先加载） -->
    <script src="{% static 'bootstrap/js/jquery.min.js' %}"></script>
    <!-- 再引入Bootstrap的JS文件 -->
    <script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
    <!-- 最后引入你的自定义JS -->
    <script src="{% static 'js/custom.js' %}"></script>
</body>
</html>

如果你的Bootstrap文件结构不同（比如解压后直接在static根目录），记得调整路径哦。

完成以上配置后，启动Django开发服务器：

python manage.py runserver

访问http://localhost:8000，如果页面样式正常加载，没有浏览器控制台的404错误，就说明配置成功啦！

几个常见小坑提醒： #

• 一定要检查静态文件的路径拼写，大小写错误很容易导致404
• 生产环境部署时，别忘了运行python manage.py collectstatic，把所有静态文件收集到STATIC_ROOT目录
• 如果你的Bootstrap模板依赖其他字体或图标资源，也要确保它们放在static文件夹里，并正确引入路径

内容的提问来源于stack exchange，提问作者houwaida yahyaoui