Question

在我添加图标之前，所有内容都运行良好，包括标题。手动创建<head>并调用{{ super() }}以引入Bootstrap的黑魔法后，标题现在显示在导航栏上方。

base.html文件

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

{% block head %}
    {{ super() }}
    {% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}

<body>
    {% block navbar %}
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">MyFlask</a>
                </div>
            </div>
        </nav>
    {% endblock %}
</body>

的index.html

{% extends "base.html" %}

{% block page_name%}Index{% endblock %}

Answer 1

在块中使用super()函数时，您将向该块添加新内容，而不是替换原始内容。因此，当您在super()块中调用head时，Jinja2会从head中插入bootstrap/base.html块的内容：

  <head>
    {%- block head %}
    <title>{% block title %}{% endblock title %}</title>

    {%- block metas %}
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {%- endblock metas %}

    {%- block styles %}
    <!-- Bootstrap -->
    <link href="{{bootstrap_find_resource('css/bootstrap.css', cdn='bootstrap')}}" rel="stylesheet">
    {%- endblock styles %}
    {%- endblock head %}
  </head>

之后你添加了一个新的title块，所以现在你有两个，这就是问题所在。

解决方案很简单，不要在head中定义新的base.html块，只需覆盖title块，并将您的favicon线附加到styles }：

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

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

{%- block styles %}
{{ super() }}
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">MyFlask</a>
            </div>
        </div>
    </nav>
{% endblock %}

Answer 2

我怀疑这并没有直接回答你的问题，但也许更好的方法是从视图中传递页面标题。

base.html

{% block title %}
    {% if title %}
        {{title}} - MyFlask
    {% else %}
        MyFlask
    {% endif %}
{% endblock %}

views.py

@app.route('/', methods=['GET'])
def index():
    return render_template("index.html", title='Index')

为什么使用Flask时标题会显示在页面正文中？

2 个答案: