在Quarto自定义页面布局下同时显示导航栏与侧边栏的方法

使用Quarto搭建网站时，设置page-layout: custom实现页面全屏显示，但希望同时保留顶部导航栏与侧边栏。移除page-layout: custom时侧边栏可正常显示，当前配置如下：

_quarto.yml 配置

project:
  type: website

website:
  title: "my website"
  navbar:
    background: primary
    search: true
    left:
      - text: "Home"
        file: index.qmd
      - sidebar:Title1
      - sidebar:Title2

  sidebar:      
    - id: Title1
      title: "Title 1"
      style: "docked"
      background: light
      contents:
        - page1.qmd
        - page1.qmd
        
    - id: Title2
      title: "Title 2"
      style: "docked"
      background: light
      contents:
        - page3.qmd
        - page4.qmd


format:
  html:
    theme: lux
    css: styles.css
    toc: true
    page-layout: custom

styles.css 内容

.page-layout-custom {
    margin-left: 2%;
    margin-right: 2%;
}

需要添加什么配置才能在自定义布局下显示侧边栏？

设置page-layout: custom后，Quarto会禁用默认的侧边栏布局容器，需通过CSS调整布局结构，确保侧边栏正常显示：

1. 修改styles.css，适配侧边栏布局
   更新CSS文件，为页面容器预留侧边栏空间，并强制显示dock类型的侧边栏：

   .page-layout-custom {
     margin-left: 280px; /* 预留侧边栏宽度，可按需调整 */
     margin-right: 2%;
     padding-top: 2rem;
   }
   
   /* 确保dock侧边栏显示并固定位置 */
   .sidebar.docked {
     display: block;
     position: fixed;
     left: 0;
     top: 56px; /* 对应顶部导航栏高度 */
     width: 260px; /* 侧边栏宽度，与上方margin-left差值匹配 */
     height: calc(100vh - 56px);
     overflow-y: auto;
   }
   
   /* 小屏幕适配，避免布局挤压 */
   @media (max-width: 992px) {
     .page-layout-custom {
       margin-left: 2%;
     }
     .sidebar.docked {
       position: relative;
       top: auto;
       width: 100%;
       height: auto;
     }
   }
   

2. 保留侧边栏的docked配置
   确保sidebar配置中的style: "docked"未被修改，该属性是侧边栏固定显示的核心设置。

3. 可选：适配页面Toc（若启用）
   如果页面开启了toc: true，可补充以下CSS调整Toc位置：

   .toc-container {
     margin-left: 0;
   }
   

修改完成后重新渲染网站，即可同时实现自定义全屏布局、顶部导航栏和侧边栏的显示。

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