Django继承模板中JavaScript与CSS加载失效问题

问题根源分析 #

从错误信息和代码来看，核心问题出在静态资源路径硬编码和模板block结构错误：

• 浏览器提示的MIME类型错误，本质是静态资源请求路径错误，服务器返回404页面（text/html）而非JS/CSS文件
• 路由切换后，相对路径的静态资源请求会带上当前路由前缀（比如/Ticket/），导致请求地址完全错误
• 基础模板存在block嵌套错误，部分静态资源未使用Django的{% static %}标签

具体修复步骤 #

1. 修正静态资源路径

基础模板底部的两个JS文件使用了相对路径，必须替换为{% static %}标签：
原错误代码：

<script src="static/dashboard/script.js"></script>
<script src="static/dashboard/ajax.js"></script>

修复后：

<script src="{% static 'dashboard/script.js' %}"></script>
<script src="{% static 'dashboard/ajax.js' %}"></script>

2. 调整模板block结构

基础模板中{% block content %}的位置错误，将整个<head>和<body>包裹在block内，导致继承逻辑混乱。调整如下：

• 将{% load static %}移到模板最顶部
• 拆分block，避免不必要的内容覆盖

修复后的基础模板核心结构：

<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Boxicons -->
    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <!-- My CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'dashboard/style.css' %}">
    <script src="{% static 'dashboard/script.js' %}"></script>
    <script
  src="https://code.jquery.com/jquery-3.6.4.min.js"
  integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
  crossorigin="anonymous"></script>
    <title>Admin Dashboard</title>
    {% block head %}{% endblock %}
</head>
<body>
    <!-- SIDEBAR 内容保持不变 -->
    <!-- CONTENT 内容保持不变 -->
    
    <script src="{% static 'dashboard/script.js' %}"></script>
    <script src="{% static 'dashboard/ajax.js' %}"></script>
</body>
</html>

3. 修复子模板表单问题

子模板的提交按钮放在<form>标签外，无法触发表单提交，需移到表单内部：
修复后的子模板：

{% extends "baseUI.html" %}

{% block body %}
<form action="" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    {{ form.as_p }}
    {{ form2.as_p }}
    <button type="submit" name="submit" value={{LoggedUser.User_Id}}>Submit</button>
</form>
{% endblock %}

验证修复效果 #

1. 重启Django服务器
2. 切换路由后，检查浏览器控制台网络请求，确认静态资源请求路径为正确的绝对路径（如/static/dashboard/style.css）
3. 确认MIME类型错误和404错误消失

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