如何正确继承烧瓶中使用引导程序的模板？答案

【问题标题】：How do I correctly inherit templates in flask that use bootstrap?如何正确继承烧瓶中使用引导程序的模板？
【发布时间】：2016-01-21 04:57:56
【问题描述】：

似乎如果我使用{% extends "base.html" %} 它会正确继承模板，但导航栏不使用引导程序。

如果我使用{% extends "bootstrap/base.html" %}，它甚至都不起作用。我没有收到错误，但它只是将标题设置为索引，然后页面为空白。

另一个注意事项：我让导航栏显示的唯一方法是直接将其放入 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 %}

【问题讨论】：

标签： python html css twitter-bootstrap flask

【解决方案1】：

使用模板继承时，通常在基本模板中定义布局结构，然后在块中提供每个子模板的具体细节（如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 块中定义的任何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 块。

【讨论】：

非常感谢！你是救生员。只有一个问题，它显示标签两次。这是常见的还是应该只显示一个标题标签？
应该是因为在head块中同时使用了HTML标签<title>和块{% block title %}。可能只使用{% block title %} 是更好的方法。