这两天准备搞一个组件库,用的是 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;
}`,
],
});