Question

我想将Bootstrap添加到我的网站。我有base.html和其他文件，这些文件是从base.html继承的，但是在我的base.html中，我想要导航栏，它将显示在每个站点上。不幸的是，在添加了一些引导代码之后，没有显示它，但是如果我将此代码添加到index.html，它将显示出来。

我的base.html：

{% extends "bootstrap/base.html" %}
{% block head %}
    {{ super() }}
    {% if title %}
    <title> {{ title }} - Book Blog</title>
    {% else %}
    <title> Welcome to Book Blog!</title>
    {% endif %}
{% endblock %}

{% block navbar %}
Microblog: 
    <ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="{{ url_for('index') }}">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('show_books') }}">Books</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('login') }}">Login</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
    </li>
</ul>
{% endblock %}

<body>

<hr>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
    {% for message in messages %}
    <li>{{ message }}</li>
    {% endfor %}
</ul>
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</body>

因此，在这种情况下，不会显示导航栏。就像我上面写的，如果我将nav类添加到index.html，则navbar仅显示在此站点上。我该如何解决？

Answer 1

您可能需要在每个页面上导入Bootstrap库（Js，Css）。我建议编写一个<title></title>文件，您可以在每个页面中导入该文件。属性具有相同的含义：为导航栏编写文件，并在需要导航栏时将其导入“基本Html”中。希望我能帮忙

Answer 2

问题可能来自您的 index.html 页面。原则上，您的索引页必须继承 base.html 模板。应该给它什么：

{% extends "base.html" %}
{% block title %}Welcome to Book Blog!{% endblock %}

{% block content %}
    <div>
        <h1>Your content</h1>
    </div>
{% endblock %}

您的模板 base.html 也可以稍作更改：

{% extends "bootstrap/base.html" %}
{% block head %}
    {{ super() }}
    {% if title %}
        <title> {{ title }} - Book Blog</title>
    {% else %}
        <title> Welcome to Book Blog!</title>
    {% endif %}
{% endblock %}

{% block body %}
<body>

{% block navbar %}
Microblog: 
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="{{ url_for('index') }}">Home</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('show_books') }}">Books</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('login') }}">Login</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="{{ url_for('logout') }}">Logout</a>
    </li>
</ul>
{% endblock %}

    <hr>
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <ul>
                {% for message in messages %}
                    <li>{{ message }}</li>
                {% endfor %}
           </ul>
       {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
</body>
{% endblock %}

我在您的模板的body标签上添加了一个block标签。现在，您应该在要具有相同结构（导航栏等）的所有页面中继承此模板。

Flask-base.html中的Bootstrap

2 个答案: