Django 1.5：扩展 base.html 时，我的 <head> 标签显示在我孩子的 <body> 中
Posted
技术标签:
【中文标题】Django 1.5：扩展 base.html 时，我的 <head> 标签显示在我孩子的 <body> 中【英文标题】：Django 1.5: When extending base.html, my <head> tag displays in my child's <body> 【发布时间】：2014-08-11 09:56:23 【问题描述】：编辑：添加我的基本模板和子模板的完整版本。
我正在使用 Django 1.5.8 并且有一个基本模板（在模板根目录中）和用于扩展基础的子模板的子文件夹。
当我扩展 base.html 时，基本模板的所有内容都会显示在子模板的正文中。这发生在除索引之外的所有子页面上。是否有一些我不知道的 Django 模板继承规则？
这是我的完整基础：
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
% load ganalytics %
% load twitter_tag %
% load compress %
% load tags %
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
% block othermeta %
<meta name="description" content="Welcome to Multimechanics">
<title>MultiMechanics</title>
<link rel="icon" type="image/png" href=" STATIC_URL ico/favicon.ico" />
<!--Needed for salesforce-->
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
% endblock %
<!-- Bootstrap core CSS -->
<!--<link href="css/bootstrap.min.css" rel="stylesheet">-->
% compress css %
<link href=" STATIC_URL css/style.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href=" STATIC_URL css/animate.css" rel="stylesheet">
<link href=" STATIC_URL css/lightbox.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700' rel='stylesheet' type='text/css'>
% endcompress %
% ganalytics %
% block otherheader %% endblock %
</head>
<body>
<!-- Navigation -->
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src=" STATIC_URL img/logo.png" ></a>
</div>
<div class="collapse navbar-collapse">
% if user.is_authenticated %
<a href="/logout" class="navbar-btn btn btn-red pull-right hidden-sm hidden-xs">Log Out</a>
% else %
<a href="/login" class="navbar-btn btn btn-red pull-right hidden-sm hidden-xs">Log In</a>
% endif %
<ul class="nav navbar-nav navbar-right">
<li class='dropdown % active request "^/faqs/$" % % active request "^/multiscale/$" % % active request "^/about-us/$" %'>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About<b class="caret"></b></a>
<ul class="dropdown-menu">
% if request.get_full_path == "/" %
<li><a href="#about">Product Overview</a></li>
<li><a href="#features">Product Applications</a></li>
% else %
<li><a href="/">Multimech Home</a></li>
% endif %
<li><a href="/about-us">MultiMech Details</a></li>
<li><a href="/multiscale">What's Multiscale?</a></li>
<!--<li><a href="/porfolio/demos">Demos</a></li>
<li><a href="/portfolio/case">Case Studies</a></li>-->
<li><a href="/faqs">Frequent Questions</a></li>
</ul>
</li>
<li class='dropdown % active request "^/trueinnovation/$" % % active request "^/portfolio/$" %'>
<a href="/portfolio" class="dropdown-toggle" data-toggle="dropdown">Showcases <b class="caret"></b></a>
<ul class="dropdown-menu">
% if request.get_full_path == "/" %
<li><a href="#showcases">Featured Demos</a></li>
% endif %
<li><a href="/portfolio">Demo Gallery</a></li>
<li><a href="/trueinnovation">Blog</a></li>
</ul>
</li>
<li class='dropdown % active request "^/careers/$" % % active request "^/contact-us/$" % % active request "^/login/$" % % active request "^/help/$" % % active request "^/register/$" % % active request "^/thanks/$" %'>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Connect<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/contact-us">Contact Us</a></li>
<li><a href="/careers">Careers</a></li>
<li><a href="/help">Help</a></li>
<li><a href="/login">User Login</a></li>
</ul>
</li>
% if request.get_full_path != "/" %
<li class="dropdown">
<a href="/contact-us">Contact</a>
</li>
% else %
<li class="dropdown">
<a href="#contact">Contact</a>
</li>
% endif %
<!-- Navbar Search -->
<li class="hidden-xs" id="navbar-search">
<a href="#">
<i class="fa fa-search"></i>
</a>
<div class="hidden" id="navbar-search-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</li>
</ul>
<!-- Mobile Search -->
<form class="navbar-form navbar-right visible-xs" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-red" type="button">Search!</button>
</span>
</div>
</form>
</div><!--/.nav-collapse -->
</div>
</div>
</header>
<!-- / .navigation -->
% block content %
% endblock %
<!-- footer
================================================== -->
<footer>
<div class="container">
<div class="row">
<!-- Contact Us -->
<div class="col-sm-4">
<h4><i class="fa fa-map-marker text-red"></i> Contact Us</h4>
<p>Do not hesitate to contact us if you have any questions or feature requests:</p>
<p>
Omaha, NE 68154<br />
14301 FNB Parkway, Suite 100<br />
Phone: +1 402 957 1336<br />
Email: <a href="mailto:sales@multimechrd.com">sales@multimechrd.com</a>
</p>
</div>
<!-- Recent Tweets -->
% load twitter_tag cache %
% cache 60 my_tweets %
% get_tweets for "multimechanics" as tweets limit 2 %
<div class="col-sm-4">
<h4><i class="fa fa-twitter-square text-red"></i> Recent Tweets</h4>
% for tweet in tweets %
<div class="tweet">
<i class="fa fa-twitter fa-2x"></i>
<p>
tweet.html|safe
</p>
</div>
% endfor %
</div>
% endcache %
<!-- Newsletter -->
<div class="col-sm-4">
<h4><i class="fa fa-envelope text-red"></i> Newsletter</h4>
<p>
Enter your e-mail below to subscribe to our free newsletter.
<br>
We promise not to bother you often!
</p>
<!--<form class="form" role="form" method="post" action="/newsletter request.get_full_path ">-->
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST">
<input type=hidden name="oid" value="00Di0000000fkHM">
<input type=hidden name="retURL" value="http://multimech2.azurewebsites.net/thanks/newsletter">
<input type=hidden name="lead_source" id="lead_source" value="Web">
<input type=hidden name="city" id="city" value="ip">
% csrf_token %
<div class="row">
<div class="col-sm-8">
<div class="input-group">
<label class="sr-only" for="subscribe-email">Email address</label>
<!--<input type="email" class="form-control" id="subscribe-email" placeholder="Enter your email">-->
<div class="fieldWrapper"> newsletter_form.email </div>
<span class="input-group-btn">
<button type="submit" class="btn btn-default" name="newsletter_form">OK</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</footer>
<!-- Copyright -->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="copyright">
Copyright 2014 - MultiMechanics, LLC | All Rights Reserved
</div>
</div>
</div> <!-- / .row -->
</div> <!-- / .container -->
<!-- Bootstrap core javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
% compress js %
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src=" STATIC_URL js/bootstrap.min.js"></script>
<script src=" STATIC_URL js/scrolltopcontrol.js"></script>
<script src=" STATIC_URL js/lightbox-2.6.min.js"></script>
<script src=" STATIC_URL js/custom.js"></script>
% endcompress %
% block otherfooter %% endblock %
</body>
</html>
这是我完整的孩子：
% extends "base.html" %
% block content %
<!-- Wrapper -->
<div class="wrapper">
<!-- Topic Header -->
<div class="topic">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Sign In</h3>
</div>
<div class="col-sm-8">
<ol class="breadcrumb pull-right hidden-xs">
<li><a href="/">Home</a></li>
<li class="active">Log In</li>
</ol>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="sign-form">
<div class="sign-inner">
<h3 class="first-child">Log In To Your Account</h3>
<hr>
<form role="form" action="" method="post">
% csrf_token %
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
form.username
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
form.password
</div>
<div class="checkbox">
<!--<label>
<input type="checkbox"> Remember me
</label>-->
</div>
<button type="submit" class="btn btn-red" name="login_form">Submit</button>
<hr>
</form>
<p>Not registered? <a href="/register">Create an Account.</a></p>
<div class="pwd-lost">
<div class="pwd-lost-q show">Lost your password? <a href="#">Click here to recover.</a></div>
<!--https://github.com/brutasse/django-password-reset-->
<div class="pwd-lost-f hidden">
<p class="text-muted">Enter your email address below and we will send you a link to reset your password.</p>
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="email-pwd">Email address</label>
<input type="email" class="form-control" id="email-pwd" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-blue">Send</button>
</form>
</div>
</div> <!-- / .pwd-lost -->
</div>
</div>
</div>
</div> <!-- / .row -->
</div> <!-- / .container -->
</div> <!-- / .wrapper -->
% endblock %
以下是 html 的呈现方式：
<html lang="en">
<head>
<style type="text/css"></style>
</head>
<body style="">
<!-- base.html -->
<!--[if lt IE 8 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 8)|!(IE)]><!-->
<!--<![endif]-->
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Navigation -->
<header>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="/static/img/logo.png" ></a>
</div>
<div c
这是我呈现该页面的方式（但我对其他模板使用“render_to_response”并获得相同的结果：
url(r'^about-us/', TemplateView.as_view(template_name="about-us.html"), name='about-us'),
提前感谢您的帮助。
【问题讨论】：
看起来您可能会包含base.html 而不是扩展它。
想过，但没有。我肯定在使用扩展。
【参考方案1】：
在 2019 年遇到同样的问题后，正如 Majid Mobini 所说，这是由于 Visual Studio 对源文件的编码。由于 VS 2019 不再具有高级保存选项，我的解决方案是从 VS Marketplace 安装修复文件编码扩展并重新保存我的文件 - 然后按预期将元数据放置在 HEAD 中。
【讨论】：
【参考方案2】：我也有类似的问题。
将我的文件编码更改为“utf-8 without BOM”解决了我的问题。
（http://validator.w3.org/ 可能会帮助你。）
【讨论】：
【参考方案3】：您确定您正在编辑正确的“base.html”文件吗？看来您可能正在编辑同名但位于不同位置的文件。另外，您是否使用 Javascript 或其他东西来填充您的 <navigation> </navigation> ？呈现的结果与您的 base.html 不匹配。如果您使用 Javascript 生成此导航部分，这可能是您的罪魁祸首。如果为了可读性而对其进行了编辑，那么我将在您的项目文件夹中搜索“base.html”或“about-us.html”的另一个实例。您可能会发现您正在编辑错误的文件。你能发布完整的文件“base.html”和“about-us.html”以及整个响应吗？
编辑：我相信问题可能出在您的“othermeta”块中。可以看到以下几行渲染正确：
<meta charset="utf-8">
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
<meta name="viewport" content="width=device-width, initial-scale=1">
这是结果中变得混乱的地方。当您呼叫% block othermeta % 时，这也是您基地的重点。你有那个块里面有内容的原因吗？我不确定它是否正确接受了 % endblock %。如果您希望块 othermeta 是动态的，则必须将它放在自己的 othermeta.html 中，它也扩展了 base.html。然后，您可以将代码更改为：
% block othermeta % % endblock %
我认为错误可能是您试图在扩展模板中定义此块的内容。我和你一样是新手，所以我可能完全错了，但是现在尝试完全删除你的 othermeta 块，看看是否有帮助。
希望这会有所帮助！
【讨论】：
抱歉 - 这些是经过编辑的版本。没有花哨的 JS 用于生成导航。奇怪的是，我的 Index.html 可以正确呈现，但站点中的所有其他页面却没有。 感谢您发布更多信息！我已经编辑了我的答案。运气好吗？ 不幸的是没有运气。在我回来调查之前，我最终只是做了一些 hackey 硬编码。以上是关于Django 1.5：扩展 base.html 时，我的 <head> 标签显示在我孩子的 <body> 中的主要内容，如果未能解决你的问题，请参考以下文章