代码之家 › 专栏 › 技术社区 › Saïd Maanan

如何使用brand.yml更改导航栏颜色?

quarto navbar html

Saïd Maanan · 技术社区 · 5 月前

我正在用Quarto写一个网站。我的 _quarto.yml 文件如下:

project:
  type: website
  output-dir: docs
  
website:
  title: "SaÃ¯d Maanan"
  page-footer: 
    left: "Copyright &copy; 2023-2025 SaÃ¯d Maanan"
    right: "This website is built with [Quarto](https://quarto.org/)."
  page-navigation: true
  back-to-top-navigation: true
  navbar:
    search: false
    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

format:
  html:
    theme: 
      light: flatly
      dark: darkly
    lang: en
    date-format: 'dddd MMMM YYYY'
    email-obfuscation: javascript
    link-external-newwindow: true
    css: styles.css
    toc: true
    page-layout: full

editor: source

lightbox: auto

我还使用以下内容 _brand.yml 将样式元素添加到我的网站的文件:

meta:
  name: "SaÃ¯d Maanan"
  link:
    home: https://smaanan.github.io
    github: https://github.com/smaanan
color:
  palette:
    green: "#595F39"
    black: "#1B1B1B"
    gray: "#58594A"
    white: "#E4E4DE"
  foreground: black
  background: white
  primary: green
  secondary: gray
typography:
  fonts:
    - family: Fjalla One
      source: google
    - family: Inter
      source: google
    - family: Space Mono
      source: google
  base:
    family: Inter
    line-height: 1.6
  headings:
    family: Fjalla One
    weight: 600
    color: green
  link:
    color: secondary
    weight: 500
  monospace:
    family: Space Mono
    size: 1em
defaults:
  bootstrap:
    # bootstrap variable definitions
  quarto:
    format:
      # basic format-specific settings
      html:
        title-block-banner: green
        title-block-banner-color: white
      revealjs:
  shiny:
    # shiny specific settings

渲染的网页错误地给出了两个菜单栏,而不是一个,如下图所示:

这不是我想要的结果,我想有一个菜单栏,但要像横幅一样用白色和绿色来设计。

如何实现这一目标并解决问题?

1 回复 | 直到 5 月前

Jan 5 月前

使用

html:
  title-block-banner: green
  title-block-banner-color: white

在 _brand.yml 激活a Title Banner 。这必须删除。

相反,你需要重写Sass变量,在这里 $navbar-bg .里面 _brand.yml ,添加

defaults:
  bootstrap:
    defaults:
      navbar-bg: green

(另见 defaults section 在brand.yml文档上)。