如何使用自定义页面布局在四开中同时拥有侧边栏和导航栏

Question

我正在使用自定义页面布局在四开中创建一个网站（以便页面始终全屏），但我仍然希望拥有顶部导航栏和侧边栏。

我现在的

_quart.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

它确实有效

Answer 1

不幸的是，这在四开本文档中并不直观，但查看他们的网站源代码帮助我弄清楚了这一点。下面是一个最小的例子，可以帮助您获得您想要的东西。

index.qmd

---
title: Home
---

Welcome to my website.

blog.qmd

---
title: Blog Home
---

Welcome to my blog landing page.

2024_posts/april_01.qmd

---
title: Blog Post
---
Here is my first post.

这是重要的部分：在您定义特定页面侧边栏的

_quarto.qml

文件中请参阅侧边栏文档，您必须在侧边栏内容中包含父页面。

_quarto.yml

project:
  type: website

website:
  navbar:
    left:
      - index.qmd
      - blog.qmd

  sidebar:
    - id: blog
      collapse-level: 2
      contents:
        - blog.qmd
        - section: "2024"
          contents: 2024_posts/*