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

Question

It seems if I use {% extends "base.html" %} it inherits the template correctly but the navbar doesn't use bootstrap. 看来，如果我使用{% extends "base.html" %}它将正确继承模板，但导航栏不使用引导程序。

If I use {% extends "bootstrap/base.html" %} it doesn't even work. 如果我使用{% extends "bootstrap/base.html" %}它甚至无法正常工作。 I don't get errors but it just sets the title to Index and then the page is blank. 我没有收到错误，但只是将标题设置为Index，然后页面为空白。

Another note: The only way I've gotten the navbar to show up is directly putting it inside index.html and using {% extends "bootstrap/base.html" %} 另一注：显示导航栏的唯一方法是直接将其放入index.html并使用{% extends "bootstrap/base.html" %}

I am using Flask Web Development by Miguel Grinberg and the code is identical except the obvious content. 我使用的是Miguel Grinberg的Flask Web Development，除了明显的内容外，代码是相同的。

What am I doing wrong? 我究竟做错了什么？ And does anyone have good resources for slowly jumping into Flask that doesn't just dive in head first? 有没有人有足够的资源慢慢跳入Flask，而不仅仅是跳入头脑？ I'm having trouble understanding the little nitpicky details. 我在了解一些挑剔的细节时遇到了麻烦。

base.html: 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: 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

When using the template inheritance it is common to define the structure of the layout in the base template, and then provide the specific details of each child template in the blocks (like content , page_content , etc). 使用模板继承时，通常在基本模板中定义布局的结构，然后在块中提供每个子模板的特定详细信息（如content ， page_content等）。

In the above example where the base template itself is a child template (of "bootstrap/base.html"), the same pattern can be used. 在上面的示例中， base模板本身是子模板（“ bootstrap / base.html”的子模板），可以使用相同的模式。

Instead of defining HTML tags (like <html> , <head> , etc.) it's better to use the corresponding blocks . 与其定义HTML标签（例如<html> ， <head>等），不如使用相应的块。 Flask bootstrap defines such blocks corresponding to each of these HTML tags, where child templates can override. Flask bootstrap 定义了与每个HTML标记相对应的此类块，子模板可在其中覆盖。

So if you change the base.html template as follows, then the index template can use the layout defined in bootstrap/base : 因此，如果您按以下方式更改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 %}

Note that in the head block, we are using super() to bring whatever Flask bootstrap has defined in the head block (could be loading CSS, JS files, etc.). 请注意，在head块中，我们使用super()带来了在head块中定义的任何Flask引导程序（可能正在加载CSS，JS文件等）。 This allows the base.html template to customize the head section. 这使得base.html模板自定义head部分。 However if you do not require this control and only want to specify the title of the page, then you can avoid overwriting head block and just define the title block. 但是，如果你不需要这种控制，只需要指定页面的标题，那么你就可以避免覆盖head块，只是定义title块。 To do this change base.html file to start like: 为此，将base.html文件更改为如下所示：

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

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

Removing {% block head %} ... section. 删除{% block head %} ...部分。 And then modify your index.html template to define the page_name block instead of title : 然后修改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 %}

Now the title of the index page will be "Index - MyFlask", so you could have a common suffix for the title of all the pages. 现在，索引页面的标题将为“ Index-MyFlask”，因此您可以为所有页面的标题添加一个通用后缀。

Or if you need each page to have their own specific title, you may define the title block in there, overriding the title block in base.html . 或者，如果您需要每个页面都有自己的特定标题，则可以在其中定义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