feat(theme): support to customize page content via theme api (#287)

umijs · Aug 18, 2020 · eeadecd · eeadecd
1 parent 84f8378
commit eeadecd
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 2 deletions.
diff --git a/packages/preset-dumi/src/index.test.ts b/packages/preset-dumi/src/index.test.ts
@@ -32,6 +32,9 @@ describe('preset-dumi', () => {
       path.join(service.paths.absNodeModulesPath, 'dumi-theme-default'),
     );
 
+    // FIXME: find the real reason why component path missing 1 level in routes.ts
+    service.paths.absPagesPath += '/tmp';
+
     await service.run({
       name: 'g',
       args: {

diff --git a/packages/preset-dumi/src/routes/getRouteConfig.ts b/packages/preset-dumi/src/routes/getRouteConfig.ts
@@ -39,11 +39,19 @@ export default async (api: IApi, opts: IDumiOpts): Promise<IRoute[]> => {
   // add main routes
   config.push({
     path: '/',
-    wrappers: [slash(path.relative(paths.absPagesPath, path.join(__dirname, '../theme/layout')))],
+    wrappers: [
+      // builtin outer layout
+      slash(path.relative(paths.absPagesPath, path.join(__dirname, '../theme/layout'))),
+      // theme layout
+      slash(
+        path.relative(paths.absPagesPath, path.join(paths.absNodeModulesPath, theme.layoutPath)),
+      ),
+    ],
+    // theme content wrapper
     component: slash(
       path.relative(
         path.join(paths.absTmpPath, 'core'),
-        path.join(paths.absNodeModulesPath, theme.layoutPath),
+        path.join(paths.absNodeModulesPath, theme.contentPath),
       ),
     ),
     // decorate standard umi routes

diff --git a/packages/preset-dumi/src/theme/loader.ts b/packages/preset-dumi/src/theme/loader.ts
@@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import { winPath } from '@umijs/utils';
+import { getModuleResolvePath } from '../utils/moduleResolver';
 import ctx from '../context';
 
 interface ThemeComponent {
@@ -27,6 +28,10 @@ export interface IThemeLoadResult {
    * layout file path
    */
   layoutPath: string;
+  /**
+   * content wrapper content path
+   */
+  contentPath: string;
   /**
    * builtin components
    */
@@ -76,13 +81,21 @@ export default async () => {
 
       return result;
     }, []);
+    let contentPath = winPath(path.join(theme, 'src', 'content'));
+
+    try {
+      getModuleResolvePath({ basePath: ctx.umi.paths.cwd, sourcePath: contentPath, silent: true });
+    } catch (err) {
+      contentPath = winPath(path.join(FALLBACK_THEME, 'src', 'content'));
+    }
 
     cache = await ctx.umi.applyPlugins({
       key: 'dumi.modifyThemeResolved',
       type: ctx.umi.ApplyPluginsType.modify,
       initialValue: {
         name: theme,
         layoutPath: winPath(path.join(theme, 'src', 'layout')),
+        contentPath,
         modulePath,
         builtins: components,
         fallbacks,

diff --git a/packages/theme-default/src/content.tsx b/packages/theme-default/src/content.tsx
@@ -0,0 +1 @@
+export default (props: React.PropsWithChildren<{}>) => props.children;