如何避免Jinja2宏中CSS/JS代码重复？

方案1：模板继承+专用块（最规范的实践） #

核心思路是将通用资源（CSS/JS）与宏的HTML结构分离，利用Jinja2的模板继承机制，把资源放到基础模板的专用块中，宏仅负责渲染业务HTML。这种方式能确保资源只加载一次，同时符合模板分层的最佳实践。

示例：

1. 基础模板 base.html：

<!DOCTYPE html>
<html>
<head>
    {% block styles %}{% endblock %}
</head>
<body>
    {% block content %}{% endblock %}
    {% block scripts %}{% endblock %}
</body>
</html>

2. 宏定义（仅保留HTML结构）：

{% macro render_test(eleID) %}
    <div class="testEle" id="{{ eleID }}"></div>
{% endmacro %}

3. 调用宏的页面 page.html：

{% extends "base.html" %}

{% block styles %}
    <style> .testEle {color: red;} </style>
{% endblock %}

{% block content %}
    {{ render_test("test1") }}
    {{ render_test("test2") }}
{% endblock %}

{% block scripts %}
    <script> function foo() {} </script>
{% endblock %}

方案2：利用全局变量标记资源已加载 #

如果不想调整模板结构，可以通过全局变量标记资源是否已经加载，第一次调用宏时输出CSS/JS，后续调用仅渲染HTML。

Flask环境下（使用g对象）：

{% macro render_test(eleID) %}
    {% if not g.get('test_assets_loaded') %}
        <style> .testEle {color: red;} </style>
        <script> function foo() {} </script>
        {% set _ = g.setdefault('test_assets_loaded', True) %}
    {% endif %}
    <div class="testEle" id="{{ eleID }}"></div>
{% endmacro %}

纯Jinja2环境（使用namespace）：

{% set ns = namespace(test_assets_loaded=False) %}

{% macro render_test(eleID) %}
    {% if not ns.test_assets_loaded %}
        <style> .testEle {color: red;} </style>
        <script> function foo() {} </script>
        {% set ns.test_assets_loaded = True %}
    {% endif %}
    <div class="testEle" id="{{ eleID }}"></div>
{% endmacro %}

注意：namespace需要在宏定义前初始化，且作用域要覆盖所有宏调用的位置。

方案3：分离资源到独立模板片段 #

把CSS/JS单独放到一个模板文件中，在页面中手动引入一次，宏仅负责渲染HTML结构。

示例：

1. 资源模板 test_assets.html：

<style> .testEle {color: red;} </style>
<script> function foo() {} </script>

2. 宏定义：

{% macro render_test(eleID) %}
    <div class="testEle" id="{{ eleID }}"></div>
{% endmacro %}

3. 调用页面：

{% include "test_assets.html" %}

{{ render_test("test1") }}
{{ render_test("test2") }}

方案选择建议 #

• 优先使用模板继承+专用块，它能让资源管理更清晰，符合大型项目的模板架构规范。
• 快速改造现有代码时，可选用全局变量标记的方式，无需大幅调整模板结构。
• 小型项目或简单场景下，分离资源片段的方式最直接易用。

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