1

我有一个带有静态导航栏的应用程序。现在我想动态生成它（管理员和非管理员用户不同，注入模块项目等）。所以我决定为此使用flask_navbar。完成后生成的 HTML 与静态 HTML 略有不同：

静止的：

<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <a class="navbar-brand" href="/">Home</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 dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
            Orders
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="/orders">List orders</a>
            <a class="dropdown-item" href="/orders/new">New order</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/payments">Wallet</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/logout">Logout</a>
        </li>
        <li class="nav-item">
            {{ current_user.username }}
        </li>
      </ul>
    </div>
  </nav>

烧瓶导航栏：

def init_navbar(app):
    topbar = Navbar('Home',
        Subgroup('Orders',
            Link('List orders', '/orders'),
            Link('New order', '/orders/new')
        ),
        Link('Wallet', '/wallet'),
        Link('Logout', '/logout'),
        Text(current_user.username)
    )
    nav.register_element('top', topbar)
    nav.init_app(app)

结果：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#c651965884bf4a0ebf66fb4d25f49b4907129dc9" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">Home</span>
    </div>
    <div class="navbar-collapse collapse" id="c651965884bf4a0ebf66fb4d25f49b4907129dc9">
      <li class="dropdown">
        <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Orders
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="/orders">List orders</a>
          </li>
          <li>
            <a href="/orders/new">New order</a>
          </li>
        </ul>
      </li>
      <li>
        <a href="/payments">Wallet</a>
      </li>
      <li>
        <a href="/logout">Logout</a>
      </li>
      <p class="navbar-text">{{ current_user.username }}</p>
    </div>
  </div>
</nav>

动态生成的导航栏的结果并不令人满意： 动态的

虽然我期待这个： 静止的

差异的原因是什么？我应该去定制渲染器吗？

4

0 回答 0