前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >dumi2 导航自定义

dumi2 导航自定义

作者头像
德顺
发布于 2024-05-28 05:47:34
发布于 2024-05-28 05:47:34
14500
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0
代码可运行

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

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

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default defineConfig({
  ...
  themeConfig: {
    name: '组件库',
    nav: [
      { title: '介绍', link: '/guide' },
      { title: '组件', link: '/components/Example' }, // components会默认自动对应到src文件夹
    ],
  }
});

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default defineConfig({
  ...
  styles: [
    `.dumi-default-header-left {
       width: 280px !important;
    }`,
  ],
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
使用vitepress搭建自己的静态个人博客 || 个人知识库
VitePress 由 Vite 和 Vue 驱动的静态站点生成器 简单、强大、快速。就是你想要的现代 SSG 框架!
心安事随
2024/07/29
4220
使用vitepress搭建自己的静态个人博客 || 个人知识库
手把手教你用vuepress搭建自己的网站(2)
要让你的网站显示内容, 就需要进行配置, 需要在.vuepress文件夹下新建一个总的配置文件config.js, 这个文件的名字是固定的,即.vuepress/config.js,它导出一个 JavaScript 对象,使用的是Commonjs文件导入导出的规范 如有对 CommonJS 使用疑惑可参考文档:commonJs 使用规范
itclanCoder
2020/10/28
2.7K0
手把手教你用vuepress搭建自己的网站(2)
团队技术文档构建利器vuepress上手实践
最近在尝试一些项目技术文档搭建的工具,看到网上很多人推荐 gitbook,使用后总体感觉良好。无意中发现一款 Vue 驱动的静态站点生成工具 vuepress,看到官网和demo后立即被它的简约灵活所吸引。一个 vuepress 网站是一个由 Vue、Vue Router 和 Webpack 驱动的单页应用。在构建时,创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的HTML。
CS逍遥剑仙
2019/10/12
2.5K0
用我这套模板,几分钟做出文档网站!
大家好,我是保姆皮,最近我上线了自己的《编程宝典》网站,可以在线阅读我分享过的各种编程学习路线和知识干货。
程序员鱼皮
2024/01/12
7130
用我这套模板,几分钟做出文档网站!
[保姆级教程]uniapp自定义导航栏
在你的页面 pages.json 配置中,为相应的页面设置 navigationStyle 为 custom,这将隐藏默认的导航栏。
肥晨
2024/07/04
1.7K0
使用 vitepress + github Pages搭建自己的博客网站
VuePress 应该有很多人用过,而 VitePress 是 VuePress 的下一代框架 ,是支持vue 3.0 的 web 网站框架。
测不准
2021/12/06
3.6K0
开发工具总结(15)之Vuepress制作文档并发布到GitHub
转载请标明出处: https://www.jianshu.com/p/307684deff51
AWeiLoveAndroid
2019/07/08
4.1K0
52·[Vue项目]旺财记账-导航栏
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/11/08
1.4K0
52·[Vue项目]旺财记账-导航栏
如何构建自己的技术博客
拥有自己的技术博客,不仅可以提升自己的技术能力,还可以提升自己的影响力,未来也可能带来一些“睡后”收益。
奋飛
2023/09/01
3540
如何构建自己的技术博客
搭建后台管理系统的思路
搭建后台管理系统最基础的是什么呢?个人的体会是整体的基础框架,这个是指最基础的框架,比如根 router-view, 侧边栏以及侧边栏的router-view,以及顶部栏,等基础布局的控制。
公众号---人生代码
2021/05/08
2.9K0
Python项目45-前后端分离Home主页及后台(开撸)
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
5910
Python项目45-前后端分离Home主页及后台(开撸)
Ant Design Umi 项目创建
Umi是什么,我们这里先不介绍,我们下一篇文章再去了解。我们先创建一下它的项目看看。
用户4793865
2023/01/12
1.2K0
Vue3.0入门 + Vant3.0移动端实践(一)
Vue3.0出来了,感觉Vue3.0比2.0好用多啦,且据说性能也有不少的提升,那么今后拥抱Vue3.0吧,会是个趋势。
杨永贞
2021/02/05
2K0
Vue3.0入门 + Vant3.0移动端实践(一)
VuePress
第一个坑:我的项目就是依赖webpack 3.6.0同时也是用npm安装依赖,然后继续使用npm安装vuepress,然后执行npx vuepress dev docs的时候报错了,上网查了好久也没有解决问题,最后使用yarn安装vuepress成功了。
庞小明
2019/05/25
1.3K0
【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + Mo
今日推荐:机器学习模型从理论到实战|【007-K均值聚类(K-Means)】新闻主题分类
中杯可乐多加冰
2024/12/03
2380
Vitepress网站搭建教程
初始化成功后,使用vscode或webstorm打开文件夹,会看到这些目录。以下是这些目录的含义
Zachoon
2024/04/13
6230
Vitepress网站搭建教程
Markdown 拓展-使用 vue.press 生成网站
VuePress V2 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown在新窗口打开 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。
acc8226
2022/05/17
1.5K0
VuePress搭建技术网站与个人博客
②. Docsify / Docute: 同样都是基于 Vue,然而它们都是完全的运行时驱动,因此对 SEO 不够友好
前端达人
2020/05/14
1.7K0
使用 React 开发单页应用的实践
在阅读这篇文章前,推荐一篇“好”文章:如何提高业务系统的稳定性原创 这篇文章见解独到,深入剖析,为保障业务系统稳固运行提供了极具价值的指导。
奇迹_fly
2024/11/28
2680
如何快速搭建好看的个人博客(完整配置与源码)
博客地址 程序员成长指北(http://www.inode.club/) 可以先体验下。
coder_koala
2020/06/11
1.5K0
如何快速搭建好看的个人博客(完整配置与源码)
推荐阅读
相关推荐
使用vitepress搭建自己的静态个人博客 || 个人知识库
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验