#HomeLayout

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:

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:

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

• Тип: React.ReactNode

Custom content to insert before the Hero section.

#afterHero

• Тип: React.ReactNode

Custom content to insert after the Hero section.

#beforeHeroActions

• Тип: React.ReactNode

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

#afterHeroActions

• Тип: React.ReactNode

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

#beforeFeatures

• Тип: React.ReactNode

Custom content to insert before the Features section.

#afterFeatures

• Тип: React.ReactNode

Custom content to insert after the Features section.

#Sub-components

HomeLayout uses the following components internally:

• HomeBackground - Homepage background
• HomeHero - Hero section
• HomeFeature - Features section
• HomeFooter - Footer section