close
Rspress
  • 中文

      • HomeLayout

      Warning

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

      HomeLayout 是 首页 的布局组件，负责整合渲染 Hero、Features 和 Footer 等区域。

      用法

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

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

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

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

      自定义插槽

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

      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 组件。

      afterHeroActions

      • 类型： React.ReactNode

      在 Hero 按钮之后插入的自定义内容，会传递给 HomeHero 组件。

      beforeFeatures

      • 类型： React.ReactNode

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

      afterFeatures

      • 类型： React.ReactNode

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

      子组件

      HomeLayout 内部使用了以下组件：