如何正確地繼承使用bootstrap的燒瓶模板？

它似乎如果我使用{% extends "base.html" %}它正確地繼承模板，但導航欄不使用引導程序。如何正確地繼承使用bootstrap的燒瓶模板？

如果我使用{% extends "bootstrap/base.html" %}它甚至不工作。我沒有收到錯誤，但只是將標題設置爲索引，然後頁面爲空。

另注：我已經得到了導航欄，以顯示直接把它裏面index.html和使用{% extends "bootstrap/base.html" %}

我使用瓶Web開發米格爾·格林貝格和代碼，除了相同的唯一途徑內容明顯。

我在做什麼錯？有沒有人有很好的資源，可以慢慢進入Flask，這不僅僅是首先潛入腦中？我無法理解小挑剔的細節。

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 %}

現在索引頁面的標題是「指數 - MyFlask」，所以你可以對所有標題的常見後綴頁面。

或者如果您需要每個頁面都有自己的特定標題，則可以在其中定義title塊，覆蓋base.html中的title塊。

來源

2015-10-22 05:09:12 farzad

如何正確地繼承使用bootstrap的燒瓶模板？

回答

相關問題