如何调整Quarto书籍输出格式的主体内容宽度？

要实现你需要的布局比例（侧边栏15%、主体内容80%、目录5%），可以通过自定义CSS覆盖Quarto的默认样式，具体步骤如下：

1. 创建自定义CSS文件 #

在项目根目录新建一个名为custom-layout.css的文件，写入以下样式代码：

/* 设置侧边栏宽度为15% */
.book-sidebar {
  width: 15% !important;
}

/* 调整主体内容宽度为80%，左侧对齐侧边栏，右侧预留目录空间 */
#quarto-document-content {
  width: 80% !important;
  margin-left: 15% !important;
  margin-right: 5% !important;
}

/* 将目录固定到屏幕右侧，宽度设为5% */
.book-toc {
  position: fixed !important;
  right: 0;
  top: 0;
  width: 5% !important;
  height: 100vh;
  overflow-y: auto;
  border-left: 1px solid #eee;
  padding: 1rem 0.5rem;
}

/* 小屏幕适配，避免布局错乱 */
@media (max-width: 768px) {
  .book-sidebar, #quarto-document-content, .book-toc {
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
    height: auto;
  }
}

2. 在Quarto配置文件中引用CSS #

打开项目根目录的_quarto.yml，在book配置项里添加css字段，指定刚才创建的CSS文件：

book:
  title: "你的书籍标题"
  author: "作者名"
  # 保留其他已有配置
  css: custom-layout.css

3. 重新渲染书籍 #

执行渲染命令（如quarto render），新的布局即可生效。

关键说明 #

• 使用!important是为了强制覆盖Quarto的默认样式优先级；
• 目录设置为position: fixed会让它固定在屏幕右侧，不随页面滚动而移动；
• 媒体查询部分是为了在手机等小屏幕设备上自动恢复默认流式布局，保证可读性。

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