В настоящее время я использую django 1.3.1, пытаясь реализовать наследование шаблонов, чтобы свести к минимуму количество дублированного кода. Я также использую twitter-bootstrap v2.0.Django наследование шаблона разрывает макет сайта
У меня есть базовый html-файл, содержащий навигационную панель. Он содержит единственный {% блок%}, который находится ниже навигационной панели, внутри DIV-тега, например:
<div class="container">
{% block content %} {% endblock %}
<footer>
<p>Designad och skapad av Johan Rende, [email protected], 2012</p>
</footer>
</div>
Это то, что сайт выглядит без наследования, только один HTML-файл:
А вот как это выглядит с наследованием. Обратите внимание на пространство над навигационной панели, и раздавленный поле поиска:
Когда я использовал только базовый 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, [email protected], 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>
Является '{% конечный блок%}' опечатка? Блоки содержимого должны быть закрыты с помощью '{% endblock%}' (всего одного слова). –
Я думаю, что хотел бы увидеть разметку django HTML –
end block был опечаткой, исправленной сейчас. –