如何在Jinja模板中为QuillJS编辑器添加头部JS与CSS文件？

1. 调整主模板（main.html）结构 #

在主模板的<head>标签内预留一个专门用于添加额外CSS/JS的block，让子模板可以通过覆盖该block注入Quill的依赖：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}默认标题{% endblock %}</title>
    <!-- 全局公共资源 -->
    <link rel="stylesheet" href="/static/css/global.css">
    <script src="/static/js/global.js"></script>
    <!-- 预留的额外资源注入块 -->
    {% block extra_head %}{% endblock %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

2. 编写Quill子模板（quill.html） #

子模板通过extends继承主模板，在extra_head块中添加Quill所需的CSS和JS，同时在content块里编写编辑器DOM结构和初始化脚本：

{% extends "main.html" %}

{% block title %}Quill编辑器页面{% endblock %}

{% block extra_head %}
    <!-- Quill样式文件 -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    <!-- Quill核心JS -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
{% endblock %}

{% block content %}
    <div id="editor">
        <p>欢迎使用Quill编辑器！</p>
    </div>
    <script>
        // 初始化Quill编辑器
        var quill = new Quill('#editor', {
            theme: 'snow'
        });
    </script>
{% endblock %}

3. 常见问题排查（若仍未生效） #

• 确认extends路径正确：如果main.html在templates根目录，写{% extends "main.html" %}；若在子文件夹，需写完整路径如{% extends "layouts/main.html" %}。
• 替换CDN为本地资源：若CDN加载失败，可下载Quill的CSS和JS到项目static目录，用{{ url_for('static', filename='quill/quill.snow.css') }}引用。
• 检查拼写错误：确保子模板中extra_head块的名称和主模板完全一致，无拼写错误。
• 查看浏览器控制台：排查是否有资源404、JS初始化报错等问题。

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