Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >dumi2 导航自定义

dumi2 导航自定义

作者头像
德顺
发布于 2024-05-28 05:47:04
发布于 2024-05-28 05:47:04
25700
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数: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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
💰手把手教你用VuePress如何快速搭建个人免费网站?
很多人只听过vue,没听过vuepress?它可是新的vue全家桶成员之一,尤雨溪大神于2018年发布。vuepress项目在github上的star数截止发文已经是18.6K了。很多前端程序员困扰没有自己的个人免费小网站,今天投资小达人手把手教你用vuepress快速创建自己的个人小网站,首先简单介绍一下vuepress是用于迅速搭建技术文档网站与个人博客,简单快捷,下面我们一起开启学习vuepress的学习之旅吧!在开启vuepress搭建网站之前,首先上链接:前端投资小达人
前端老鸟
2022/03/07
1.6K0
💰手把手教你用VuePress如何快速搭建个人免费网站?
[保姆级教程]uniapp自定义导航栏
在你的页面 pages.json 配置中,为相应的页面设置 navigationStyle 为 custom,这将隐藏默认的导航栏。
肥晨
2024/07/04
1.9K0
vitepress搭建markdown文档博客
VitePress 是 VuePress 的下一代框架 ,是支持vue 3.0 的 web 网站框架。
周陆军博客
2023/06/06
1.9K0
【Vue H5项目实战】从0到1的自助点餐系统—— 项目页面布局(Vue3.2 + Vite + TS + Vant + Pinia + Nodejs + Mo
今日推荐:机器学习模型从理论到实战|【007-K均值聚类(K-Means)】新闻主题分类
中杯可乐多加冰
2024/12/03
2700
使用 React 开发单页应用的实践
在阅读这篇文章前,推荐一篇“好”文章:如何提高业务系统的稳定性原创 这篇文章见解独到,深入剖析,为保障业务系统稳固运行提供了极具价值的指导。
奇迹_fly
2024/11/28
3090
团队技术文档构建利器vuepress上手实践
最近在尝试一些项目技术文档搭建的工具,看到网上很多人推荐 gitbook,使用后总体感觉良好。无意中发现一款 Vue 驱动的静态站点生成工具 vuepress,看到官网和demo后立即被它的简约灵活所吸引。一个 vuepress 网站是一个由 Vue、Vue Router 和 Webpack 驱动的单页应用。在构建时,创建一个服务端渲染(SSR)的版本,然后通过虚拟访问每一条路径来渲染对应的HTML。
CS逍遥剑仙
2019/10/12
2.5K0
手把手教你用vuepress搭建自己的网站(2)
要让你的网站显示内容, 就需要进行配置, 需要在.vuepress文件夹下新建一个总的配置文件config.js, 这个文件的名字是固定的,即.vuepress/config.js,它导出一个 JavaScript 对象,使用的是Commonjs文件导入导出的规范 如有对 CommonJS 使用疑惑可参考文档:commonJs 使用规范
itclanCoder
2020/10/28
2.7K0
手把手教你用vuepress搭建自己的网站(2)
我问导师,Vue3有没有对应工具来生成漂亮的文档? 用 Vitepress
最近有人在问:小智, Vue3 有没有对应制作文档的工具。于是,我去查了一些资料,发现,Vue3和新的Vite构建工具为我们提供了另一种快速开发静态站点的方法,那就是 Vitepress。
前端小智@大迁世界
2021/04/09
1.8K0
我问导师,Vue3有没有对应工具来生成漂亮的文档? 用  Vitepress
Markdown 拓展-使用 vue.press 生成网站
VuePress V2 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown在新窗口打开 来书写内容(如文档、博客等),然后 VuePress 会帮助你生成一个静态网站来展示它们。
acc8226
2022/05/17
1.6K0
VuePress
第一个坑:我的项目就是依赖webpack 3.6.0同时也是用npm安装依赖,然后继续使用npm安装vuepress,然后执行npx vuepress dev docs的时候报错了,上网查了好久也没有解决问题,最后使用yarn安装vuepress成功了。
庞小明
2019/05/25
1.3K0
如何构建自己的技术博客
拥有自己的技术博客,不仅可以提升自己的技术能力,还可以提升自己的影响力,未来也可能带来一些“睡后”收益。
奋飛
2023/09/01
3900
如何构建自己的技术博客
taro+react导航条组件/自定义底部Tabbar导航
最近在研究taro框架技术,发现官方提供的实例基本都是H5、小程序,对于RN端实例甚少,如是自己就实现了自定义导航栏+tabbar组件,支持自定义背景、颜色、左侧图标、标题居中、搜索框,右侧按钮支持图标/文字/图片,还可以设置样式,红点提示、事件处理
andy2018
2019/11/27
8K1
taro+react导航条组件/自定义底部Tabbar导航
微信小程序自定义顶部导航栏并适配不同机型
在小程序中,顶部导航栏是一个非常重要的组件,它不仅可以方便用户进行页面切换,还可以提高用户体验。默认情况下,小程序的顶部导航栏是由系统自动生成的,我们只能修改一些基本的样式,如背景色、文字颜色等。但是,如果想要实现更加复杂的样式,如自定义图标、自定义背景等,而且在不同的手机屏幕上,导航栏的高度和样式也可能有所不同。因此,我们需要自定义顶部导航栏,以满足我们的设计需求和用户体验。
Front_Yue
2023/12/10
5K3
微信小程序自定义顶部导航栏并适配不同机型
使用 vitepress + github Pages搭建自己的博客网站
VuePress 应该有很多人用过,而 VitePress 是 VuePress 的下一代框架 ,是支持vue 3.0 的 web 网站框架。
测不准
2021/12/06
3.6K0
手把手教你如何自定义 React Native 底部导航栏
如果你觉得 React Navigation 默认 Tab 组件看起来太平淡,或者想创造一些更现代的东西,那么你想法就和我一样。 在本指南中,我将向你演示如何创建自定义标签栏以并与 React Navigation 一起使用。
前端小智@大迁世界
2019/04/25
8.2K0
手把手教你如何自定义 React Native  底部导航栏
用我这套模板,几分钟做出文档网站!
大家好,我是保姆皮,最近我上线了自己的《编程宝典》网站,可以在线阅读我分享过的各种编程学习路线和知识干货。
程序员鱼皮
2024/01/12
7620
用我这套模板,几分钟做出文档网站!
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项目]旺财记账-导航栏
Vitepress网站搭建教程
初始化成功后,使用vscode或webstorm打开文件夹,会看到这些目录。以下是这些目录的含义
Zachoon
2024/04/13
7510
Vitepress网站搭建教程
如何快速搭建好看的个人博客(完整配置与源码)
博客地址 程序员成长指北(http://www.inode.club/) 可以先体验下。
coder_koala
2020/06/11
1.6K0
如何快速搭建好看的个人博客(完整配置与源码)
VuePress搭建项目组件文档
前言 【音乐博客】上线啦! 为什么会想到写文档了呢? 因为一个项目如果没有文档的话,对接难度增加,其次也方便自己看自己的代码,士别三日,代码当刮目相待,方便他人,更方便自己 启发:还是因为同事最近在研究饿了么,然后顺道发现饿了么的文档是跟代码的组件绑在一起,想要抽离出其文档,结果发现耦合性太高,也想着自己的项目也应该有个文档,于是受到启发后,去了解一下发现vuepress还是挺不错的,md写文档 最近一直在二次封装饿了么组件,封装好之后可放在vuepress文档上 网站效果样式 六个方面 1. 下载vu
玖柒的小窝
2021/12/03
5420
VuePress搭建项目组件文档
相关推荐
💰手把手教你用VuePress如何快速搭建个人免费网站?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验