close
Rspress
  • English

      • HomeHero

      Warning

      This component is mainly used in conjunction with wrap/eject in Custom Theme , and is different from components that are directly imported in MDX. You can modify the styles and functions by passing component props or directly overriding the component. If you override the entire component through eject, please note that the reading of the corresponding configuration options of the component will become invalid and you need to control it yourself.

      This component is part of the homepage. HomeHero renders the Hero section on the homepage.

      Usage

      Modify or override through custom theme.

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

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

      The HomeHero component reads the hero configuration from frontmatter through useFrontmatter. For detailed hero configuration options, refer to Frontmatter Configuration.

      Custom slots

      Use the beforeHeroActions and afterHeroActions props to insert custom content before and after the action buttons:

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

<HomeHero
  beforeHeroActions={<div>Content before buttons</div>}
  afterHeroActions={<div>Content after buttons</div>}
/>;

      Props

      beforeHeroActions

      • Type: React.ReactNode

      Custom content to insert before the Hero buttons.

      afterHeroActions

      • Type: React.ReactNode

      Custom content to insert after the Hero buttons.