链接网格
Link Grid 是一种将卡片的视觉吸引力与可点击项的功能性相结合的元素。
它非常适用于突出重要信息或展示相关资源。
何时使用它
突出关键信息
为重要公告或更新创建醒目的卡片。
展示相关内容 链接到其他资源、文章或产品。
创建视觉上吸引人的目录
将信息组织成可点击的卡片，以方便导航。
提升用户体验 提供一种清晰且互动的方式，引导用户浏览您的内容。
如何创建 Link Grid
输入/以打开Archbee Block菜单
搜索链接网格并点击以插入
选择您想要的创建方式。
手动与自动填充 Link Grid 的区别
当您继续在 Link Grid 中手动编写内容时，下一步是：
纯色标题
您可以使用颜色作为标题，使您的卡片更加醒目。您甚至可以使用代码颜色来匹配您的功能。
点击 Header 类型
下拉按钮并选择 颜色
点击 更改颜色并选择您偏好的颜色。所做的任何更改都会自动保存。
图像标题
您可以使用图像作为标题来描述卡片内部的内容，并使其更具美观性。
点击 Header 类型 下拉按钮并选择 图像
点击 添加图像 按钮
选择您的图像。所做的任何更改都会自动保存。
布局选项
每行的项目数 - 控制每行显示多少项目：
- 每行 3 个项目
- 每行 2 个项目
- 每行 1 个项目
图像指南
为确保您的内容正确显示，我们建议创建一张高度为 480px、宽度为 1324px的图片。按照下面的可视区域指南，您可以确保内容不会被裁剪。
可视区域指南
主图像的尺寸为高 480px、宽 1324px。
当每行有3 个 Link Grid时，可视区域将为480px的高度和860px 的宽度。此可视区域将居中显示在主图尺寸内。 请参考下方图像以获得可视化展示：
为进一步说明，主要内容或标志应放置在该指定区域内。
请在下方查看封面图像及其行为的实时演示。
Markdown
以下展示如何使用 markdown 代码在文档中创建一个标签页：
创建 Link Grid 从 ::::link-array 行开始。
添加一个 link card 每个 Link Grid 内容都放在 :::link-array-item 和 ::: 标记之间。
选择 headerType 您有两种标题选项：
- 图像: 使用图像作为标题背景。
- 颜色: 使用纯色作为标题。
添加相应的属性
对于 图像 标题：
- 在 headerImage 属性中填写图像 URL。
- 示例： headerImage="https://placehold.co/600x400")
对于 颜色 标题：
- 使用 hex 颜色代码定义 headerColor 属性。
- 示例： headerColor="#ff00FF"
在 link card 内添加内容。
🚨 注意！
当使用三冒号（:::）语法创建嵌套 markdown 元素时，确保其上层的每个父元素在其开头的三冒号前也多加一个冒号（:）。
## Link Array - Example
::::link-array
:::link-array-item{headerType="IMAGE" headerImage="https://placehold.co/600x400"}
- list item 1
- list item 2
:::
:::link-array-item{headerType="COLOR" headerColor="#ff00FF"}
- [ ] unchecked list box
- [x] checked list box
:::
::::以下是结果：
- list item 1
- list item 2
unchecked list box
checked list box
查看 使用 Markdown 快捷方式 页面，查看更多其它区块的 markdown 快捷方式。
示例
示例？用于 Link Grid？就像在海洋里找水一样根本避不开。本页有 8 个示例，加上图片，可谓比比皆是。
自定义 CSS
凭借我们长期的丰富经验，我们一直致力于帮助客户根据其独特偏好自定义其文档。此外，我们提供了宝贵的协助，我们相信这也将对您打造卓越的产品文档大有裨益。
将链接设置为固定在底部
将 Link Grid 内的链接设置为固定在卡片底部。
<style>
.ab-link-block-content-wrap .ab-link {
position: absolute;
bottom: 0;
}
</style>
需要帮助？⬇️
使用右下角的蓝色 聊天气泡。
或者尝试来自搜索框的AI 聊天以快速获得答案。
您的意见很重要
请使用下面的反馈表单，匿名提交。
或在问答区提问，我们的团队或 AI 将为您提供解决方案。