RelatedArticles Component

发表于 2026-04-16

最后修改 2026-04-16

阅读量 加载中...

The <RelatedArticles /> component renders a styled list of related article links at the bottom of a page. Links are defined in the page's frontmatter — not in the article body — so the content stays clean and the data remains machine-readable.

Basic Usage

Add a relatedArticles array to the page frontmatter, then place <RelatedArticles /> anywhere in the body (typically at the end):

---
title: My Article
relatedArticles:
  - title: How to Fill in Supervisor Info for Visa Applications
    href: /work-visas/resource/supervisor-choice.md
  - title: Supervisor Policy
    href: /policy-document/staff/supervisor-policy.md
---

<RelatedArticles />

The component reads relatedArticles automatically — no props needed.

Frontmatter Fields

Field	Type	Required	Description
title	String	Yes	Display text for the link
href	String	Yes	Path to the target page. Use .md paths — the component strips the extension automatically
category	String	No	Groups links under a labeled cluster

Grouping with Categories

When category is provided, links are grouped under labeled headings:

relatedArticles:
  - title: How to Fill in Supervisor Info for Visa Applications
    href: /work-visas/resource/supervisor-choice.md
    category: Compliance & Process
  - title: Supervisor Policy
    href: /policy-document/staff/supervisor-policy.md
    category: Compliance & Process
  - title: STEM OPT Light Work Service
    href: /guide/service/light-weight-work/stem-opt.md
    category: Related Services

This renders two groups: Compliance & Process (2 items) and Related Services (1 item).

Collapsing rule: a category with only one item is not shown as its own group — it collapses into an 其他 (Other) group at the bottom. This avoids visual clutter from single-item headings.

Without Categories

Omitting category on all items renders a flat list with no group labels:

relatedArticles:
  - title: Supervisor Policy
    href: /policy-document/staff/supervisor-policy.md
  - title: STEM OPT Light Work Service
    href: /guide/service/light-weight-work/stem-opt.md

Notes

• If relatedArticles is absent or empty, the component renders nothing — safe to register globally.
• .md extensions in href are stripped automatically; you can write paths either way.
• The component is registered globally and requires no import in the markdown file.