> 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.

# HomeHero

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

## 用法

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

```tsx
import { HomeHero as BasicHomeHero } from '@rspress/core/theme-original';

export default function HomeHero() {
  return <BasicHomeHero />;
}
```

`HomeHero` 组件会通过 [`useFrontmatter`](https://rspress.rs/zh/ui/hooks/use-frontmatter.md) 读取 frontmatter 中的 `hero` 配置。关于 `hero` 的详细配置项，请参考 [Frontmatter 配置](https://rspress.rs/zh/api/config/config-frontmatter.md#hero)。

### 自定义插槽

通过 `beforeHeroActions` 和 `afterHeroActions` 属性，可以在操作按钮前后插入自定义内容：

```tsx title="index.mdx"
import { HomeHero } from '@rspress/core/theme';

<HomeHero
  beforeHeroActions={<div>按钮前的内容</div>}
  afterHeroActions={<div>按钮后的内容</div>}
/>;
```

## Props

### beforeHeroActions

- **类型：** `React.ReactNode`

在 Hero 按钮前插入的自定义内容。

### afterHeroActions

- **类型：** `React.ReactNode`

在 Hero 按钮后插入的自定义内容。