Django 1.5:扩展base.html时,我的标签显示在我的孩子身上

时间:2014-06-20 15:25:35

标签: django django-templates

编辑:添加我的基本和子模板的完整版本。

我正在使用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'),

提前感谢您的帮助。

3 个答案:

答案 0 :(得分:2)

我有类似的问题。

将我的文件编码更改为“ utf-8无BOM ”解决了我的问题。

http://validator.w3.org/可以帮助你。)

答案 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中。