卡片

使用一组卡片更动态地展示信息——可以带图片，也可以不带图片

您可以使用卡片来创建美观的页面布局，将文本和图片以网格形式组合在一起。它们非常适合构建落地页，或以非线性的方式展示任何其他内容。

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

卡片示例

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>