带有 Flask Bootstrap 的 Flask Nav：“Navbar”对象没有属性“kwargs”答案

【问题标题】：Flask Nav with Flask Bootstrap: 'Navbar' object has no attribute 'kwargs'带有 Flask Bootstrap 的 Flask Nav：“Navbar”对象没有属性“kwargs”
【发布时间】：2018-12-19 16:29:52
【问题描述】：

在此代码中，Flask Nav 一直有效，直到我添加 Flask Bootstrap 代码：

from flask import Flask, render_template
from flask_bootstrap import Bootstrap
from flask_nav import Nav
from flask_nav.elements import Navbar, Subgroup, View, Link, Text, Separator

app = Flask(__name__)
nav = Nav(app)

nav.register_element('my_navbar', Navbar(
    'thenav',
    View('Home Page', 'index'),
    View('Item', 'item', item=1),
    Separator(),
    Link('Google', 'https://www.google.com'),
    Separator(),
    Text('Some text'),
    Subgroup('Extras',
        Link('Yahoo', 'https://www.yahoo.com'),
        View('Index', 'index')
    )
))

Bootstrap(app)

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

@app.route('/items/<item>')
def item(item):
    return '<h2>The item is {} </h2>'.format(item)

if __name__ == '__main__':
    app.run(debug=True)

一旦添加了 Flask Bootstrap，我就会得到

AttributeError: 'Navbar' 对象没有属性 'kwargs'

【问题讨论】：

标签： flask flask-bootstrap flask-nav

【解决方案1】：

我在使用 flask-boostrap 4.0.2 时也遇到了这个问题，因为我的目标是使用 Bootstrap 4。恢复到 flask-bootstrap 3.3.7.1，它开始工作（前提是我也使用了 Boostrap 3.3.7）。在撰写本文时，3.3.7.1 似乎是flask-boostrap and is 2 years stale 的最新版本。所谓的"flask-bootstrap4" 一年没有新版本发布，而且似乎没有供人们贡献的公共 git 存储库。我相信nav.Bootstraprenderer 类在 v4 中被破坏，但如果使用 BS4，v3 代码无法正确呈现 NavBars。

在这上面花了几个小时之后，我不太确定我们使用 flask-boostrap 能得到很多：只需维护我们自己的 Jinja2 基本模板并导入我们想要的 BS 版本以及 @987654323 并不难@。

【讨论】：

【解决方案2】：

挣扎了 20 天后，我发现我的导航栏是使用 flask-nav 在 pyhton 中创建的，但似乎 flask-Bootstrap4 版本与 flask-nav 不兼容。所以我注释掉了所有与导航栏相关的代码，并尝试使用 Bootstrap4 在 HTML 中创建导航栏。然后它对我有用。我使用 cosmo.Bootstrap.min.css 主题。你应该安装 flask-Bootstrap4 即： pip install flask-Bootstrap4 希望这个答案会有所帮助。

我的 NavBar 的 HTML 代码实现

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{{ url_for('index') }}">NavBar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" 
     data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" 
       aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="{{ url_for('index') }}">Home <span 
          class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('Title_2') }}">Title_2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{{ url_for('Title_3') }}">Title_3</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          User
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="{{ url_for('login') }}">Login</a>
<a class="dropdown-item" href={{url_for('change_password')}}">Change Password</a>
          <a class="dropdown-item" href={{url_for('logout')}}">Logout</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

您可以点击此链接了解如何实现 NavBar： https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-ii-templates

【讨论】：