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

# HomeLayout

`HomeLayout` 是 [首页](https://rspress.rs/zh/guide/basic/home-page.md) 的布局组件，负责整合渲染 Hero、Features 和 Footer 等区域。

## 用法

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

```tsx title="theme/index.tsx"
import { HomeLayout as BasicHomeLayout } from '@rspress/core/theme-original';

export default function HomeLayout() {
  return <BasicHomeLayout />;
}
```

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

### 自定义插槽

通过插槽属性，可以在各区域前后插入自定义内容：

```tsx title="theme/index.tsx"
import { HomeLayout as BasicHomeLayout } from '@rspress/core/theme-original';

export default function HomeLayout() {
  return (
    <BasicHomeLayout
      beforeHero={<div>Hero 区域之前的内容</div>}
      afterHero={<div>Hero 区域之后的内容</div>}
      beforeFeatures={<div>Features 区域之前的内容</div>}
      afterFeatures={<div>Features 区域之后的内容</div>}
      beforeHeroActions={<div>Hero 按钮之前的内容</div>}
      afterHeroActions={<div>Hero 按钮之后的内容</div>}
    />
  );
}
```

## Props

### beforeHero

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

在 Hero 区域之前插入的自定义内容。

### afterHero

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

在 Hero 区域之后插入的自定义内容。

### beforeHeroActions

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

在 Hero 按钮之前插入的自定义内容，会传递给 [HomeHero](https://rspress.rs/zh/ui/layout-components/home-hero.md) 组件。

### afterHeroActions

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

在 Hero 按钮之后插入的自定义内容，会传递给 [HomeHero](https://rspress.rs/zh/ui/layout-components/home-hero.md) 组件。

### beforeFeatures

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

在 Features 区域之前插入的自定义内容。

### afterFeatures

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

在 Features 区域之后插入的自定义内容。

## 子组件

`HomeLayout` 内部使用了以下组件：

- [HomeBackground](https://rspress.rs/zh/ui/layout-components/home-background.md) - 首页背景
- [HomeHero](https://rspress.rs/zh/ui/layout-components/home-hero.md) - Hero 区域
- [HomeFeature](https://rspress.rs/zh/ui/layout-components/home-feature.md) - Features 区域
- [HomeFooter](https://rspress.rs/zh/ui/layout-components/home-footer.md) - Footer 区域