Django模板中的extends标签在顶部添加了额外的空格

Question

Django模板中的extends标签在顶部添加了额外的空格

5

我正在使用内置的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" %}

然后渲染后的文件仍然存在这个问题。我正在使用Python 3.3与Django1.6，~~^_Django3.3~~已经不再使用。

这真的很奇怪。

- TonyTony

你确实应该得到一个奖项。在其他人还在苦苦挣扎于1.6和1.7版本时，你已经能够熟练地使用Django 3.3了。 - Aswin Murugesh

有这样一个笔误真是令人尴尬，我猜昨天被这个小但严重的问题搞得筋疲力尽了。@AswinMurugesh - TonyTony

3个回答

1

Django最新版本为1.7而不是3.3，您的第一个代码注释应该是base.html而不是base.py。由于在您的base.html文件中留下了空格，因此出现了额外的空格。请删除base.html文件顶部的额外空格。

- Yogesh dwivedi Geitpl

0

首先，您可能拥有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>
      ....

- Maxime Lorant

所以我已经远远超越了当前的技术，甚至无法想象Django在3.3中是什么样子...感谢编辑和回答，但我发现块标签根本不敏感于\n或空格。这是由于Unicode BOM引起的，我已经在一个答案中解决了它。 - TonyTony

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- TonyTony · Accepted Answer

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

我使用Django1.6，Python3.3，在Windows7上。我的文本编辑器是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 %}，但这不能解决问题，额外的空格不是由HTML标签之间的空格或\n引起的。