Django中为各模板按需加载不同及公共JS/CSS静态文件的正确方法

嘿，这个需求在Django里其实有挺优雅的解决方案，我来给你拆解几种常用的实现方式，你可以根据项目规模选最顺手的：

方法一：模板继承 + 自定义Block（最推荐、最常用） #

这是Django模板系统最核心的用法之一，通过父模板定义公共资源，子模板按需扩展或覆盖资源块，完美适配你的场景。

1. 先创建基础父模板 base.html #

把所有公共静态资源放在固定位置，同时预留出供子模板添加自定义资源的block：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>{% block page_title %}我的网站{% endblock %}</title>
    <!-- 公共CSS区块：放所有模板都需要的CSS -->
    {% block common_css %}
        <link rel="stylesheet" href="{% static 'css/jquery.css' %}">
    {% endblock %}
    <!-- 自定义CSS区块：子模板在这里加自己的CSS -->
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- 页面内容区块：子模板写自己的页面内容 -->
    {% block content %}{% endblock %}

    <!-- 公共JS区块：放所有模板都需要的JS -->
    {% block common_js %}
        <script src="{% static 'js/jquery.js' %}"></script>
    {% endblock %}
    <!-- 自定义JS区块：子模板在这里加自己的JS -->
    {% block extra_js %}{% endblock %}
</body>
</html>

2. 子模板按需继承并扩展 #

• first.html（需要jquery.js、jquery.css、maps.js）：

{% extends 'base.html' %}
{% load static %}

{% block page_title %}第一个页面{% endblock %}

{% block content %}
<!-- 这里写first页面的具体内容 -->
<h1>First Page</h1>
{% endblock %}

{% block extra_js %}
<!-- 添加自己需要的maps.js -->
<script src="{% static 'js/maps.js' %}"></script>
{% endblock %}

• second.html（需要jquery.js、jquery.css，无需maps.js）：

{% extends 'base.html' %}
{% load static %}

{% block page_title %}第二个页面{% endblock %}

{% block content %}
<!-- 这里写second页面的具体内容 -->
<h1>Second Page</h1>
{% endblock %}

<!-- 因为不需要额外JS，所以可以不写extra_js块，默认继承父模板的空内容 -->

• third.html（需要test.js、maps.js，无需jquery相关）：

{% extends 'base.html' %}
{% load static %}

{% block page_title %}第三个页面{% endblock %}

<!-- 重写公共JS区块，去掉jquery.js -->
{% block common_js %}{% endblock %}

{% block content %}
<!-- 这里写third页面的具体内容 -->
<h1>Third Page</h1>
{% endblock %}

{% block extra_js %}
<!-- 添加自己需要的test.js和maps.js -->
<script src="{% static 'js/test.js' %}"></script>
<script src="{% static 'js/maps.js' %}"></script>
{% endblock %}

方法二：静态片段Include（适合小型项目快速实现） #

如果你的项目比较小，也可以把不同的资源组合做成独立的include片段，子模板按需引入：

1. 创建公共资源片段 common_resources.html：

{% load static %}
<link rel="stylesheet" href="{% static 'css/jquery.css' %}">
<script src="{% static 'js/jquery.js' %}"></script>

2. 创建各个页面的资源片段：

• first_resources.html：

{% load static %}
<script src="{% static 'js/maps.js' %}"></script>

• third_resources.html：

{% load static %}
<script src="{% static 'js/test.js' %}"></script>
<script src="{% static 'js/maps.js' %}"></script>

3. 子模板中按需引入：
   比如first.html：

{% include 'common_resources.html' %}
{% include 'first_resources.html' %}

<!-- 页面内容 -->
<h1>First Page</h1>

这种方式虽然简单，但扩展性不如模板继承，适合小型项目快速迭代。

注意事项 #

• 所有使用{% static %}标签的模板，开头必须加上{% load static %}，否则会报错。
• 建议把JS放在页面底部（</body>之前），优化页面加载速度，这也是上面base.html的写法。

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