编辑:添加我的基本和子模板的完整版本。
我正在使用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" alt="..."></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" alt="..."></a>
</div>
<div c
以下是我渲染该页面的方法(但我对其他模板使用“render_to_response”并获得相同的结果:
url(r'^about-us/', TemplateView.as_view(template_name="about-us.html"), name='about-us'),
提前感谢您的帮助。
答案 0 :(得分:2)
答案 1 :(得分:0)
您确定要编辑正确的&#34; base.html&#34;文件?您可能正在编辑具有相同名称但位于不同位置的文件。另外,您使用Javascript或其他东西来填充<navigation> </navigation>
吗?渲染结果与您的base.html不匹配。如果您使用Javascript生成此导航部分,这可能是您的罪魁祸首。如果为了便于阅读而对其进行了编辑,那么我会搜索&#34; base.html&#34;的另一个实例。或&#34; about-us.html&#34;在您的项目文件夹中。您可能会发现您正在编辑错误的文件。你能发布完整的文件&#34; base.html&#34;和&#34; about-us.html&#34;和整个回应?
编辑:我认为问题可能出在你的&#34; othermeta&#34;块。您可以看到以下行正确呈现:
<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
我认为错误可能是您尝试在扩展模板中定义此块的内容。我和你一样对此感到陌生,所以我可能完全错了,但是现在尝试完全删除{{1}}块,看看它是否有帮助。
希望这有帮助!
答案 2 :(得分:0)
在2019年出现同样的问题之后,正如Majid Mobini所说,这是由于Visual Studio对源文件进行了编码。由于VS 2019不再具有“高级保存”选项,因此我的解决方案是从VS Marketplace安装“修复文件编码”扩展并重新保存我的文件-然后将元数据按预期放置在HEAD中。