--- title: 链接网格 slug: docs/cn/Qm2SDZaC29pXRL8AFNWMg createdAt: 2024-07-24T07:41:15.178Z --- ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/7Swb-lpQWhWia7P0JwhzK-20260108-105119.png) Link Grid 是一种将卡片的视觉吸引力与可点击项的功能性相结合的元素。 它非常适用于**突出**重要信息或**展示**相关资源。 ## 何时使用它 ::::LinkArray{contentSource="CUSTOM" itemsPerRow="2"} :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-star"} **突出关键信息** 为重要公告或更新创建醒目的卡片。 ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-file-pen"} **展示相关内容** 链接到其他资源、文章或产品。 ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-folder-tree"} **创建视觉上吸引人的目录** 将信息组织成可点击的卡片，以方便导航。 ::: :::LinkArrayItem{headerType="NONE"} :FontAwesome[]{icon="fa-solid fa-arrow-pointer"} **提升用户体验** 提供一种清晰且互动的方式，引导用户浏览您的内容。 ::: :::: ## 如何创建 Link Grid ::::WorkflowBlock :::WorkflowBlockItem 输入`/`以打开**Archbee Block**菜单 ::: :::WorkflowBlockItem 搜索**链接网格**并点击以插入 ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/gTvRvhMyIEa6ZAEK_XWgP-20260107-112506.png) ::: :::WorkflowBlockItem 选择您想要的创建方式。 ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/9sjCskLUQLroEBt3GbBs--20260128-131317.png) ::: :::: ## 手动与自动填充 Link Grid 的区别 ::::::::Tabs :::::::Tab{title="手动 Link Grid"} 当您继续在 Link Grid 中手动编写内容时，下一步是： ::::::WorkflowBlock :::::WorkflowBlockItem 选择一个标题类型。 ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/NzrVaqt42ZCwPD859wbEQ-20260107-112732.png) 您有三个选项： - 无 - [颜色](docId\:pB4aA3e4SwCh4SCX_8Ug4) - [图像](docId\:pB4aA3e4SwCh4SCX_8Ug4) ::::LinkArray{contentSource="CUSTOM" customOrder="foiWGU1sKYkQpO3puSCc-,9bGqAthPinIWIzN1JDG9a,KN_Vi2koMOHat6p3NwJmV"} :::LinkArrayItem **无** 标题 ::: :::LinkArrayItem{headerType="COLOR" headerColor="#2166ae"} **颜色** 标题 ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/P2zVL7JMh-OAL-9OuY4WL-wzfTIiPQpIcLwzpDfNvIY-20240805-143427.png"} **图像** 标题 ::: :::: ::::: :::WorkflowBlockItem 添加您的内容。 您可以使用 [WYSIWYG Menu](#) 按您喜欢的方式来设置内容样式，或者甚至插入其他区块，例如： - [标题](docId\:f9FqgDFaoa8-TtG9OpQEW) - [可展开标题](docId:37wrUKXmvYY2FFtpgOmO7) - [Lists](docId\:q0U1u0MTYYTdbKaKLsSxF) - [Callout](docId\:eVjVC5JW2C7_ckmMT_L0H) - [水平分隔线](docId\:UzqpQrYa2i5WwhZI_9TBz) - [文件](docId\:zj8K-O7gYKFd_BLkuVBuY) - [图像](docId\:Li_wQ4wX1zgWoBGFqfyNG) - [视频](docId\:AWprIdYplayS98fRvNJJA) ::: :::::: ### 纯色标题 您可以使用颜色作为标题，使您的卡片更加醒目。您甚至可以使用代码颜色来匹配您的功能。 ::::WorkflowBlock :::WorkflowBlockItem 点击 **Header 类型**:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} 下拉按钮并选择 **颜色** ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/KGqONH1WBlDKfHrOqsxKx-20260113-122010.png" size="80" width="1806" height="962" position="center" showCaption="false"} ::: :::WorkflowBlockItem 点击 **更改颜色**并选择您偏好的颜色。所做的任何更改都会自动保存。 ::: :::: ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/i2rKx8uA91waVM4dtoDrf-20260127-193752.png" size="70" width="1688" height="1324" position="center" showCaption="false"} ### 图像标题 您可以使用图像作为标题来描述卡片内部的内容，并使其更具美观性。 ::::WorkflowBlock :::WorkflowBlockItem 点击 **Header 类型**:inlineImage[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WTqh27hSIr_0vOI02cw_h-20260128-125933.png" alt caption width="360" height="200"} 下拉按钮并选择 **图像** ::: :::WorkflowBlockItem 点击** 添加图像 **按钮 ::: :::WorkflowBlockItem 选择您的图像。所做的任何更改都会自动保存。 ::: :::: ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WeWMQu8KeXdNOMW30NHTW_image.png) ### 布局选项 **每行的项目数 **- 控制每行显示多少项目： - 每行 3 个项目 - 每行 2 个项目 - 每行 1 个项目 ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" showCaption="false"} ::::::: :::::Tab{title="自动填充 Link Grid"} 通过基于所选父文档自动填充**链接网格 **中的子文档，可节省时间并保持文档结构同步。每个项目都会呈现为可点击的链接或卡片，用于跳转到相应文档。 ### 选择来源 选择来源是第一步，它决定哪些文档会出现在 Link Grid 中。请选择 Link Grid 应从何处获取文档： - **空间中的任意父文档** – 选择特定文档或类别作为来源。 - **当前父文档** – 使用您正在编辑页面的父文档。 Link Grid 将包含所选父文档下的所有直接子文档。草稿、隐藏文档、权限受限的文档，以及更深层级的文档将不会包含在内。 ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/AkJ4oac_KRwvCY69ODKDb-20260128-142724.png) ### 示例 以下是我们文档中的一个示例，展示了在[嵌入示例](docId\:Yz49UnK6R7ORe1A2s9x8s)中使用 Link Grid 自动填充。 ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DDWZix1eIFtrffmTaLXFE-20260128-173556.png) ### 布局选项 这些选项可让您控制 Link Grid 的结构、顺序和视觉外观。在选择来源后，您可以自定义 Link Grid 的显示方式。 **每行项目数量** - 控制每行显示多少个项目： - 每行 3 个项目 - 每行 2 个项目 - 每行 1 个项目 ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/h2vHtudI1J8TKmopWwD2D-20260128-174719.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **排序选项** - 选择项目的排序方式： - **默认** – 与门户树中的顺序一致。 - **手动** – 通过拖放项目来自定义顺序。 - **按字母顺序** – 支持 A–Z 或 Z–A 排序。 - **按创建日期** – 可选择最新优先或最旧优先。 ::Image[]{src="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/Uxi0o0I8YiE8zcZBIfLHG-20260128-174445.png" size="80" width="1920" height="1160" position="center" showCaption="false"} **显示样式** - 选择项目在文档中的呈现方式： - **链接** – 紧凑列表，适用于大量文档。 - **卡片** – 包含图片、标题和描述的可视化布局。 ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ![Link view of Link Grid items](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/S2ki6R4zi0cuGW5CimEHP-20260128-175053.png "Link Grid 项目的链接视图") ::: :::VerticalSplitItem ![Card view of Link Grid items](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/DretKScZcyN1zDyMBsTrm-20260128-175110.png "Link Grid 项目的卡片视图") ::: :::: :::hint{type="info"} ### 卡片详情 对于** Card** 显示，图像、标题和描述会自动从文档的 [SEO 元数据控制](docId\:dpwwc9htwJuG7QNcJTEYt) 中自动提取。 您可以在每个文档的设置下直接编辑这些值，路径为 **SEO 元控件**。请参阅 SEO 元控件文档以了解如何更新图像、标题和描述。 ::: ::::: :::::::: *** ## 图像指南 ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/fFVWmk1gxX-tjDfg6Z-kr_image-guide.png "Link Grid 的图像指南") 为确保您的内容正确显示，我们建议创建一张**高度为 480px**、**宽度为 1324px**的图片。按照下面的[可视区域指南](docId\:pB4aA3e4SwCh4SCX_8Ug4)，您可以确保内容不会被裁剪。 ### 可视区域指南 主图像的尺寸为高 480px、宽 1324px。 ::::Tabs :::Tab{title="3 项目 / 每行"} 当每行有**3 个 Link Grid**时，可视区域将为**480px**的**高度**和**860px 的宽度**。此可视区域将居中显示在主图尺寸内。 请参考下方图像以获得可视化展示： ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/ypYZ53zBi5kh4s42ErngN_3perrow.png "每行 3 个 Link Grid 的可视区域") ::: :::Tab{title="2 项目 / 每行"} 当每行有**2 个 Link Grid**时，可视区域将由主图尺寸决定。 为便于理解，请参考下方图像： ![2 Link Grids per row](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/WzWRX9svOFc3oazdOcUGN_2perrow.png "每行 2 个 Link Grid 的可视区域") ::: :::Tab{title="1 项目 / 每行"} 当每行只有**1 个 Link Grid**时，可视区域将居中显示在主图内。其具体尺寸为宽 1324px、高 234px。 为便于理解，请参考下方图像： ![Link Grid per row](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/PDlPPdo9SGDIM1fuPndHH_1perrow.png "每行 1 个 Link Grid 的可视区域") ::: :::: :::hint{type="info"} 为进一步说明，主要内容或标志应放置在该指定区域内。 ![](https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/liJYjYkvJUMwyTyv5TpiX_arealogo.png "内容放置位置") ::: 请在下方查看封面图像及其行为的实时演示。 ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/rAFUifPkjwjyC0lbqKM4c_image-guide.png"} ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/pK4P-nlFBux86p-jBYQTu_image-guide.png"} ::: :::: ## Markdown 以下展示如何使用 markdown 代码在文档中创建一个标签页： :::::WorkflowBlock :::WorkflowBlockItem **创建 Link Grid** 从 `::::link-array` 行开始。 ::: :::WorkflowBlockItem **添加一个 link card** 每个 Link Grid 内容都放在 `:::link-array-item` 和 `:::` 标记之间。 ::: :::WorkflowBlockItem **选择 `headerType`** 您有两种标题选项： - **`图像`:** 使用图像作为标题背景。 - **`颜色`:** 使用纯色作为标题。 ::: :::WorkflowBlockItem **添加相应的属性** 对于 `图像` 标题： - 在 `headerImage` 属性中填写图像 URL。 - 示例： `headerImage="https://placehold.co/600x400")` 对于 `颜色` 标题： - 使用 hex 颜色代码定义 `headerColor` 属性。 - 示例： `headerColor="#ff00FF"` ::: ::::WorkflowBlockItem 在 link card 内添加内容。 :::hint{type="warning"} **🚨 注意！** 当使用三冒号（`:::`）语法创建嵌套 markdown 元素时，确保其上层的每个父元素在其开头的三冒号前也多加一个冒号（`:`）。 ::: :::: ::::: ```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 ::: :::: ``` 以下是结果： ::::LinkArray{attributes="{}" contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/bNBm7nPJgXjbjLyfbHNh2/2YO-Z1cATRi0OGk8yZ99Y-20260127-192519.png"} - list item 1 - list item 2 ::: :::LinkArrayItem{attributes="{"headerType":"COLOR","headerColor":"#ff00FF"}" headerType="COLOR" headerColor="#ff00FF"} - [ ] unchecked list box - [x] checked list box ::: :::: 查看 [使用 Markdown 快捷方式](docId:5QfvRE_WOro_y1WBKKYLp) 页面，查看更多其它区块的 markdown 快捷方式。 ## 示例 示例？用于 Link Grid？就像在海洋里找水一样根本避不开。本页有 8 个示例，加上图片，可谓比比皆是。 ## 自定义 CSS 凭借我们长期的丰富经验，我们一直致力于帮助客户根据其独特偏好自定义其文档。此外，我们提供了宝贵的协助，我们相信这也将对您打造卓越的产品文档大有裨益。 [查看 Custom CSS 如何工作](docId\:HwaVyLPvK550B8cHVZJNV) ### 将链接设置为固定在底部 将 Link Grid 内的链接设置为固定在卡片底部。 ```css ``` *** ::::LinkArray{contentSource="CUSTOM"} :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-C1IcmVcG0rx4ZLHX6X7V7-20250911-192557.png"} :FontAwesome[]{icon="fa-solid fa-cubes"} ** 查找其他区块** 发现用于创建令人惊叹且功能齐全的文档页面的新方法和区块。 [查看所有区块](docId\:B4IohMBgLgJ5t-HvaLMTF) ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-YRyGGWKsNS1ZZJa5XJy0z-20250911-192608.png"} :FontAwesome[]{icon="fa-solid fa-headset"}** 需要帮助？⬇️** 使用右下角的**蓝色** **聊天气泡**。 或者尝试来自搜索框的**AI 聊天**以快速获得答案。 ::: :::LinkArrayItem{headerType="IMAGE" headerImage="https://api.archbee.com/api/optimize/K_JWZranXy1tD6qvlG2v6-MS_ubDHlXgoktt4svD2rL-20250911-192619.png"} :FontAwesome[]{icon="fa-solid fa-hand-holding-heart"}** 您的意见很重要** 请使用下面的反馈表单，匿名提交。 或在**问答区**提问，我们的团队或 AI 将为您提供解决方案。 ::: ::::