HomeFeature

Warning

该组件主要配合自定义主题中的 wrap/eject 使用，与 MDX 里直接导入使用的组件不同，你可以通过传递组件 props 或直接覆盖该组件达到修改样式和功能的目的。如果通过 eject 覆盖整个组件，需注意组件对应配置项的读取会失效，需要自行控制。

该组件是首页的一部分，HomeFeature 用于在首页 Hero 区域下方渲染特性网格。

用法

通过自定义主题来进行修改或覆盖。

你可以在 mdx 文件的 frontmatter 中配置 features，组件会自动通过 useFrontmatter 读取。具体的配置项请参考 Frontmatter 配置。

⚡

快速

Rspress 构建快

🧩

MDX 优先

到处都是 MDX

import { HomeFeature as BasicHomeFeature } from '@rspress/core/theme-original';

export default function HomeFeature() {
  return <BasicHomeFeature />;
}

Props

features

类型： Feature[]
默认值： 从 frontmatter 中读取

interface Feature {
  /**
   * 特性图标，支持：
   * - Emoji: '🚀'
   * - HTML 字符串: '<span class="icon">...</span>'
   * - SVG 字符串: '<svg>...</svg>'
   * - 图片 URL: '/icons/feature.svg' 或 'https://example.com/icon.png'
   */
  icon: string;
  /** 特性标题 */
  title: string;
  /** 特性详情描述，支持 HTML 字符串 */
  details: string;
  /** 网格列跨度，支持 2、3、4、6，默认为 4 */
  span?: 2 | 3 | 4 | 6;
  /** 点击卡片跳转的链接 */
  link?: string;
}

span 控制每个卡片占据的网格列数，总共 12 列
icon 支持 emoji、HTML 字符串、SVG 字符串、图片 URL
details 支持 HTML 字符串
设置 link 后卡片可点击跳转

#HomeFeature

#用法

快速

MDX 优先

#Props

#features

HomeFeature

用法

Props

features