在烧瓶中导入引导模板的问题答案

【问题标题】：Problem importing bootstrap templates in flask在烧瓶中导入引导模板的问题
【发布时间】：2022-02-01 10:29:18
【问题描述】：

我是烧瓶新手，刚开始训练后我就碰壁了……

项目结构如下：

flask_project_directory
|
+- start.py
|
+- [templates]
   |
   +- [bootstrap]
   |  |
   |  +- base.html
   |
   +- 404.html
   +- 500.html
   +- base.html
   +- index.html
   +- user.html

如您所见，有两个base.html 文件，都包含不同的源代码。但让我们从头开始。

start.py:

from flask import Flask, render_template
from flask_bootstrap import Bootstrap

app = Flask(__name__)
bootstrap = Bootstrap(app)


@app.route('/')
def index():
    return render_template('index.html')


@app.route('/user/<name>')
def user(name):
    return render_template('user.html', name=name)


@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'), 404


@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'), 500


app.run(debug=True)

templates/bootstrap/base.html:

<!DOCTYPE html>
<html>
<head>
    {% block scripts %}
    {% endblock %}
    {% block head %}
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{% block title %}Test-{% endblock %}-app</title>
    {% endblock %}
</head>
<body>
{% block content %}
<div class="container">
    {% block page_content %}{% endblock %}
</div>
{% endblock %}
</body>
</html>

templates/base.html:

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

{% block title %}- app{% endblock %}

{% block head %}
{% endblock %}

{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navbar</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">START</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="navbar navbar-nav">
            <li><a href="/">Home Page</a></li>
        </ul>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="container">
    {% block page_content %}{% endblock %}
</div>
{% endblock %}

index.html:

{% extends "base.html" %}

{% block page_content %}
<div class="page-header">
    <h3>Hi there!</h3>
</div>
{% endblock %}

user.html:

{% extends "base.html" %}
{% block title %}-app{% endblock %}

{% block page_content %}
<div class="page-header">
    <h3>Hi, {{ name }}!</h3>
</div>
{% endblock %}

问题是，尽管index.html 和user.html 都扩展了templates/base.html，但在templates/bootstrap/base.html 中定义导航栏和相关组件的代码却无处可寻。此外，templates/base.html 在任何地方都看不到。事实上，如果定义了用户名，应用程序会正确处理用户名，如果 URL 指向 index.html 页面，则会出现问候语，404 错误也得到正确处理，但没有加载 bootstrap 组件。此外，根本没有 bootstrap 样式，基本字体是 Times New Roman。

有没有绝对路径的东西？在拆分代码以实现 DRY 假设之前，我必须补充一点，一切正常。看起来我搞砸了导入，但不知道在哪里。

【问题讨论】：

您是否在虚拟环境中安装了flask-bootstrap？
它是通过 PyCharm GUI 添加到项目包中的。它在拆分为模块之前工作，所以它似乎不是flask-bootstrap 本身的问题。如您所见，user.html 在<head> 部分中没有任何内容 - 内容应该从两个base.html 源导入，但呈现的页面有空的<head>。

标签： flask flask-bootstrap

【解决方案1】：

一旦您初始化了bootstrap，模板“bootstrap/base.html”就可用，并且可以使用extends 关键字从您的应用程序模板中引用。你已经做到了。

您只能拥有templates/base.html 模板。你不需要templates/bootstrap/base.html。

您的templates/base.html 看起来总体上很好而且很健康。通过一些修改，您可以拥有templates/bootstrap/base.html 中的其余功能：

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

{% block title %}
    <!-- You do not need to define your meta tags here -->
    <!-- Simply add your title -->
    <title>Test</title>
{% endblock %}

{% block head %}{% endblock %}

{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
    <div class="container">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navbar</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">START</a>
    </div>
    <div class="navbar-collapse collapse">
        <ul class="navbar navbar-nav">
            <li><a href="/">Home Page</a></li>
        </ul>
    </div>
</div>
{% endblock %}

{% block content %}
    <div class="container">
        {% block page_content %}{% endblock %}
    </div>
{% endblock %}

{% block scripts %}{% endblock %}

title、head、navbar、content 和 scripts 块是 bootstrap/base.html 的实现。

【讨论】：

不幸的是，按照建议的方式编辑代码并没有解决问题。除此之外，从templates/base.html 中删除对templates/bootstrap/base.html 的引用使DOM 元素出现在页面上，但没有任何引导格式，就像库从未连接过一样。