如何正確繼承使用引導程序的燒瓶中的模板？

Question

看來，如果我使用{% extends "base.html" %}它將正確繼承模板，但導航欄不使用引導程序。

如果我使用{% extends "bootstrap/base.html" %}它甚至無法正常工作。 我沒有收到錯誤，但只是將標題設置為Index，然后頁面為空白。

另一注：顯示導航欄的唯一方法是直接將其放入index.html並使用{% extends "bootstrap/base.html" %}

我使用的是Miguel Grinberg的Flask Web Development，除了明顯的內容外，代碼是相同的。

我究竟做錯了什么？ 有沒有人有足夠的資源慢慢跳入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 %}

Answer 1

使用模板繼承時，通常在基本模板中定義布局的結構，然后在塊中提供每個子模板的特定詳細信息（如content ， page_content等）。

在上面的示例中， base模板本身是子模板（“ bootstrap / base.html”的子模板），可以使用相同的模式。

與其定義HTML標簽（例如<html> ， <head>等），不如使用相應的塊。 Flask bootstrap 定義了與每個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塊中定義的任何Flask引導程序（可能正在加載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欄，以覆蓋base.html的title base.html 。

如何正確繼承使用引導程序的燒瓶中的模板？

問題描述

1 個解決方案

解決方案1
3 已采納 2015-10-22 05:09:12

如何正確繼承使用引導程序的燒瓶中的模板？

問題描述

1 個解決方案

解決方案1 3 已采納 2015-10-22 05:09:12

解決方案1
3 已采納 2015-10-22 05:09:12