feat: support sidebarGroupModePath

example/.dumirc.ts

@@ -2,11 +2,13 @@ import { defineConfig } from 'dumi';
 import path from 'node:path';
 
 import { homepage, name } from '../package.json';
+import { defineThemeConfig } from '../src/defineThemeConfig';
 
 const isProduction = process.env.NODE_ENV === 'production';
 const isWin = process.platform === 'win32';
 
-const themeConfig = {
+const themeConfig = defineThemeConfig({
+  logo: 'https://lingwu.cn/v1/gpts/images/c6978e9c-d991-4cd4-a74b-b5189cdf647b',
   actions: [
     {
       icon: 'Github',
@@ -40,7 +42,20 @@ const themeConfig = {
     github: homepage,
   },
   title: 'Dumi Theme YuntiJS',
-};
+  sidebarGroupModePath: ['/config', '/components'],
+  nav: {
+    'zh-CN': [
+      { title: 'Components', link: '/components/example' },
+      { title: '分组示例', link: '/config/base' },
+      { title: '折叠示例', link: '/demo/secondary-sidebar-colors' },
+      { title: 'Changelog', link: '/changelog' },
+    ],
+    'en-US': [
+      { title: 'Group Demo', link: '/config/base-en' },
+      { title: 'Collapse Demo', link: '/demo/secondary-sidebar-colors-en' },
+    ],
+  },
+});
 
 export default defineConfig({
   alias: {
@@ -55,12 +70,15 @@ export default defineConfig({
   },
   favicons: ['https://avatars.githubusercontent.com/u/148947838?s=64&v=4'],
   locales: [
-    { id: 'zh-CN', name: '中文' },
-    { id: 'en-US', name: 'English' },
+    { id: 'zh-CN', name: '中文', suffix: '' },
+    { id: 'en-US', name: 'English', suffix: '-en' },
   ],
   mfsu: isWin ? undefined : {},
   npmClient: 'pnpm',
-  // ssr: false,
+  exportStatic: {
+    // 忽略预渲染失败的错误
+    ignorePreRenderError: true,
+  },
   ...(isProduction ? { ssr: { builder: 'webpack' } } : {}),
   styles: [
     `html, body { background: transparent;  }

example/docs/config/FAQ.en-US.md

@@ -0,0 +1,86 @@
+---
+nav:
+  title: DEMO
+title: FAQ
+order: 3
+tag:
+  title: New
+  color: success
+group: Group B
+---
+
+Here are some dumi-theme-antd common questions and official answers for your reference.
+
+## How to fully customize the homepage <Badge>0.3.0+</Badge>
+
+The home page of `dumi-theme-antd` is generated according to the configuration by default, and there will inevitably be some custom modules in the actual use process. `dumi-theme-antd` internally separates the home page module into a built-in component of `HomeBaseLayout`, if you want While fully customizing the homepage and wanting to retain the layout of the built-in homepage, it can be introduced and used in the page. For example, to create a new page:
+
+```md
+<!-- .dumi/pages/index.md -->
+
+<HomeBaseLayout></HomeBaseLayout>
+....some text or images
+<YourCustomComponent></YourCustomComponent>
+```
+
+Or import it as a React component:
+
+```tsx | pure
+/*.dumi/pages/index.tsx */
+import { HomeBaseLayout } from 'dumi-theme-antd';
+
+const CustomHomePage = () => {
+  return (
+    <div>
+      <HomeBaseLayout />
+      <div>other content</div>
+    </div>
+  );
+};
+
+export default CustomHomePage;
+```
+
+## Conventional secondary navigation <Badge>0.3.3+</Badge>
+
+The theme package has been adapted to the conventional secondary navigation function provided by dumi, which is convenient for organizing documents. For the specific directory structure and FrontMatter configuration, please refer to the official website [Conventional secondary navigation](https://d.umijs.org/guide/conventional-routing#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E4%BA%8C%E7%BA%A7%E5%AF%BC%E8%88%AA)。
+
+## How the component library documentation adapts to the dark mode
+
+The theme switching logic inside the theme package is compatible with dumi’s built-in `usePrefersColor` API, so you can use the `@dark-selector` global variable in the Less file to add a dark mode style to the components of the theme package:
+
+```less
+.some-container {
+  // Bright color mode is white
+  color: #fff;
+
+  // dark mode is black
+  @{dark-selector} & {
+    color: #000;
+  }
+}
+```
+
+If it is a pure css file, you can use [prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme) to achieve.
+
+## SSR <Badge>0.3.9+</Badge>
+
+The theme package supports ssr, and the cssinjs' style was not completely compatible before the \` 0.3.9' version, but the problem has been fixed in later versions. SSR recommends the following configuration:
+
+```ts
+export default defineConfig({
+  ssr: process.env.NODE_ENV === 'development' ? false : {},
+});
+```
+
+:::warning
+When configured as SSR, if the homepage uses the built-in homepage module of the theme package, a 404 routing page will appear briefly when it is loaded for the first time. The reason is that the built-in homepage did not export `index.html`. is not immediately loaded into the corresponding resource. The solution is to create a custom homepage, then import the built-in `<HomeBaseLayout />` module of the theme package, and then package and export`index.html`, you can refer to \[dumi-theme-antd official website homepage]\(https\:// github.com/KuangPF/dumi-theme-antd/blob/main/example/.dumi/pages/index/index.tsx).
+:::
+
+## Why is there no `index.html` after build
+
+After using `dumi-theme-antd` theme package, the homepage is generated through configuration, and `index.md` is not written, so `index.html` will not be generated. If you want to generate `index.html`, you can add `index.md` or completely customize the home page, and then import the built-in `HomeBaseLayout` component.
+
+:::info
+When deploying GitHub Pages, it will search for the `index.html` file step by step by default. If you use nginx deployment, you can configure `try_files` related parameters. When `index.html` cannot be found in the root directory, it will go to other directories to find` index.html`.
+:::

example/docs/config/FAQ.zh-CN.md

@@ -0,0 +1,86 @@
+---
+nav:
+  title: 配置
+title: FAQ
+order: 3
+tag:
+  title: New
+  color: success
+group: 分组 B
+---
+
+以下整理了一些 dumi-theme-antd 常见的问题和官方答复，可供参考。
+
+## 如何完全自定义首页 <Badge>0.3.0+</Badge>
+
+`dumi-theme-antd` 首页默认是根据配置生成，在实际使用过程中难免会存在一些定制模块，`dumi-theme-antd`内部将首页模块单独抽离成了 `HomeBaseLayout` 内置组件，如果想在完全自定义首页的同时又想保留内置首页的布局，可在页面中引入使用。例如，新建页面：
+
+```md
+<!-- .dumi/pages/index.md -->
+
+<HomeBaseLayout></HomeBaseLayout>
+.... some text or images
+<YourCustomComponent></YourCustomComponent>
+```
+
+或者以 React 组件的形式引入：
+
+```tsx | pure
+/* .dumi/pages/index.tsx */
+import { HomeBaseLayout } from 'dumi-theme-antd';
+
+const CustomHomePage = () => {
+  return (
+    <div>
+      <HomeBaseLayout />
+      <div>other content</div>
+    </div>
+  );
+};
+
+export default CustomHomePage;
+```
+
+## 约定式二级导航 <Badge>0.3.3+</Badge>
+
+主题包已适配 dumi 提供的约定式二级导航功能，该功能便于组织文档，具体目录结构以及 FrontMatter 配置可参考官网[约定式二级导航](https://d.umijs.org/guide/conventional-routing#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E4%BA%8C%E7%BA%A7%E5%AF%BC%E8%88%AA)。
+
+## 组件库文档如何适配暗黑模式
+
+主题包内部主题切换逻辑兼容 dumi 内置`usePrefersColor` API，因此可以在 Less 文件中使用 `@dark-selector` 的全局变量来为主题包的组件增加暗色模式的样式：
+
+```less
+.some-container {
+  // 亮色模式为白色
+  color: #fff;
+
+  // 暗色模式变黑色
+  @{dark-selector} & {
+    color: #000;
+  }
+}
+```
+
+如果是纯 css 文件，可使用[prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)实现。
+
+## SSR <Badge>0.3.9+</Badge>
+
+主题包支持 SSR，`0.3.9` 版本之前 `cssinjs` 样式未做完全兼容，之后版本已修复该问题， ssr 推荐配置：
+
+```ts
+export default defineConfig({
+  ssr: process.env.NODE_ENV === 'development' ? false : {},
+});
+```
+
+:::warning
+在配置为 SSR 时，首页如果使用的是主题包内置的首页模块，在首次加载时会短暂出现 404 路由页面，原因在于内置首页在文档构建时没有导出 `index.html`，因此当路由指向首页时并不会立即加载到对应的资源。解决方式可新建自定义首页，然后引入主题包内置的 `<HomeBaseLayout />` 模块即可，然后打包就导出`index.html`，可参考 [dumi-theme-antd 官网首页](https://github.com/KuangPF/dumi-theme-antd/blob/main/example/.dumi/pages/index/index.tsx)。
+:::
+
+## 构建后为什么没有 `index.html`
+
+使用 `dumi-theme-antd` 主题包后，首页是通过配置产生，没有编写 `index.md`，因此不会生成 `index.html`。如果想要生成 `index.html` 可以添加 `index.md` 或者完全自定义首页，然后引入内置 `HomeBaseLayout` 组件即可。
+
+:::info
+GitHub Pages 部署时，默认会逐级寻找 `index.html` 文件，如果采用 nginx 部署，可以配置 `try_files` 相关参数，当在根目录找不到 `index.html` 时，便去其他目录寻找 `index.html`。
+:::