Flask使用flask_navbar生成动态导航栏样式不一致问题咨询

样式差异的核心原因 #

• Bootstrap版本不匹配：flask_navbar默认渲染的是Bootstrap 3版本的导航栏结构和类名，你原有静态导航栏使用的是Bootstrap 4/5版本的规范：
  • 生成的<nav>默认带navbar-default（BS3专属类），缺少你需要的navbar-expand-sm navbar-light bg-light类
  • 折叠按钮使用的是BS3的navbar-toggle、icon-bar类，而非BS4+的navbar-toggler、navbar-toggler-icon类
• HTML结构缺失必要类和包裹层：
  • 所有导航项没有被<ul class="navbar-nav">标签包裹
  • 导航项<li>标签缺少nav-item类，链接<a>标签缺少nav-link类
  • 首页品牌默认渲染为<span>标签，而非你需要的带跳转的<a>标签
  • 用户名文本默认渲染为<p class="navbar-text">，而非你需要的<li class="nav-item">包裹结构
  • 下拉菜单默认渲染为<ul class="dropdown-menu">结构，你原有静态代码用的是<div class="dropdown-menu">
• 另外你初始化代码里Wallet的跳转路径写的是/wallet，和原有静态代码的/payments不一致，也会导致跳转异常。

解决方式 #

你需要自定义渲染器来适配你的Bootstrap版本和自定义结构，参考实现如下：

1. 继承flask_navbar提供的基础Renderer类，重写对应元素的渲染逻辑：

from flask_nav.renderers import Renderer
from flask_nav.elements import Navbar, Link, Subgroup, Text

class Bootstrap4NavbarRenderer(Renderer):
    def visit_Navbar(self, node):
        # 自定义nav根标签、品牌链接、折叠按钮结构
        res = [
            '<nav class="navbar navbar-expand-sm navbar-light bg-light">',
            f'<a class="navbar-brand" href="/">{node.title}</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">'
        ]
        # 遍历渲染所有子导航项
        for item in node.items:
            res.append(self.visit(item))
        res.append('</ul></div></nav>')
        return '\n'.join(res)

    def visit_Link(self, node):
        # 普通链接项添加必要类
        return f'<li class="nav-item"><a class="nav-link" href="{node.url}">{node.text}</a></li>'

    def visit_Subgroup(self, node):
        # 下拉菜单结构适配BS4规范
        res = [
            '<li class="nav-item dropdown">',
            f'<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">{node.title}</a>',
            '<div class="dropdown-menu">'
        ]
        for item in node.items:
            res.append(f'<a class="dropdown-item" href="{item.url}">{item.text}</a>')
        res.append('</div></li>')
        return '\n'.join(res)

    def visit_Text(self, node):
        # 用户名文本适配结构
        return f'<li class="nav-item">{node.text}</li>'

2. 在模板渲染导航栏时指定自定义渲染器即可：

{{ nav.top.render(renderer=Bootstrap4NavbarRenderer) }}

内容的提问来源于stack exchange，提问作者Ralfeus