close
Rspress
  • English

      • HomeLayout

      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.

      HomeLayout is the layout component for the homepage, responsible for integrating and rendering the Hero, Features, and Footer sections.

      Usage

      Modify or override through custom theme:

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

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

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

      Custom slots

      Use slot props to insert custom content before and after each section:

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

export default function HomeLayout() {
  return (
    <BasicHomeLayout
      beforeHero={<div>Content before Hero</div>}
      afterHero={<div>Content after Hero</div>}
      beforeFeatures={<div>Content before Features</div>}
      afterFeatures={<div>Content after Features</div>}
      beforeHeroActions={<div>Content before Hero buttons</div>}
      afterHeroActions={<div>Content after Hero buttons</div>}
    />
  );
}

      Props

      beforeHero

      • Type: React.ReactNode

      Custom content to insert before the Hero section.

      afterHero

      • Type: React.ReactNode

      Custom content to insert after the Hero section.

      beforeHeroActions

      • Type: React.ReactNode

      Custom content to insert before the Hero buttons, passed to the HomeHero component.

      afterHeroActions

      • Type: React.ReactNode

      Custom content to insert after the Hero buttons, passed to the HomeHero component.

      beforeFeatures

      • Type: React.ReactNode

      Custom content to insert before the Features section.

      afterFeatures

      • Type: React.ReactNode

      Custom content to insert after the Features section.

      Sub-components

      HomeLayout uses the following components internally: