用途:为 Rspress v2 站点定制主题,按由轻到重四个层级选择方案,优先用最轻方式以保持可维护性并兼容升级。
主要能力与用法:
- CSS 变量:改品牌色、背景、文字、代码块等,可写在 theme/index.css,或仅需 CSS 时用 rspress.config.ts 的 globalStyles。
- BEM 类覆盖:内置组件遵循 .rp-[component]__[element]--[modifier],如 .rp-nav、.rp-tabs、.rp-codeblock,用于变量不够细致时。
- Layout 插槽(wrap):在 theme/index.tsx 中重写 Layout,可注入 beforeNavTitle、bottom 等内容;插槽组件可用 @rspress/core/runtime 的 useDark、useLang、usePage 等钩子。
- eject:当插槽无法满足时复制内置组件源码完全替换,用 rspress eject 列出组件,再在 theme/index.tsx 具名导出。
- 自定义图标:27 个内置图标可用同名具名导出替换,图标类型为 React 组件或 URL 字符串。
- 全局 UI 组件:在 rspress.config.ts 的 globalUIComponents 注册每页渲染的组件。
- 页面类型:frontmatter pageType 支持 home、doc、doc-wide、custom、blank、404,也可单独设 navbar、sidebar、outline、footer。
限制与注意:theme/ 内必须从 @rspress/core/theme-original 导入,否则循环导入;需保留 export * from '@rspress/core/theme-original',否则未覆盖组件失效;避免过度 eject;v1 路径 rspress/theme、@rspress/theme-default 不适用。确认使用 v2(导入为 @rspress/core/*)。首次配置需建立 theme/index.tsx。