卡片

通过一组卡片更动态地展示信息——可带或不带图片

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

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

卡片示例

将鼠标悬停在卡片上并打开其 选项菜单 The Options menu icon in GitBook。你可以在这里添加目标链接,这样用户点击卡片时就能直接跳转到某个位置。

circle-check

添加图片

将鼠标悬停在卡片上并打开其 选项菜单 The Options menu icon in GitBook。你可以在这里为卡片添加封面图片。或者,也可以直接点击卡片上的 添加封面图片 选项。

这将打开 选择文件 弹窗。在这里,你可以将新图片拖放到其中,或者使用你之前上传到空间中的图片文件。

为深色模式添加图片

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

为此,请打开卡片的 选项菜单 并选择 封面 > 编辑封面 > 为深色模式添加封面。这将打开 选择文件 弹窗,你可以将新图片拖放到其中,或选择之前上传的图片。

选择合适的图片尺寸

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

A GitBook screenshot showing card images on desktop
在桌面端,所有卡片图片都会以横向 16:9 比例显示,不受其尺寸影响。为保持一致性,我们建议使用相同的尺寸。
A GitBook screenshot showing card images on mobile
在移动端,方形或竖向图片将按左侧所示显示。横向图片将按右侧所示显示。

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

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

更改卡片大小

你可以通过打开 选项菜单 The Options menu icon in GitBook 位于卡片块左侧的菜单来选择卡片大小。 中等 选项会在一条水平线上创建三张卡片,而 大型 选项则会在每一行显示两张更大的卡片。

circle-info

你可以让卡片块 占满窗口的整个宽度 ,方法是点击块旁边的 选项菜单 The Options menu icon in GitBook 并选择 全宽.

在 Markdown 中的表示

最后更新于

这有帮助吗?