Django 模板继承破坏了站点布局

Posted 2023-02-24

技术标签:

【中文标题】Django 模板继承破坏了站点布局【英文标题】：Django template inheritance breaks site layout 【发布时间】：2012-02-25 02:15:38 【问题描述】：

我目前正在使用 django 1.3.1，试图实现模板继承，以尽量减少重复代码的数量。我也在使用 twitter-bootstrap v2.0。

我有一个包含导航栏的基本 html 文件。它包含一个位于导航栏下方的 div 标记内的单个 % block %，如下所示：

<div class="container">
    % block content % % endblock %
<footer>
    <p>Designad och skapad av Johan Rende, jrende@kth.se, 2012</p>
</footer>
</div>

这就是网站在没有继承的情况下的样子，只有一个 html 文件：

good layout

下面是继承的样子。注意导航栏上方的空间，以及被压扁的搜索字段：

bad layout

当我只使用基础 css 时，它看起来很好，但即使我使用空模板来继承：

% extends "base.html" %
% block content %
% endblock %

空白仍然存在。

HTML 有问题，还是 Django 中的错误？我该如何解决/规避它？

编辑：这是整个基本 html 文件：

<!DOCTYPE html>    
<html lang="en">    
  <head>    
    <meta charset="utf-8">    
    <title>Biblio</title>    
    <meta name="description" content="">    
    <meta name="author" content="">    
    <!--[if lt IE 9]>    
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>    
    <![endif]-->    
    <link href="/static/css/bootstrap.css" rel="stylesheet">    
    <link href="/static/css/bootstrap-responsive.css" rel="stylesheet">    
  </head>    

  <body>    
    <div class="navbar">    
        <div class="navbar-inner">    
            <div class="container">    
                <ul class="nav pull-left">    
                    <a class="brand" href="#">Test-test</a>    
                </ul>    
                <ul class="nav">    
                    <li class="active"><a href="#">Home</a></li>    
                    <li><a href="/about/">Din profil</a></li>    
                    <li><a href="/contact/">Dina böcker</a></li>    
                    <li><a href="/contact/">Lägg till bok</a></li>    
                    <li class="divider-vertical align-left"></li>    
                    <li>    
                        <form class="navbar-search" name="input" action="." method="get">    
                            <input type="text" class="search-query" name="search" placeholder="Sök böcker/användare" >    
                        </form>    
                    </li>    
                </ul>    
                <ul class="nav pull-right">    
                    <li class="divider-vertical align-left"></li>    
                    <li class="dropdown">    
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">    
                            Logga in    
                            <b class="caret"></b>    
                        </a>    
                        <ul class="dropdown-menu">    
                            <form name="input" action="/login/" method="post">    
                                <p><label for="id_username">Username:</label> <input id="id_username" class="input" type="text" name="username" maxlength="30" /></p>    
                                <p><label for="id_password">Password:</label> <input type="password" name="password" id="id_password" /></p>    
                                <input type="submit" value="Logga in" />    
                            </form>    
                        </ul>    
                    </li>    
                </ul>    
            </div>    
        </div>    
    </div>    

        <div class="span5">    
            % if uname %    
                Välkommen,  uname     
            % else %    
                Logga in!    
            % endif %    
        </div>    

    <div class="container">    
    % block content % % endblock %    
    <footer>    
        <p>Designad och skapad av Johan Rende, jrende@kth.se, 2012</p>    
    </footer>    
    </div> <!-- /container -->    

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script src="../static/js/bootstrap-dropdown.js"></script>    
  </body>    
</html>

【问题讨论】：

% end block % 是错字吗？内容块应以% endblock %（一个字）结束。我想我想看看 django HTML 标记结束块是一个错字，现已修复。 【参考方案1】：

我解决了。

问题在于 utf-8 标头，即“字节顺序标记”。当文件用 ANSI 编码时，Django 抱怨，所以我使用记事本用 utf-8 编码保存了文件。这显然添加了标题。我通过下载 notepad++ 并将编码更改为没有 BOM 的 UTF-8 来修复它。

http://www.w3.org/International/questions/qa-utf8-bom

【讨论】：

【参考方案2】：

Django 将识别 % block content % 和 % endblock % 之间的空间并将其写入 html。我必须查看您的 css 才能确定，但这些标签之间的空格可能会显示在顶部。

【讨论】：

你确定吗？我认为要显示任何空格或换行符，我们必须明确放置或

以上是关于Django 模板继承破坏了站点布局的主要内容，如果未能解决你的问题，请参考以下文章

Django之模板层-继承