close

    Макет

    Layout — это основной компонент макета Rspress, служащий контейнером макета для всей страницы. Он предоставляет богатые слот-пропсы для расширения макета темы по умолчанию без eject.

    Использование

    Используйте компонент Layout через кастомную тему:

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

const Layout = () => <BasicLayout beforeNavTitle={<div>some content</div>} />;

export { Layout };
export * from '@rspress/core/theme-original';

    Слот-пропсы

    Компонент Layout предоставляет серию слот-пропсов для расширения стандартной темы макета:

    theme/index.tsx
    import {
  Layout as BasicLayout,
  getCustomMDXComponent as basicGetCustomMDXComponent,
} from '@rspress/core/theme-original';

const Layout = () => (
  <BasicLayout
    /* Перед секцией Hero главной страницы */
    beforeHero={<div>beforeHero</div>}
    /* После секции Hero главной страницы */
    afterHero={<div>afterHero</div>}
    /* Перед секцией Features главной страницы */
    beforeFeatures={<div>beforeFeatures</div>}
    /* После секции Features главной страницы */
    afterFeatures={<div>afterFeatures</div>}
    /* Перед секцией Footer страницы документа */
    beforeDocFooter={<div>beforeDocFooter</div>}
    /* После секции Footer страницы документа */
    afterDocFooter={<div>afterDocFooter</div>}
    /* В начале страницы документа */
    beforeDoc={<div>beforeDoc</div>}
    /* В конце страницы документа */
    afterDoc={<div>afterDoc</div>}
    /* Перед содержимым документа */
    beforeDocContent={<div>beforeDocContent</div>}
    /* После содержимого документа */
    afterDocContent={<div>afterDocContent</div>}
    /* Перед навбаром */
    beforeNav={<div>beforeNav</div>}
    /* После навбара */
    afterNav={<div>afterNav</div>}
    /* Перед заголовком навбара в левом верхнем углу */
    beforeNavTitle={<span>😄</span>}
    /* Заголовок навбара */
    navTitle={<div>Пользовательский заголовок навбара</div>}
    /* После заголовка навбара в левом верхнем углу */
    afterNavTitle={<div>afterNavTitle</div>}
    /* Перед меню навбара */
    beforeNavMenu={<div>beforeNavMenu</div>}
    /* После меню навбара */
    afterNavMenu={<div>afterNavMenu</div>}
    /* Над левой боковой панелью */
    beforeSidebar={<div>beforeSidebar</div>}
    /* Под левой боковой панелью */
    afterSidebar={<div>afterSidebar</div>}
    /* Над правым оглавлением */
    beforeOutline={<div>beforeOutline</div>}
    /* Под правым оглавлением */
    afterOutline={<div>afterOutline</div>}
    /* В самом верху страницы */
    top={<div>top</div>}
    /* В самом низу страницы */
    bottom={<div>bottom</div>}
    /* Пользовательские MDX-компоненты */
    components={{
      h1: (props) => {
        const { h1: OriginalH1, p: OriginalP } = basicGetCustomMDXComponent();
        return (
          <>
            <OriginalH1 {...props} />
            <OriginalP>
              Это пользовательский абзац, добавленный после каждого заголовка H1.
            </OriginalP>
          </>
        );
      },
    }}
  />
);

export { Layout };
export * from '@rspress/core/theme-original';