如何用_brand.yml修改bslib导航栏背景色并添加左上角Logo？

问题原因 #

bslib的_brand.yml预设文件默认不直接支持导航栏Logo的配置，且导航栏背景色需要通过Bootstrap Sass变量定义，而非自定义字段，这是配置未生效的核心原因。

解决方案步骤 #

1. 正确配置_brand.yml

在配置文件中定义Bootstrap导航栏背景色变量，并存储Logo路径用于统一调用：

# _brand.yml
vars:
  navbar-bg: "#6a0dad"  # 替换为你需要的紫色Hex值
brand:
  logo_path: "www/logo.png"  # 替换为实际Logo路径（建议放在Shiny的www目录下）

2. 在Shiny应用中加载配置并生效

需要加载yaml包读取配置文件，同时通过bs_theme应用样式变量，动态设置导航栏Logo：

library(shiny)
library(bslib)
library(yaml)

# 读取品牌配置文件
brand_config <- yaml.load_file("_brand.yml")

# 加载包含自定义变量的主题
custom_theme <- bs_theme(version = 5, preset = "_brand.yml")

ui <- page_navbar(
  # 左上角Logo：从配置文件读取路径，设置尺寸
  title = tags$img(src = brand_config$brand$logo_path, height = "40px"),
  # 应用自定义主题（自动生效导航栏背景色）
  theme = custom_theme,
  # 导航栏标签页
  tabPanel("首页"),
  tabPanel("数据可视化"),
  tabPanel("关于")
)

server <- function(input, output) {}

shinyApp(ui, server)

3. 关键注意事项

• Logo路径：确保Logo文件放在Shiny应用的www目录下，否则需要填写完整绝对路径。
• Bootstrap版本：示例使用Bootstrap 5，若使用其他版本，变量名可能略有差异（Bootstrap 4的导航栏背景色变量同样为$navbar-bg，无需修改）。
• 变量生效：vars字段下的配置会被bs_theme自动映射为Bootstrap Sass变量，无需额外在navbar_options中重复设置背景色。

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