页面布局

概述

Quarto 为 HTML 页面提供了一个默认布局，适用于许多文档。然而，如果默认布局不适用于你的内容，你可以进行调整。

在本页中，了解：

页面的三种高级布局选项，详见页面布局。
如何调整各个布局组件（侧边栏、主体、边距和间距）的宽度以适应你的内容，详见网格定制。

页面布局

默认情况下，Quarto HTML 文档的内容居中显示，宽度优化以适合阅读（通常为 600px 到 900px 宽）。虽然这对于传统文章来说是一个合理的默认布局，但对于其他类型的页面（例如登陆页或索引页），你可能希望使用其他布局。

可以使用 page-layout 选项来控制所使用的布局。例如：

format: 
  html:
    page-layout: full

以下是各种 page-layout 选项的描述。

文章

page-layout: article

文章布局提供了一个基于页面的网格布局的内容区域，包括边距、侧边栏区域和优化阅读宽度的主体区域。文档区域的精确尺寸会因侧边栏（如果有）以及边距或复杂布局元素的存在与否而略有不同。要了解更多信息，请查看文章布局指南。

全屏

page-layout: full

全屏布局使用文章网格系统，但如果这些区域内没有放置内容，则会自动扩展内容区域以使用侧边栏和边距区域。这对于不需要限制为阅读宽度并且可以从额外水平空间中受益的布局（例如登陆页或索引页）很有用。

自定义

page-layout: custom

自定义布局提供了一个没有默认网格系统、填充或边距的简单 HTML 内容容器。默认的 HTML 框架将如下所示：

<div class="page-layout-custom">
  <!-- 此处为内容 -->
</div>

在网站中，自定义布局不包括导航侧边栏，但包括网站导航栏和页脚。

CSS 网格

如果你使用 page-layout: custom，你可能希望利用 Bootstrap CSS 网格布局系统（Quarto 文档中默认可用）来创建更复杂的布局。

例如，这是一个简单的两列网格：

::: {.grid}

::: {.g-col-4}
此列占据页面的 1/3
:::

::: {.g-col-8}
此列占据页面的 2/3
:::

:::

Bootstrap 的 CSS 网格系统包括响应性、换行、嵌套和细粒度定制列行为的设施。

请注意，这不是旧版本 Bootstrap 中使用的传统 Bootstrap 网格——相反，它是基于 CSS 网格标准在 Bootstrap 5.1 中引入的一个全新的布局系统。Quarto 使用这个较新的系统，因为它具有更复杂的布局能力，类似于 LaTeX 为印刷文档提供的能力。

有关更多详细信息，请参阅 Bootstrap CSS 网格文档。

网格定制

人工智能与机器学习

概述

人工智能（AI）和机器学习（ML）是当今科技领域最热门的话题之一。AI是指计算机系统能够执行通常需要人类智能的任务，如视觉识别、语音识别和决策制定。ML是AI的一个子集，专注于开发能够从数据中学习的算法。

关键技术

深度学习

深度学习是ML的一个分支，使用多层神经网络来模拟人脑的工作方式。它在图像和语音识别等领域取得了显著的成功。

强化学习

强化学习是一种通过试错来学习的ML方法。它通常用于游戏和机器人控制等领域。

应用

医疗保健

AI和ML在医疗保健领域有广泛的应用，包括疾病诊断、药物发现和个性化治疗。

金融

在金融领域，AI和ML用于风险管理、欺诈检测和投资策略优化。

挑战

数据隐私

随着AI和ML的发展，数据隐私成为一个重要问题。如何在利用数据的同时保护个人隐私是一个亟待解决的挑战。

伦理问题

AI和ML的决策过程往往不透明，这引发了关于算法偏见和伦理责任的讨论。

未来展望

AI和ML的未来充满希望，但也伴随着挑战。随着技术的进步，我们有望看到更多创新应用的出现，但同时也需要解决随之而来的伦理和社会问题。

你可以使用 YAML 选项和 SCSS 控制 HTML 文档中布局组件的宽度。例如，如果侧边栏中的长条目被换行，增加侧边栏的宽度可能是合理的：

Quarto 网站的屏幕截图，显示更改后的布局，侧边栏占据更多空间。 — 更宽的侧边栏

可以通过将 grid 选项添加到 _quarto.yml 文件中，增加 sidebar-width 从默认的 250px 来实现此更改：

_quarto.yml

format:
  html:
    grid:
      sidebar-width: 350px

有四个变量控制布局的四个组件：侧边栏、主体、边距和间距。

本节的其余部分描述了这些组件及其默认值，以及如何使用 YAML 或 SCSS 变量进行定制。你还可以在更多示例中找到实际操作中的定制示例。

HTML 页面布局

Quarto HTML 文档以左侧侧边栏、文档主体、右侧边距和这些元素之间的空间（称为间距）组成的结构排列。如下所示：

Quarto 文档网站页面的屏幕截图，周围绘制了矩形框表示侧边栏、主体和边距，箭头指示它们之间的间距。这四个组件的宽度由四个变量控制。这些变量及其默认值如下：

布局组件的默认宽度值
元素	大小
`sidebar-width`	250px
`body-width`	800px
`margin-width`	250px
`gutter-width`	1.5em

这些变量的值并不直接指定相应组件的显示宽度，而是指定一个最大基准值。最大值会缩放以创建最小值，它们共同用于计算不同布局类型（固定与浮动）、响应式大小（大屏幕与移动设备尺寸）以及页面内容（有边距与无边距内容）下每个组件的大小和位置。

自定义组件宽度

你可以使用 YAML 或 SCSS 变量来控制组件宽度变量。要在 YAML 中设置这些选项，可以使用 grid 选项：

_quarto.yml

format:
  html: 
    grid:
      sidebar-width: 300px
      body-width: 900px
      margin-width: 300px
      gutter-width: 1.5rem

网站与独立 HTML 页面

使用 YAML 自定义作为 Quarto 网站一部分的页面布局时，应在 _quarto.yml 的站点级别进行设置。对于不属于网站的 HTML 文档，这些选项也可以在文档顶部的 YAML 中设置。

同样，在自定义主题 scss 文件中，你可以设置如下变量：

// 左侧边栏
$grid-sidebar-width: 300px !default;

// 主体部分
$grid-body-width: 900px !default;

// 右侧边距栏
$grid-margin-width: 300px !default;

// 上述列之间的间距
$grid-column-gutter-width: 1.5rem !default;

sidebar-width、body-width 和 margin-width 应以像素 (px) 为单位指定，因为这些值在计算其他尺寸时会被使用。要求以像素为单位是我们对 Quarto 布局方法的限制，但通常也是有意义的，因为整个文档宽度通常与浏览器尺寸和响应式断点相关，而不是与字体大小或其他相对度量相关。

gutter-width 可以以像素或其他单位（如 em 或 rem）指定，这些单位会随文档字体大小而响应变化。