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

【问题标题】：Django template extends tag added extra space on topDjango 模板扩展标签在顶部添加了额外的空间
【发布时间】：2014-01-18 13:34:11
【问题描述】：

我正在使用带有内置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。

真的很奇怪。

【问题讨论】：

你当然应该得到奖励.. 使用 django 3.3 而其他人都在为 1.6 和 1.7 版本苦苦挣扎..
尴尬的是我有这样一个错字，我想我昨天被这个小而严重的问题弄得筋疲力尽了。@AswinMurugesh

标签： django templates

【解决方案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 将在其部分顶部添加额外的空格。因此，请记住使用 UTF-8 不带 BOM 保存所有文件。

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

【讨论】：

谢谢！如果您在 Visual Studio 中保存，请在保存时使用西欧 (Windows) 代码页 1252 编码
只是好奇 BOM 出了什么问题...以及如何在 Visual Studio 中默认保存没有它的文件？
基本上，据我了解，问题在于通过在另一个带有 BOM 的文件中扩展带有 BOM 的文件，您实际上是在添加 BOM 两次；然后第一个 BOM 被浏览器正确解释，而第二个被认为是文本的一部分。

【解决方案2】：

Django 最新版本是 1.7 而不是 3.3，您的第一个代码注释将是 base.html 而不是 base.py。

因为您的base.html 文件中有剩余空间，所以您获得了这个额外空间。删除 base.html 文件顶部的多余空间。

【讨论】：

【解决方案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.3 中的样子......感谢版本和答案，但我发现块标签对 \n 或不敏感空间。这是由于Unicode BOM，我把它放在一个答案中。