使用flask_nav实现Flask导航栏时左置菜单与修改文字颜色问题

问题1：新增"Connect"菜单放置在导航栏左侧 #

• 操作逻辑：flask-nav的Navbar构造参数中，品牌名（第一个参数）后传入的所有导航项默认渲染在导航栏左侧，你只需新增对应路由后，将"Connect"的导航项插入到对应位置即可。
• 代码修改示例：
  1. 先新增Connect页面对应的路由（如果还没写的话）：

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

  2. 修改Navbar定义，插入Connect菜单项：

  menus = Navbar("Menu", 
                  # 放在最前面就是导航栏最左侧的菜单项
                  View('Connect', 'connect'),
                  View('Accueil', 'accueil'),
                  View('A propos', 'apropos'),
                  )
  

问题2：修改导航栏文字颜色 #

• 该操作可以实现，之前修改不生效是因为Bootstrap默认给导航栏的品牌文字、菜单链接设置了优先级更高的专属样式，你需要覆盖对应选择器的样式即可。
• 代码修改示例，在原有<style>标签中新增以下规则：

.navbar-default {
    background-color: #333131;
    border-color: #333131;
}
/* 导航栏左上角品牌文字颜色 */
.navbar-default .navbar-brand {
    color: #fff;
}
/* 普通菜单文字颜色 */
.navbar-default .navbar-nav > li > a {
    color: #fff;
}
/* 菜单悬浮、聚焦时的文字颜色 */
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #ccc;
    background-color: transparent;
}
/* 当前页面对应激活菜单的文字颜色 */
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: transparent;
}

你可以根据自己的需求调整颜色值即可。

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