Flask静态HTML文件间共享<head>元数据的实现方案咨询

既然是Flask应用，别用前端jQuery导入的方式了，直接用Flask自带的Jinja2模板继承，完美解决重复代码问题，还能避免你遇到的500错误。

步骤1：创建基础模板（base.html） #

在你的templates目录下新建base.html，把所有页面共享的<head>内容放进去，同时预留出供子模板填充的区块：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 这里放所有共享的元数据、脚本、链接 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="你的站点描述">
    <title>{% block title %}默认标题{% endblock %}</title>
    <!-- 共享的样式和脚本 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/common.css') }}">
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
</head>
<body>
    <!-- 页面主体内容区块，子模板在这里填充自己的内容 -->
    {% block content %}{% endblock %}
</body>
</html>

步骤2：编写子模板 #

每个页面的HTML文件都继承base.html，只需要写自己独有的内容：
比如首页index.html：

{% extends "base.html" %}

<!-- 覆盖base.html中的title区块 -->
{% block title %}首页{% endblock %}

<!-- 填充内容区块 -->
{% block content %}
    <h1>欢迎访问我的站点</h1>
    <p>这是首页的专属内容</p>
{% endblock %}

步骤3：Flask路由返回子模板 #

在你的Flask应用代码里，直接渲染子模板即可：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/about')
def about():
    return render_template('about.html')

为什么之前的jQuery方案会出500错误？ #

大概率是因为你直接用相对路径加载header.html，Flask的静态文件路由规则没匹配上，或者文件权限、路径配置有问题。就算解决了500，前端导入也会有页面渲染延迟（先显示无样式内容），远不如模板继承靠谱。

如果非要坚持前端导入（不推荐），请用Flask的url_for生成正确的静态文件路径：

<script>
$(document).ready(function() {
    $('head').load('{{ url_for('static', filename='header.html') }}');
});
</script>

但还是强烈建议用Jinja2模板继承，这是Flask开发的标准做法。

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