自定义主题

如果要自定义主题，可以新建主题入口文件 .onepress/theme/index.js，然后在这里面导出你的主题。

OnePress 主题实质只是一个包含一些属性的对象：

ts
1interface Theme {
2  Layout: ComponentType<any>; // React Component
3  NotFound?: ComponentType<any>;
4  mdxComponents?: Record<string, ComponentType<any>>; // mdx 组件，用于自定义 mdx 的渲染
5}

在你的主题入口需要默认导出这个对象：

js
.onepress/theme/index.js
1import { Layout } from './components/Layout';
2import { NotFound } from './components/NotFound';
3import { mdxComponents } from './components/Mdx';
4
5export default {
6  Layout,
7  NotFound,
8  mdxComponents,
9};

使用已有主题

如果想使用 onepress 主题的 npm 包，可以在 .onepress/theme/index.js 中直接导出该包的主题对象：

javascript
1import theme from 'awesome-onepress-theme';
2export default theme;

当然，你也可以扩展已有的主题：

js
1import theme from 'awesome-onepress-theme';
2
3export default {
4  ...theme,
5  NotFound: () => 'Custom 404 Page',
6  mdxComponents: {
7    ...theme?.mdxComponents,
8    h1: () => 'Custom Heading 1',
9  },
10};