Flask/Jinja2模板渲染出现空字符、标签位置错位如何解决

问题现象 #

使用Flask搭配Jinja2模板开展Web开发时，页面渲染结果不符合预期，存在两处明确异常：

• 页面无来源渲染出空白字符
• <title>标签未按预期渲染在<head>标签内部，反而错位出现在<body>标签区域

相关代码 #

基础模板 base.html #

<!doctype html>
<html lang="en">
<head>
    <title>{{ title }}</title>
</head>
<body style="background-color: rgb(146, 173, 196);">
    {%- block body -%}{%- endblock -%}
</body>
</html>

子页面模板 home.html（继承base.html） #

{% extends "base.html" %}
{%- block body -%}
<div style="height: 100px; width: 100%; background-color: rgb(70, 162, 255);"></div>
{%- endblock -%}

问题根因 #

两个异常是同一个问题触发的连锁反应：

1. 模板文件（大概率是home.html，也可能是base.html）保存时使用了带BOM的UTF-8编码，文件开头的UTF-8 BOM字符（U+FEFF，也就是渲染出来的无来源空白字符）会被Jinja2当做普通文本输出。
2. 由于BOM字符出现在{% extends %}标签之前，会被优先输出到HTTP响应的最开头，导致浏览器接收到的内容首字符不是<!doctype html>，触发浏览器怪异解析模式，自动将本应在<head>内的<title>标签解析到<body>区域，造成结构错位。

注：代码中使用的Jinja2空白控制符-%/%-和本次异常没有关联，不需要调整。

修复方案 #

• 将所有项目模板文件重新保存为无BOM的UTF-8编码：
  • VS Code：点击窗口右下角的编码显示区域，选择「通过编码重新保存」，选中UTF-8（不要选UTF-8 with BOM）
  • Notepad++：顶部菜单选择「编码」-「UTF-8（无BOM）」，保存文件
  • 其他主流代码编辑器均有对应编码调整入口，操作逻辑一致
• 保存完成后重启Flask开发服务，使用Ctrl+F5强制刷新浏览器清除缓存，即可验证异常消失。

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