> For AI agents: the complete documentation index is available at https://rspress.rs/zh/llms.txt, the full documentation bundle is available at https://rspress.rs/zh/llms-full.txt.

# HomeFeature

该组件是 [首页](https://rspress.rs/zh/guide/basic/home-page.md) 的一部分，`HomeFeature` 用于在首页 Hero 区域下方渲染特性网格。

## 用法

通过 [自定义主题](https://rspress.rs/zh/guide/basic/custom-theme.md) 来进行修改或覆盖。

你可以在 mdx 文件的 frontmatter 中配置 `features`，组件会自动通过 [`useFrontmatter`](https://rspress.rs/zh/ui/hooks/use-frontmatter.md) 读取。具体的配置项请参考 [Frontmatter 配置](https://rspress.rs/zh/api/config/config-frontmatter.md#features)。

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

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

## Props

### features

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

```ts
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` 后卡片可点击跳转