如何用_brand.yml修改Quarto导航栏颜色并解决双导航栏问题

一、双导航栏成因与解决 #

出现双导航栏是因为你同时启用了独立网站导航栏（navbar）和页面标题横幅（title-block-banner），两者在顶部叠加显示。只需整合配置，保留一个导航载体即可：

1. 调整主配置文件 _quarto.yml #

将网站标题整合到导航栏的品牌位置，避免单独的标题横幅：

website:
  title: "Saïd Maanan"
  page-footer: 
    left: "Copyright © 2023-2025 Saïd Maanan"
    right: "This website is built with Quarto."
  page-navigation: true
  back-to-top-navigation: true
  navbar:
    search: false
    brand: "Saïd Maanan"  # 将标题放入导航栏品牌位
    left:
      - href: index.qmd
        text: "About Me"
        icon: file-earmark-person
      - href: research.qmd
        text: "Research"
        icon: pc-display-horizontal
      - href: publications.qmd
        text: "Publications"
        icon: file-earmark-pdf
      - href: teaching/teaching.qmd
        text: "Teaching"
        icon: person-video3
      - href: blog.qmd
        text: "Blog"
        icon: pencil-square
  cookie-consent: true

2. 修改品牌配置文件 _brand.yml #

关闭独立的页面标题栏，避免重复：

defaults:
  quarto:
    format:
      html:
        title-block: false  # 禁用单独的页面标题横幅
        # 移除原有的 title-block-banner 相关配置

二、设置导航栏白绿配色 #

通过两种方式实现和原标题栏一致的绿底白字效果：

方式1：通过品牌配置的Bootstrap变量 #

在 _brand.yml 的 bootstrap 节点添加导航栏样式变量：

defaults:
  bootstrap:
    navbar-bg: "#595F39"        # 导航栏背景色（你的绿色）
    navbar-color: "#E4E4DE"     # 导航栏文字颜色（你的白色）
    navbar-hover-color: "#FFFFFF"  # 悬停时文字颜色
    navbar-active-color: "#FFFFFF" # 当前页面链接颜色
  quarto:
    format:
      html:
        title-block: false

方式2：通过自定义CSS（styles.css） #

如果Bootstrap变量不生效，直接编写CSS覆盖样式：

/* 导航栏整体背景 */
.navbar {
  background-color: #595F39 !important;
}

/* 导航栏标题颜色 */
.navbar-brand {
  color: #E4E4DE !important;
}

/* 导航栏链接默认颜色 */
.nav-link {
  color: #E4E4DE !important;
}

/* 链接悬停/活跃状态颜色 */
.nav-link:hover, .nav-link.active {
  color: #FFFFFF !important;
}

三、验证生效 #

修改完成后重新渲染网站：

quarto render

此时网站会显示单个导航栏，配色为绿底白字，和原标题栏样式完全匹配。

内容的提问来源于stack exchange，提问作者Saïd Maanan