HomeHero

Warning

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

该组件是首页的一部分，HomeHero 用于渲染首页的 Hero 区域。

用法

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

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

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

HomeHero 组件会通过 useFrontmatter 读取 frontmatter 中的 hero 配置。关于 hero 的详细配置项，请参考 Frontmatter 配置。

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

index.mdx

import { HomeHero } from '@rspress/core/theme';

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

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

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