卡片

使用一组卡片以更动态的方式显示信息——可以带图像也可以不带图像

您可以使用卡片来创建视觉上令人愉悦的页面布局，在网格中组合文本和图像。它们非常适合构建着陆页或以非线性方式展示其他任何内容。

您可以调整 在中等或大型卡片之间切换 并将它们链接到相关资源。

卡片示例

GitBook 主页

访问我们的网站并了解有关 GitBook 的更多信息。

开发者文档

构建您自己的 GitBook 集成！

注册 GitBook

点击此处开始免费使用。

添加链接

将鼠标悬停在卡片上并打开其 选项菜单 。在这里您可以添加目标链接，这样用户单击卡片时就可以直接跳转到某个位置。

在创建卡片时，我们建议您使用 目标链接而不是超链接。使用目标链接，读者可以点击卡片上的任何位置来访问所链接的 URL。

添加图像

将鼠标悬停在卡片上并打开其 选项菜单 。在这里您可以向卡片添加封面图像。或者，只需点击卡片本身的 添加封面图像 选项。

这将打开 选择文件 模态窗口。在这里您可以将新图像拖放到此处，或使用您之前上传到空间的图像文件。

为暗色模式添加图像

您还可以添加仅在暗色模式下显示的封面图像。

为此，请打开卡片的 选项菜单 并选择 封面 > 编辑封面 > 为暗色模式添加封面。这将打开 选择文件 模态窗口，您可以在其中拖放新图像或选择先前上传的图像。

选择合适的图像尺寸

GitBook 会在桌面和移动端自动将横向图像裁剪为 16:9 比例。如果您上传的图像为纵向或 1:1 比例，则在桌面上会被裁剪为 16:9，并在移动端显示为方形或纵向。

在桌面端，所有卡片图像将以横向 16:9 比例显示，无论其尺寸如何。我们建议使用相同尺寸以保持一致性。

在移动端，方形或纵向图像将如左图所示显示。横向图像将如右图所示显示。

为了在桌面和移动端保持一致，我们建议为卡片上传 16:9 格式的所有图像（例如 1920px x 1080px）。

如果您希望卡片根据屏幕尺寸自适应布局，我们建议上传 1:1 比例的图像，并将图像内容居中。

更改卡片大小

您可以通过打开位于卡片块左侧的 选项菜单 来选择卡片大小。该 中等 选项会在一行中创建三个卡片，而 大 选项则在每行显示两个较大的卡片。

您可以使卡片块 跨越窗口的全宽 方法是点击块旁边的 选项菜单 并选择 全宽.

在 Markdown 中的表示

<table data-view="cards">
  <thead>
    <tr>
      <th></th>
      <th></th>
      <th data-hidden data-card-target data-type="content-ref"></th>
      <th data-hidden data-card-cover data-type="files"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><strong>示例标题 1</strong></td>
      <td>示例描述 1。</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image1.svg">example_image1.svg</a></td>
    </tr>
    <tr>
      <td><strong>示例标题 2</strong></td>
      <td>示例描述 2。</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image2.svg">example_image2.svg</a></td>
    </tr>
    <tr>
      <td><strong>示例标题 3</strong></td>
      <td>示例描述 3。</td>
      <td><a href="https://example.com">https://example.com</a></td>
      <td><a href="https://example.com/image3.svg">example_image3.svg</a></td>
    </tr>
  </tbody>
</table>