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

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

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

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

    project:
      type: website
      output-dir: docs
      
    website:
      title: "Saïd Maanan"
      page-footer: 
        left: "Copyright © 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
    

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

    enter image description here

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

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

    1 回复  |  直到 5 月前
        1
  •  1
  •   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文档上)。

    enter image description here