Django 1.5: при расширении base.html , мой тег отображается в моего дочернего элемента

ProgramBox

Django 1.5: при расширении base.html , мой тег отображается в моего дочернего элемента

Post author:admin
Запись опубликована:3 сентября, 2022
Post category:Вопросы по программированию

#django #django-templates

#django #django-шаблоны

Вопрос:

Редактировать: добавление полных версий моего базового и дочернего шаблона.

Я использую 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'),

Заранее спасибо за помощь.

Ответ №1:

У меня была похожая проблема.

Изменение кодировки моих файлов на «utf-8 без спецификации» решило мою проблему.

(http://validator.w3.org / может помочь вам.)

Ответ №2:

Вы уверены, что редактируете правильный «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 блок и посмотреть, поможет ли это.

Надеюсь, это поможет!

1. Извините — это были отредактированные версии. Для создания навигации не используется причудливый JS. Странно то, что мой Index.html отображается правильно, но все остальные страницы на сайте этого не делают.

2. Спасибо за публикацию дополнительной информации! Я отредактировал свой ответ. Есть успехи?

3. К сожалению, не повезло. В итоге я просто сделал какое-то хакерское жесткое кодирование, пока не смогу вернуться и провести расследование.

Ответ №3:

После возникновения той же проблемы в 2019 году это было, как сказал Маджид Мобини, из-за кодирования исходных файлов Visual Studio. Поскольку в VS 2019 больше нет расширенных параметров сохранения, моим решением было установить расширение Fix File Encoding из VS Marketplace и повторно сохранить мои файлы, которые затем поместили meta в HEAD, как и ожидалось.

Метки: Django 1.5: при расширении base.html мой тег отображается в моего дочернего элемента