Quarto教程：如何调整标题块与目录的自定义布局？

问题1：自定义标题块（Title Block）和目录（TOC）的布局 #

Quarto默认不支持直接给标题块和目录添加布局类（如.column-page-left），需要通过自定义CSS覆盖默认样式，实现和其他内容一致的page-left对齐：

在你的.qmd文档中添加以下CSS代码块：

<style>
/* 统一标题块的page-left布局 */
.quarto-title-block {
  max-width: var(--page-width);
  margin-left: var(--page-left-margin);
  margin-right: auto;
}

/* 统一body中目录的page-left布局 */
.toc {
  max-width: var(--page-width);
  margin-left: var(--page-left-margin);
  margin-right: auto;
}
</style>

上述代码使用Quarto内置的CSS变量（--page-width、--page-left-margin），和.column-page-left类的样式逻辑完全一致，确保布局统一。

问题2：全局设置page-left布局，再调整单个溢出元素 #

可以先给整个文档应用page-left布局，再针对需要溢出展示的元素单独修改：

步骤1：全局启用page-left布局 #

添加以下CSS代码，把整个内容容器设置为page-left对齐：

<style>
/* 全局内容容器设为page-left布局 */
.content-container {
  max-width: var(--page-width);
  margin-left: var(--page-left-margin);
  margin-right: auto;
}
</style>

步骤2：调整单个溢出元素 #

如果某个元素（比如宽表格、高清图片）需要使用screen-inset布局，直接给该元素的容器添加.column-screen-inset类即可，这个类会自动覆盖全局样式：

::: {.column-screen-inset}
```{python}
# 这里放置需要全屏/宽屏展示的内容
large_df = pd.DataFrame({'col1': range(10), 'col2': range(10), 'col3': range(10), 'col4': range(10), 'col5': range(10)})
Markdown(large_df.to_markdown())

:::

## 修改后的完整示例.qmd
```yaml
---
title: 'Quarto Test Document'
title-block-banner: false
description: 'A Quarto Document for Test Purposes'
abstract: 'This title block is now `page-left` aligned' 
date: today
date-format: 'DD.MM.YYYY'
toc: true
toc-title: Table of Contents (now `page-left` aligned)
toc-expand: true
toc-location: body
number-sections: true
format: 
    html:
        theme: default
        title-block-style: default
        embed-resources: true
        page-layout: article
        smooth-scroll: true
execute: 
  echo: false
  enable: true 
jupyter: python3
---

<style>
/* 统一标题块和目录的page-left布局 */
.quarto-title-block {
  max-width: var(--page-width);
  margin-left: var(--page-left-margin);
  margin-right: auto;
}

.toc {
  max-width: var(--page-width);
  margin-left: var(--page-left-margin);
  margin-right: auto;
}

/* 全局内容容器设为page-left布局（可选，若需要全局统一） */
.content-container {
  max-width: var(--page-width);
  margin-left: var(--page-left-margin);
  margin-right: auto;
}
</style>

## First Section

This section is `page-left` aligned (now matches title block and TOC).

```{python}
#| label: tbl-test_table
#| tbl-cap: 'This table is `page-left` aligned'
import pandas as pd
from IPython.display import Markdown

data_dict = {'a': range(0,5), 'b': range(5,10)}
df = pd.DataFrame(data_dict)

Markdown(df.to_markdown())

宽表格示例（使用screen-inset布局） #

::: {.column-screen-inset}

#| label: tbl-wide_table
#| tbl-cap: 'This wide table uses `screen-inset` layout'
large_data = {f'col{i}': range(10) for i in range(1,8)}
wide_df = pd.DataFrame(large_data)
Markdown(wide_df.to_markdown())

:::

References (the reference list is page-left aligned) {#refs} #

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