帮助文章 HelpArticles

概览

HelpArticles 能够将大量的文章链接进行结构化展示，常见于文档首页或常见问题聚合页。

实时预览

热门帮助主题

如何重置您的密码？支付方式有哪些？

开发者权限说明API 使用限制

使用方法

import { HelpArticles } from '@goenhance/cms-ui';

const Example = () => (
  <HelpArticles
    title="文档入口"
    list={[
        [{ title: "文章 1", url: "#" }],
        [{ title: "文章 2", url: "#" }]
    ]}
  />
);

属性说明 (Props)

属性	类型	默认值	说明
title	string	-	区域大标题
list	HelpArticleItem[][]	[]	二维数组，每一层代表示一列文章

特性

• 多列分组：支持通过二维数组轻松实现文章的分列展示。
• 图标引导：每篇文章前都带有醒目的箭头图标，引导点击。
• 悬停视觉：文章标题在悬停时会自动变色并增加下划线。

---

主题覆盖

可覆盖变量

类名：mewx-cms-help-articles

变量名	用途	默认值
--mewx-cms-help-articles-heading-text	标题文字色	var(--blocks-text-heading)
--mewx-cms-help-articles-group-bg	分组背景色	var(--blocks-bg-section)
--mewx-cms-help-articles-group-border	分组边框色	var(--blocks-border)
--mewx-cms-help-articles-group-hover-bg	分组悬停背景	var(--blocks-bg-card)
--mewx-cms-help-articles-group-hover-shadow	分组悬停阴影	var(--blocks-shadow-md)
--mewx-cms-help-articles-group-hover-border	分组悬停边框	var(--blocks-border-hover)
--mewx-cms-help-articles-link-icon	链接图标色	var(--blocks-primary)
--mewx-cms-help-articles-link-text	链接文字色	var(--blocks-text-body)
--mewx-cms-help-articles-link-hover-text	链接悬停色	var(--blocks-primary)

覆盖示例

/* 蓝色帮助文章 */
.blue-articles {
  --mewx-cms-help-articles-link-icon: 59 130 246;
  --mewx-cms-help-articles-link-hover-text: 37 99 235;
  --mewx-cms-help-articles-group-hover-border: 191 219 254;
}

<HelpArticles className="blue-articles" title="帮助主题" list={[...]} />