Question

似乎我使用{% extends "base.html" %}它正确地继承了模板，但导航栏没有使用bootstrap。

如果我使用{% 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 %}

Answer 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()来引入Flask引导程序在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块，覆盖title中的base.html块。

如何正确地继承使用bootstrap的烧瓶中的模板？

1 个答案: