我最近开始使用flask / 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>
"
"
<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浏览器中的来源(而不是元素)时,它会显示在布局模板中扩展的子模板的代码,就像它应该是......我似乎无法包裹我的脑袋围绕这个。我该如何解决这个问题?提前谢谢。
答案 0 :(得分:5)
我解决了这个问题。它与BOM(字节顺序标记)有关。 将我的文件保存在文本编辑器中,并将“添加BOM标记到文件”禁用了&amp;#65279;在页面的开头。头标记的内容现在也是单独的。