Lufer

  • 首页
  • 编程
  • 学习笔记
  • 日常折腾
Lufer
Code the World
  1. 首页
  2. 编程
  3. 前端
  4. 正文

Dumi使用笔记

2022年6月17日 991点热度 0人点赞 0条评论

Dumi是阿里出的一个文档站生成框架,AntDesign、AntDesign Pro、UmiJS等官网都是用这个框架生成的。

项目结构

一个普通的、使用 dumi 做研发的组件库目录结构大致如下:

<root>
 -docs  组件库文档目录
  --content  内容文件夹
    ---content1.md   内容文档
  --index.md  组件库文档首页(如果不存在,会 fallback 到 README.md)
 -.umirc.ts   配置文件

配置项

在项目根目录创建 .umirc.ts 或 config/config.ts 文件,都可对 dumi 进行配置:

// 配置文件
export default {  
    // 具体配置项
};

对于配置项的更多说明,可以参考官网介绍:https://d.umijs.org/zh-CN/config

配置顶部导航菜单

顶部导航菜单是通过navs来配置的,可以通过children的值来配置子菜单,path的值既可以是markdown路径,也可以是网址。

要特别注意的是,对于驼峰命名的markdown文件,其路径会变成用短横线连接的单词,例如对于HelloWorld.md,其访问路径应该是hello-world。

navs: [
    // null, // null 值代表保留约定式生成的导航,只做增量配置
    {
      title: '指南',
      path: '/getting-started',
    },
    {
      title: '矢量服务',
      path: '/service',
      // 可通过如下形式嵌套二级导航菜单,目前暂不支持更多层级嵌套:
      children: [
        { title: '行政区划边界服务', path: '/service/administrative-border' },
        { title: '烟区规划矢量切片服务', path: '/service/planning-vector' },
        { title: '烟区地块矢量切片服务', path: '/service/landblock-vector' },
      ],
    },
    {
      title: '百度',
      path: 'https://www.baidu.com/',
    },

配置页面侧边栏菜单

顶部导航菜单是通过menus来配置的,这里使用的是markdown文件名。

menus: {
    // 需要自定义侧边菜单的路径,没有配置的路径还是会使用自动生成的配置
    '/guide': [
      {
        title: '菜单项',
        path: '菜单路由(可选)',
        children: [
          // 菜单子项(可选)
          'guide/index.md', // 对应的 Markdown 文件,路径是相对于 resolve.includes 目录识别的
        ],
      },
    ],
    // 如果该路径有其他语言,需在前面加上语言前缀,需与 locales 配置中的路径一致
    '/zh-CN/guide': [
      // 省略,配置同上
    ],
  },

替换CSS

可以通过sytles配置项来手动替换部分CSS样式,下面是替换首页背景图和文字颜色的示例。

styles: [
    `html .__dumi-default-layout-hero {
      padding: 140px 0;
      background: #21144d no-repeat bottom/cover url("/img/index/index-bg.jpg");;
    }
    html .__dumi-default-layout-hero h1 {
      color: #f3f3f3;
      text-shadow: 0 2px 8px rgba(0,0,0,.3);
    }
    html .__dumi-default-layout-hero .markdown {
      color: #eee;
      text-shadow: 0 2px 5px rgba(0,0,0,.3);
    }`,
  ],

静态资源

可以在项目根目录下创建public文件夹并放入静态资源,引用时直接使用相对与public的路径即可引用。

如果在项目运行时没有public文件夹,创建后需重新启动项目才能

标签: 暂无
最后更新:2023年7月10日

Lufer

新的一天开始啦

点赞
< 上一篇

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

文章目录
  • 项目结构
  • 配置项
    • 配置顶部导航菜单
    • 配置页面侧边栏菜单
    • 替换CSS
  • 静态资源

COPYRIGHT © 2022 lufer.cc.

Theme Kratos Made By Seaton Jiang

鲁ICP备2021045819号