Question

我正在使用带有内置extends标签的Django模板，我没有在其中添加太多代码，只是一个导航栏，但我在浏览器顶部获得了额外的空间，这可以不能在chrome开发人员工具中跟踪。这个额外的空间仍然存在，即使我这样做了：

# base.html

<!doctype html>
<html>
<head>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static "css/layout.css" %}" />
</head><body>
    <div><p>something here.</p>
    </div>    
</body>
</html>

然后我只用一行代码扩展它：

# home.html

{% extends "base.html" %}

然后呈现的文件仍然有这个问题。我正在使用 ~~^_Django3.3~~ Python 3.3和Django1.6。

真的很奇怪。

Answer 1

最后我发现问题是由编码中的UTF-8 BOM造成的。

我在Windows7上使用Django1.6，Python3.3。我的文本编辑器是Notepad ++，我曾经用UTF-8编码保存文件。默认情况下，UTF-8以字节顺序标记（BOM）保存。这是影响模板渲染的因素，至少对extends和include的标记有影响。让我们说，我把它放在一个例子中：

# home.html
{% extends "base.html" %}

{% block content%}
    {% include "a.html" %}
    {% include "b.html" %}
{% endblock %}

和

# base.html
<!doctype html>
<html>
<head>
<!-- This file saved with encoding UTF-8, which is by default with BOM.-->
</head>
<body>
    <div><p>something here, base.</p></div>
    {% block content%}{% endblock %}    
</body>
</html>

和

# a.html
<p>a.html, saved in utf-8 without BOM. </p>

和

# b.html
<p>b.html, saved in utf-8, which is by default with BOM in Notepad++.</p>

输出是什么？它看起来像这样

___________ ( top of your browser )
            ( extra space on top, due to extended file `base.html` is with BOM )
something here, base.
a.html, saved in utf-8 without BOM. (no extra space above the content of a.html)
            ( extra space on top, due to included file `b.html` is with BOM )
b.html, saved in utf-8, which is by default with BOM in Notepad++.

所以，基本上，对于模板加载的任何文件，如果它是BOM，那么渲染的html将在其部分顶部添加额外的空格。因此，请记住使用没有BOM的UTF-8保存所有文件。

注意：我之前尝试在base.html或home.html上使用{％spaceless％} {％endspaceless％}，但这无法解决问题，额外的空间不是由于html标签之间的空格或\ n。

Answer 2

Django最新版本是1.7而不是3.3，你的第一个代码评论将是base.html而不是base.py。

由于您在base.html文件中留有空间，因此您获得了额外的空间。删除base.html文件的顶部额外空格。

Answer 3

首先，您可能拥有Django 1.7和Python 3.3，因为Django 3.3不存在（并且可能仅存在十年:-)）

其次，HTML渲染中存在额外的空格，因为Django会保留模板中除标记之外的所有内容。所以如果你有这样的模板：

{% load static cache compress %}  <!-- <- You have here a \n to create a new line -->
{% block htmlheader %}
<!DOCTYPE html>
<html lang="fr">
     <head>
      ....

渲染将解释{% load %}标记，在呈现的HTML页面中删除它（实际上不包括它），并继续解析内容。与{% block %}标记的行为相同，也会留下\n。结果将是

<!-- A blank line due to the load tag -->
<!-- A second blank line due to the block tag -->
<!DOCTYPE html>
<html lang="fr">
     <head>
      ....

Django模板扩展了标签在顶部添加的额外空间

3 个答案: