Dumi是阿里出的一个文档站生成框架，AntDesign、AntDesign Pro、UmiJS等官网都是用这个框架生成的。

项目结构

一个普通的、使用 dumi 做研发的组件库目录结构大致如下：

<root>
 -docs  组件库文档目录
  --content  内容文件夹
    ---content1.md   内容文档
  --index.md  组件库文档首页（如果不存在，会 fallback 到 README.md）
 -.umirc.ts   配置文件

配置项

在项目根目录创建 .umirc.ts 或 config/config.ts 文件，都可对 dumi 进行配置：

// 配置文件
export default {  
    // 具体配置项
};

对于配置项的更多说明，可以参考官网介绍：https://d.umijs.org/zh-CN/config

配置顶部导航菜单

顶部导航菜单是通过navs来配置的，可以通过children的值来配置子菜单,path的值既可以是markdown路径，也可以是网址。

要特别注意的是，对于驼峰命名的markdown文件，其路径会变成用短横线连接的单词，例如对于HelloWorld.md，其访问路径应该是hello-world。

navs: [
    // null, // null 值代表保留约定式生成的导航，只做增量配置
    {
      title: '指南',
      path: '/getting-started',
    },
    {
      title: '矢量服务',
      path: '/service',
      // 可通过如下形式嵌套二级导航菜单，目前暂不支持更多层级嵌套：
      children: [
        { title: '行政区划边界服务', path: '/service/administrative-border' },
        { title: '烟区规划矢量切片服务', path: '/service/planning-vector' },
        { title: '烟区地块矢量切片服务', path: '/service/landblock-vector' },
      ],
    },
    {
      title: '百度',
      path: 'https://www.baidu.com/',
    },

配置页面侧边栏菜单

顶部导航菜单是通过menus来配置的，这里使用的是markdown文件名。

menus: {
    // 需要自定义侧边菜单的路径，没有配置的路径还是会使用自动生成的配置
    '/guide': [
      {
        title: '菜单项',
        path: '菜单路由（可选）',
        children: [
          // 菜单子项（可选）
          'guide/index.md', // 对应的 Markdown 文件，路径是相对于 resolve.includes 目录识别的
        ],
      },
    ],
    // 如果该路径有其他语言，需在前面加上语言前缀，需与 locales 配置中的路径一致
    '/zh-CN/guide': [
      // 省略，配置同上
    ],
  },

替换CSS

可以通过sytles配置项来手动替换部分CSS样式，下面是替换首页背景图和文字颜色的示例。

styles: [
    `html .__dumi-default-layout-hero {
      padding: 140px 0;
      background: #21144d no-repeat bottom/cover url("/img/index/index-bg.jpg");;
    }
    html .__dumi-default-layout-hero h1 {
      color: #f3f3f3;
      text-shadow: 0 2px 8px rgba(0,0,0,.3);
    }
    html .__dumi-default-layout-hero .markdown {
      color: #eee;
      text-shadow: 0 2px 5px rgba(0,0,0,.3);
    }`,
  ],