Jinja2把布局的头+意外的断头放在孩子的身体里

Question

我最近开始使用烧瓶/python，但是我似乎在Jinja2上遇到了一个问题，我无法自己解决。我有一个像这样的layout.html模板：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Some Title</title>
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel='stylesheet' media='screen and (max-width: 800px)' href="{{ url_for('static', filename='styles/style_mobile.css') }}" />
<link rel='stylesheet' media='screen and (min-width: 800px) and (max-width: 1200px)' href="{{ url_for('static', filename='styles/style_middle.css') }}" />
<link rel='stylesheet' media='screen and (min-width: 1200px)' href="{{ url_for('static', filename='styles/style_desktop.css') }}" />
</head>

<body>
  <div>Some header</div>
  {% block content %}{% endblock %}
  <div>Some footer</div>
</body>
</html>

一些子模板扩展了布局，如下所示：

{% extends "layout.html" %}
{% block content %}
<div class="content-wrapper">
Here be content.
</div>
{% endblock %}

当我浏览浏览器中的一个子页面时，我希望看到布局模板的完整副本，包括相同的头部，只在正确的位置添加子页面的内容。相反，我得到了：

<head>
some chrome extensions
</head>
<body>
"&#65279;


"
<meta charset="utf-8">
<title>Some Title</title>
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel='stylesheet' media='screen and (max-width: 800px)' href="{{ url_for('static', filename='styles/style_mobile.css') }}" />
<link rel='stylesheet' media='screen and (min-width: 800px) and (max-width: 1200px)' href="{{ url_for('static', filename='styles/style_middle.css') }}" />
<link rel='stylesheet' media='screen and (min-width: 1200px)' href="{{ url_for('static', filename='styles/style_desktop.css') }}" />
<div>Some header</div>
<div class="content-wrapper">
Here be content.
</div>
<div>Some footer</div>

因此布局模板与子页面的内容一起扩展，但是头部的内容在正文中，页面顶部有一个不必要的中断，将布局向下推。但是，当我在Chrome浏览器中单击源代码(相对于元素)时，它会显示布局模板中扩展的子模板的代码，就像它应该的那样.我似乎不能把这件事当回事。我该怎么解决这个问题？提前谢谢你。

Answer 1

我解决了问题。它与BOM (字节顺序标记)有关。将我的文件保存在一个文本编辑器中，其中包含“add标记到文件”，禁用后，在页面开始时去掉了。head标签的内容现在也被保留了下来。