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

dumi2 导航自定义

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

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

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

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

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

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

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

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

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

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

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

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

评论
登录后参与评论
暂无评论
推荐阅读
【黄啊码】微软IE浏览器将退役 网友说:以后考试报名咋办?
5月16日,微软官方消息称,6月16日,IE(Internet Explorer)浏览器正式退役,此后由Edge(Microsoft Edge)接力。
黄啊码
2022/05/18
3710
【黄啊码】微软IE浏览器将退役 网友说:以后考试报名咋办?
【小技巧】解决你的Mac电脑报名教师资格证,为什么一直进不去?
火狐插件大法 正则表达式,匹配任意地址*.neea.edu.cn/apply/memapp/ieNote
瑞新
2020/07/07
4.7K0
CCleaner-系统清洁工具
导读 CCleaner是清理电脑的头号工具。它保护您的隐私,使您的计算机更快,更安全! 网站地址:https://www.piriform.com/ccleaner 链接:https://pan.baidu.com/s/1o7NPMHW 密码:n72q 使用方法: 1、打开CCleaner。 2、转到“清理程序”选项卡,面临的是一个非常混乱的复选框阵容。 从浏览器中检查想清除的项目以及任何其他建议的程序。如“”在Internet Explorer下检查临时互联网文件,Cookie和上次下载位置。大多数用
企鹅号小编
2018/01/26
7070
Chromium版Edge浏览器已能够开启IE内核兼容模式
尽管微软已决定将 Microsoft Edge 的内核迁移至 Google Chromium,但年迈的 Internet Explorer 并不会很快消失,毕竟许多企业客户专为 IE 打造的应用需求还摆在那。有鉴于此,微软也在积极将 IE 内核集成到 Chromium 版 Edge 浏览器中。据说在最新的 Edge 预览开发编译版本中,测试者们已经可以在浏览器设置中成功开启这项功能。
Zip
2019/07/30
1.3K0
ie兼容性视图在哪里设置win10_ie11兼容性视图设置
在访问一些网站时被告知只能使用IE浏览器进行访问,我个人更新了win11的预览版本之后更是在系统中找不到IE的踪迹,edge中的“兼容性视图”选项并没有直接在设置出显示出来,于是一番努力后我发现了在edge中使用IE兼容性视图的设置方法。
全栈程序员站长
2022/10/04
1.8K0
ie兼容性视图在哪里设置win10_ie11兼容性视图设置
HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用
这是一个文档兼容模式的定义。主要用于加强代码对IE的兼容性,强制IE使用当前本地最新版标准模式渲染或者用chrome内核渲染。
全栈程序员站长
2022/07/08
1.9K0
HTML Meta中添加X-UA-Compatible和IE=Edge,chrome=1有什么作用
IE长跑27年终被弃:从全球市占率95%,到退役下岗Edge接棒
---- 新智元报道   编辑:袁榭 拉燕 【新智元导读】5月中旬,微软Edge浏览器的新浪微博官方账号提醒大家:IE在6月15号就要被退役了。 2022年6月16日,一代人终将记住这一天。 服役27年的IE浏览器将在这一天退役,多少人的关于IE的记忆就此画上句号。 5月16零点整,微软Edge浏览器官方微博表示,将在1个月后,让IE浏览器「光荣退役」。 IE退役,一代人的共同记忆逝去 也难为Edge了,老大哥下岗,自己还得卡着点恭送。 不过,没有功劳也有苦劳,IE浏览器好歹为大家服务了27年
新智元
2022/05/23
5600
IE长跑27年终被弃:从全球市占率95%,到退役下岗Edge接棒
Web Developers : 真的再见了 , IE !
我们想想当年的前端开发,连都没有的时代,拿着JQuery,处理着各种头痛的IE问题,写着各种,就会感慨,这是一个好的时代,各种技术百花齐放,轮子满天飞...
Peter谭金杰
2022/03/22
4380
Web Developers : 真的再见了 , IE !
HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)「建议收藏」
大家好,又见面了,我是你们的朋友全栈君。   之前为大家介绍了些许关于HTML5新添加的小东东,想必大家也有所了解了。今天为大家介绍HTML5中有关HTMLDocument方面新添加的内容。那么HT
全栈程序员站长
2022/09/09
6510
HTML5实战与剖析之HTMLDocument变化(readyreState属性、兼容模式和head属性)「建议收藏」
Microsoft Edge开启IE兼容模式
如何在Microsoft Edge浏览器里开启IE兼容模式 第一步 image.png 在浏览器输入edge://settings/defaultbrowser image.png 第二步 image.png 在浏览器输入edge://settings/appearance image.png 第三步在需要切换ie的页面点击切换按钮 image.png
用户1215037
2022/02/23
4.9K0
【转】http-equiv="X-UA-Compatible" 设置IE浏览器兼容模式详解
文件兼容性用于定义让IE如何编译你的网页。此文件解释文件兼容性,如何指定你网站的文件兼容性模式以及如何判断一个网页该使用的文件模式。
书童小二
2018/09/03
2.1K0
pd虚拟机专用windows系统镜像(m1/intel)
入手了Mac电脑后,由于需要用到Windows软件,又嫌安装双系统太复杂,这时候Mac就用到了安装虚拟机,目前最好用的虚拟机是Parallels Desktop,win镜像版本要根据自己的喜好选对,在此提供分别兼容M1和Intel的win10、11镜像文件。
对影三人
2023/03/28
2.7K0
pd虚拟机专用windows系统镜像(m1/intel)
虚拟机开启就会蓝屏的解决方法是_虚拟机无限蓝屏
禁用该功能,并打开win+X(Windows PowerShell选择管理员),输入 bcdedit /set hypervisorlaunchtype off
全栈程序员站长
2022/10/03
12.8K0
虚拟机开启就会蓝屏的解决方法是_虚拟机无限蓝屏
IE对文档的解析模式及兼容性问题
深入研究这个问题源于最近制作的几个页面,交给前端后,发现在IE8下,对于JS动态控制的内容,页面高度不能够随着动态的调整。
大江小浪
2018/07/25
1.2K0
html如何设置ie6兼容性视图,IE6浏览器兼容性视图设置在哪里[通俗易懂]
大家好,又见面了,我是你们的朋友全栈君。 ie6浏览器算是旧版本了,如果你想要设置兼容性视图,该怎么设置呢?下面由学习啦小编为大家整理了IE6浏览器的兼容性视图设置在哪里的方法,希望对大家有帮助!
全栈程序员站长
2022/10/04
1.9K0
html如何设置ie6兼容性视图,IE6浏览器兼容性视图设置在哪里[通俗易懂]
ie11兼容性视图设置怎么能自动兼容_ie11兼容模式ie8
Edge浏览器已然成为最新win10系统的默认浏览器,但是用户量却远远不及IE11,IE11虽然性能得到了大的改进,但在浏览网页的时候还是会出现一些兼容性的问题,下面小编就讲为大家分享IE 11浏览器网页不兼容的四个有效解决方法。
全栈程序员站长
2022/10/29
2.9K0
ie11兼容性视图设置怎么能自动兼容_ie11兼容模式ie8
ie兼容性视图怎么设置_电脑找不到兼容性视图
许多用户在升级操作系统之后,里面自带的ie浏览器也会跟着一起升级,然而有些网站可能需要使用低版本的ie浏览器才可以打开,该怎么办呢,其实我们只要设置ie兼容性视图模式就可以了,不过很多用户可能还不知道ie兼容性视图设置在哪,为此,小编这就告诉大家ie兼容性视图的详细设置方法。
全栈程序员站长
2022/10/04
2.2K0
ie兼容性视图怎么设置_电脑找不到兼容性视图
计算机保护插件无法安装,电脑无法安装ActiveX控件怎么办「建议收藏」
大家好,又见面了,我是你们的朋友全栈君。 ActiveX控件是网站常用的一款网页辅助工具,有时候我们可能需要安装它,但是却发现浏览器阻止了它安装,那么你知道电脑无法安装ActiveX控件怎么办吗?下面
全栈程序员站长
2022/08/27
3.5K0
计算机保护插件无法安装,电脑无法安装ActiveX控件怎么办「建议收藏」
【一个小功能】从js判断ie版本,浅谈navigator对象的appName属性[通俗易懂]
判断IE版本主要的是获取两个属性,a.当前浏览器名称,b.当前浏览器版本,为此不得不了解navigator对象。
全栈程序员站长
2022/09/07
1.9K0
【一个小功能】从js判断ie版本,浅谈navigator对象的appName属性[通俗易懂]
IE浏览器终于完蛋啦!
大数据文摘授权转载自果壳 作者:Owl、小毛巾 编辑:odette Internet Explorer,也被称为IE的这个古老浏览器,终于要入土为安了。 前几天,微软Edge浏览器在微博上宣布IE浏览器6月16日正式退役。这个曾经与我的文档、我的电脑图标共同霸占电脑桌面的浏览器,终于等来了它的“死期”。 官方带头黑IE|微软Edge浏览器/微博 在互联网刚刚普及的日子里,IE浏览器简直就是上网的代名词。4399小游戏、新闻资讯门户网站、搜索引擎……双击这个蓝色e图标,一度是人们点开拨号上网后的第一选择。
大数据文摘
2022/05/20
9300
IE浏览器终于完蛋啦!
推荐阅读
相关推荐
【黄啊码】微软IE浏览器将退役 网友说:以后考试报名咋办?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档