Dri*_*ker 4 html python jinja2 flask
我最近开始使用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>
Run Code Online (Sandbox Code Playgroud)
还有许多子模板可扩展布局,如下所示:
{% extends "layout.html" %}
{% block content %}
<div class="content-wrapper">
Here be content.
</div>
{% endblock %}
Run Code Online (Sandbox Code Playgroud)
当我在浏览器中转到自己的子页面之一时,我希望看到布局模板的完整副本,包括同一标题,只在正确的位置添加了子内容。相反,我得到了:
<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>
Run Code Online (Sandbox Code Playgroud)
因此,可以使用孩子的内容扩展布局模板,但是头部的内容在正文中,并且在页面顶部存在不必要的中断,从而将布局向下推。但是,当我在Chrome浏览器中单击源代码(相对于元素)时,它显示了布局模板中扩展的子模板的代码,就像应该的那样……我似乎无法将其包围。我该如何解决?先感谢您。
我解决了问题。它与BOM(字节顺序标记)有关。将我的文件保存在禁用了“向文件添加BOM标签”的文本编辑器中,摆脱了&#65279; 在页面的开头。现在,head标记的内容也被保留。