dumi2 导航自定义

这两天准备搞一个组件库，用的是 dumi 官网当前的最新版本，dumi 2 father 4。

然后发现一个问题，在没有配置导航的情况下，@/doc 目录下的一级目录或文件会自动添加到导航栏，@/src 目录下的责不会，只是将第一个组件添加到导航栏了。

可以使用 dumi 配置自定义导航内容：

比如我有一个 Example 组件（src/Example），dumi 的约定式路由，会自动处理它的路由为 components/Example。

在 dumi 配置文件 .dumirc.ts 增加 nav 配置：

代码语言：javascript复制

export default defineConfig({
  ...
  themeConfig: {
    name: '组件库',
    nav: [
      { title: '介绍', link: '/guide' },
      { title: '组件', link: '/components/Example' }, // components会默认自动对应到src文件夹
    ],
  }
});

如果组件库的标题比较长，可以增加自定义样式，让标题可以完整的一行显示：

代码语言：javascript复制

export default defineConfig({
  ...
  styles: [
    `.dumi-default-header-left {
       width: 280px !important;
    }`,
  ],
});

default src 路由 配置 组件库

0 人点赞