dumi2 导航自定义

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

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

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

比如我有一个 Example 组件(src/Example),dumi 的约定式路由,会自动处理它的路由为 components/Example

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

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

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

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


未经允许不得转载:前端资源网 - w3h5 » dumi2 导航自定义

赞 (1)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)