Layout

Warning

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

Layout 是 Rspress 的核心布局组件，作为整个页面的布局容器。它提供了丰富的插槽 props，可以在不 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';

插槽 Props

Layout 组件设计了一系列的插槽 props 用于扩展默认主题的布局：

点击下方按钮，在页面中预览各插槽的位置。

theme/index.tsx

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

const Layout = () => (
  <BasicLayout
    /* Home 页 Hero 部分之前 */
    beforeHero={<div>beforeHero</div>}
    /* Home 页 Hero 部分之后 */
    afterHero={<div>afterHero</div>}
    /* Home 页 Features 部分之前 */
    beforeFeatures={<div>beforeFeatures</div>}
    /* Home 页 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>Custom Nav Title</div>}
    /* 左上角导航栏标题之后 */
    afterNavTitle={<div>afterNavTitle</div>}
    /* 导航栏菜单之前 */
    beforeNavMenu={<div>beforeNavMenu</div>}
    /* 导航栏菜单之后 */
    afterNavMenu={<div>afterNavMenu</div>}
    /* 左侧导航项之前/之后（桌面端和移动端） */
    beforeLeftNavItems={<li>beforeLeftNavItems</li>}
    afterLeftNavItems={<li>afterLeftNavItems</li>}
    /* 右侧导航项之前/之后（桌面端和移动端） */
    beforeRightNavItems={<li>beforeRightNavItems</li>}
    afterRightNavItems={<li>afterRightNavItems</li>}
    /* 左侧侧边栏上面 */
    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>
              This is a custom paragraph added after every H1 heading.
            </OriginalP>
          </>
        );
      },
    }}
  />
);

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

自定义导航列表

新增于 v2.0.22

通过 beforeLeftNavItems / afterLeftNavItems 和 beforeRightNavItems / afterRightNavItems 在左右导航项前后插入内容。NavList 自动适配桌面端和移动端。

theme/index.tsx

import { Layout as BasicLayout, NavList } from '@rspress/core/theme-original';

const customItems = [{ text: 'Community', link: '/community' }];

export function Layout() {
  return <BasicLayout afterRightNavItems={<NavList items={customItems} />} />;
}

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

items 使用与 themeConfig.nav 相同的结构，插入位置由插槽决定。

#Layout

#用法

#插槽 Props

#自定义导航列表

Layout

用法

插槽 Props

自定义导航列表