> For the complete documentation index, see [llms.txt](https://gitbook.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://gitbook.com/docs/documentation/zh/chuang-jian-nei-rong/blocks/cards.md).

# 卡片

你可以使用卡片，以网格形式将文本和图片结合起来，创建一个视觉上赏心悦目的页面布局。它们非常适合构建落地页或以非线性的方式展示任何其他内容。

你可以调整 [在中等卡片或大卡片之间切换](#changing-the-size-of-cards) 并将它们链接到相关资源。

### 卡片示例

<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="image">封面图</th><th data-hidden data-type="image">封面图（深色）</th><th data-hidden data-type="image">封面图（深色）</th><th data-hidden data-card-cover-dark data-type="image">封面图（深色）</th></tr></thead><tbody><tr><td><strong>GitBook 主页</strong></td><td>访问我们的网站，了解更多关于 GitBook 的信息。</td><td><a href="https://www.gitbook.com/">https://www.gitbook.com/</a></td><td><a href="/files/a6021be8434dc0c1095ab16e1c6fe33420245627">/files/a6021be8434dc0c1095ab16e1c6fe33420245627</a></td><td><a href="/files/68c23f2f83d6e42aab018b1e0e5b64e28ca1c3bb">/files/68c23f2f83d6e42aab018b1e0e5b64e28ca1c3bb</a></td><td></td><td><a href="/files/68c23f2f83d6e42aab018b1e0e5b64e28ca1c3bb">/files/68c23f2f83d6e42aab018b1e0e5b64e28ca1c3bb</a></td></tr><tr><td><strong>开发者文档</strong></td><td>构建你自己的 GitBook 集成。</td><td><a href="https://developer.gitbook.com/">https://developer.gitbook.com/</a></td><td><a href="/files/4e1ac27986d3a0d698936498621160c5da78b9cb">/files/4e1ac27986d3a0d698936498621160c5da78b9cb</a></td><td></td><td><a href="/files/6f27471f47013917cf9950f8038f9a65c9b81370">/files/6f27471f47013917cf9950f8038f9a65c9b81370</a></td><td><a href="/files/6f27471f47013917cf9950f8038f9a65c9b81370">/files/6f27471f47013917cf9950f8038f9a65c9b81370</a></td></tr><tr><td><strong>注册 GitBook</strong></td><td>点击此处免费开始。</td><td><a href="https://app.gitbook.com/join">https://app.gitbook.com/join</a></td><td><a href="/files/8d21dbf500173ebc03c5b7d6d5d16c2c4e2bf0e2">/files/8d21dbf500173ebc03c5b7d6d5d16c2c4e2bf0e2</a></td><td></td><td></td><td><a href="/files/aef61fd9bf8c828ade96577bfc9dd8bbbf211332">/files/aef61fd9bf8c828ade96577bfc9dd8bbbf211332</a></td></tr></tbody></table>

### 添加链接 <a href="#adding-links-and-images-to-your-cards" id="adding-links-and-images-to-your-cards"></a>

将鼠标悬停在卡片上并打开其 **选项菜单** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="/files/e1df373962dc4830bcb786d7e5cb3cce603367d3" alt="The Options menu icon in GitBook"></picture>。在这里你可以添加目标链接，这样读者点击卡片时就能直接跳转到某个位置。

{% hint style="success" %}
创建卡片时，我们建议你使用 **目标链接而不是超链接**。使用目标链接时，读者可以点击卡片上的任意位置来访问链接的 URL。
{% endhint %}

### 添加图片

将鼠标悬停在卡片上并打开其 **选项菜单** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="/files/e1df373962dc4830bcb786d7e5cb3cce603367d3" alt="The Options menu icon in GitBook"></picture>。在这里你可以为卡片添加封面图片。或者，直接点击 **添加封面图片** 选项。

这将打开 **选择文件** 模态窗口。在这里你可以拖放一张新图片，或者使用你之前上传到该部分的图片文件。

#### 为深色模式添加图片

你也可以添加仅在深色模式下显示的封面图片。

为此，请打开卡片的 **选项菜单** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="/files/e1df373962dc4830bcb786d7e5cb3cce603367d3" alt=""></picture> 并选择 **封面** > **编辑封面** > **为深色模式添加封面**。这将打开 **选择文件** 模态窗口，你可以在其中拖放一张新图片或选择一张之前上传的图片。

#### 选择合适的图片尺寸

GitBook 会在桌面端和移动端自动将横向图片裁剪为 16:9 比例。如果你上传的图片是竖向的或为 1:1 比例，它们在桌面端会被裁剪为 16:9，在移动端则显示为正方形或竖向。

<figure><img src="/files/337433e1d7852d225db4206957c80896e142972c" alt="A GitBook screenshot showing card images on desktop"><figcaption><p>在桌面端，所有卡片图片都将以横向 16:9 比例显示，无论其尺寸如何。为了保持一致性，我们建议使用相同的尺寸。</p></figcaption></figure>

<figure><img src="/files/d5d15fea9b91d3b042535e3b83f67879a643ef5a" alt="A GitBook screenshot showing card images on mobile"><figcaption><p>在移动端，正方形或竖向图片会按左侧所示显示。横向图片会按右侧所示显示。</p></figcaption></figure>

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

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

### 更改卡片大小

你可以通过打开 **选项菜单** <picture><source srcset="/files/QLUQj6waZRiK6FpSqrt6" media="(prefers-color-scheme: dark)"><img src="/files/e1df373962dc4830bcb786d7e5cb3cce603367d3" alt="The Options menu icon in GitBook"></picture> 位于卡片块左侧的 **中等** 选项会在一行中创建三个卡片，而 **大** 选项会在每一行显示两个更大的卡片。

### Markdown 中的表示

```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>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://gitbook.com/docs/documentation/zh/chuang-jian-nei-rong/blocks/cards.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.