Как правильно наследовать шаблоны в фляге, которые используют бутстрап?

Кажется, что если я использую {% extends "base.html" %}, он наследует шаблон правильно, но navbar не использует загрузку.Как правильно наследовать шаблоны в фляге, которые используют бутстрап?

Если я использую {% extends "bootstrap/base.html" %}, он даже не работает. Я не получаю ошибок, но он просто устанавливает заголовок в Index, а затем страница пуста.

Еще одно замечание: Единственный способ Я получил Navbar, чтобы показать непосредственно положить его в index.html и используя {% extends "bootstrap/base.html" %}

Я использую КОЛБУ Web Development Мигель Гринберг и код идентичен за исключением очевидное содержание.

Что я делаю неправильно? И есть ли у кого-нибудь хорошие ресурсы для медленного прыжка в колбу, которая не просто ныряет в голову сначала? У меня возникли проблемы с пониманием маленьких подробностей.

base.html:

{% extends "bootstrap/base.html" %} 
<html> 

<head> 
    {% block head %} 
    <title>{% block title %}{% endblock %} - MyFlask</title> 
    {% endblock %} 
</head> 

<body> 

    {% block navbar %} 
     <div class="navbar navbar-inverse" 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">Navbar</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="/">MyFlask</a> 
       </div> 
       <div class="navbar-collapse collapse"> 
        <ul class="nav navbar-nav"> 
         <li><a href="/">Home</a></li> 
         <li><a href="/bootstrap"></a></li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    {% endblock %} 

    {% block content %} 
     <div class="container"> 
      {% block page_content %}{% endblock %} 
     </div> 
    {% endblock %} 

</body> 
</html>

index.html:

{% extends "base.html" %} 
{% block title %}Index{% endblock %} 

{% block page_content %} 
    <h3>Session info:</h3> 
    <p><b>Browser:</b> {{ browser }}</p> 
{% endblock %}

источник

2015-10-22 Jordan

При использовании наследования шаблонов он является общим для определения структуры макета в базовом шаблоне, а затем предоставить конкретные детали каждого дочернего шаблона в блоках (например, content, page_content и т. д.).

В приведенном выше примере, где сам шаблон base является дочерним шаблоном (из «bootstrap/base.html»), можно использовать тот же шаблон.

Вместо определения HTML-теги (как <html>, <head> и т.д.), лучше использовать соответствующие блоки. Flask bootstrap defines такие блоки, соответствующие каждому из этих тегов HTML, где дочерние шаблоны могут переопределяться.

Так что, если вы измените base.html шаблон следующим образом, то index шаблона можно использовать макет, определенный в bootstrap/base:

{% extends "bootstrap/base.html" %} 

{% block head %} 
    {{ super() }} 
    <title>{% block title %}{% endblock %} - MyFlask</title> 
{% endblock %} 

{% block navbar %} 
    <div class="navbar navbar-inverse" 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">Navbar</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
       <a class="navbar-brand" href="/">MyFlask</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a href="/">Home</a></li> 
        <li><a href="/bootstrap"></a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 
{% endblock %} 

{% block content %} 
    <div class="container"> 
     {% block page_content %}{% endblock %} 
    </div> 
{% endblock %}

Обратите внимание, что в head блоке, мы используем super(), чтобы принести то, что колба самозагрузка имеет определенный в блоке head (можно загрузить CSS, JS-файлы и т. д.). Это позволяет шаблону base.html настроить раздел head. Однако, если вы не требуете этого элемента управления и хотите указать заголовок страницы, вы можете избежать перезаписи блока head и просто определить блок title. Для того, чтобы сделать это изменение base.html файл, чтобы начать, как:

{% extends "bootstrap/base.html" %} 

{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}

Удаление {% block head %} ... секции. А затем измените index.html шаблон для определения page_name блока вместо title:

{% extends "base.html" %} 

{% block page_name %}Index{% endblock %} 

{% block page_content %} 
    <h3>Session info:</h3> 
    <p><b>Browser:</b> {{ browser }}</p> 
{% endblock %}

Теперь заголовок страницы индекса будет «Index - MyFlask», чтобы вы могли иметь общий суффикс для названия всех страниц.

Если вам нужно, чтобы каждая страница имела свой собственный заголовок, вы можете определить там блок title, переопределяя блок title в base.html.

источник

2015-10-22 05:09:12 farzad

Как правильно наследовать шаблоны в фляге, которые используют бутстрап?

ответ

Смежные вопросы