RelatedArticles 相关文章组件

发表于 2026-04-19

最后修改 2026-04-20

阅读量 加载中...

<RelatedArticles /> 组件在页面底部渲染一组相关文章链接。链接定义在页面的 frontmatter 中，不需要在正文中手动写链接，保持内容整洁。

基本用法

在页面 frontmatter 中添加 relatedArticles 数组，然后在正文中放置 <RelatedArticles />（通常放在文章末尾）：

---
title: 我的文章
relatedArticles:
  - title: 如何填写主管信息
    href: /zhHans/work-visas/resource/supervisor-choice.md
  - title: 主管政策
    href: /zhHans/staff-management/supervisor-policy.md
---

<RelatedArticles />

组件会自动读取 relatedArticles，不需要传任何 props。

Frontmatter 字段说明

字段	类型	必填	说明
title	String	是	链接的显示文字
href	String	是	目标页面路径，可以带 .md 后缀（组件会自动去掉）
category	String	否	分类标签，用于将链接分组显示

使用分类分组

提供 category 时，链接会按分类标题分组显示：

relatedArticles:
  - title: 如何填写主管信息
    href: /work-visas/resource/supervisor-choice.md
    category: 合规与流程
  - title: 主管政策
    href: /staff-management/supervisor-policy.md
    category: 合规与流程
  - title: STEM OPT 轻量服务
    href: /standard-operation-procedure/light-weight-team-information/stem-opt.md
    category: 相关服务

以上会渲染两个分组：合规与流程（2 项）和 相关服务（1 项）。

折叠规则： 只有 1 项的分类不会单独显示标题，而是自动归入底部的 其他 分组，避免视觉上过于零散。

不使用分类

所有条目都不设 category 时，会渲染一个没有分组标题的平铺列表：

relatedArticles:
  - title: 主管政策
    href: /zhHans/staff-management/supervisor-policy.md
  - title: STEM OPT 轻量服务
    href: /zhHans/standard-operation-procedure/light-weight-team-information/stem-opt.md

注意事项

• 如果 relatedArticles 不存在或为空数组，组件不会渲染任何内容。
• href 中的 .md 后缀会被自动去掉，写不写都可以。
• 该组件已全局注册，在 Markdown 文件中直接使用即可，不需要额外 import。

重构方法

如果使用网页版LLM工具，只允许复制信息，可以复制下面的信息

请修改下面的markdown，改为frontmatter
类似的例子
## 相关文章

1. [Atomeocean 稳定H1b合作开始之前](/work-visas/h1b/before-we-begin.md)
修改如下
relatedArticles:
  - title: Atomeocean 稳定H1b合作开始之前
    href: /work-visas/h1b/before-we-begin.md