DUmi

官方文档的内容很多，在这里截取最实用的，大概 15 分钟就能搭建完毕了。

1. 初始化站点

初始化一个站点模式的组件库开发脚手架

$ mkdir myapp && cd myapp
$ yarn create @umijs/dumi-lib --site
$ tyarn install
$ yarn start

2. 配置首页

按照landing 定制首页的例子，通过修改数据文件与 less 样式，就可以定义出下面的首页

目录规划

├─ant
│  └─imgs
│  └─antchart.md
│  └─antdesign.md
│  └─antdesignpro.md
│  └─dumi.md
│  └─index.md
│  └─procomponents.md
├─guide
│  └─imgs
│  └─index.md
├─Home
│  └─less
│  └─index.jsx1                 #这是首页
├─html
│  └─index.md
├─modules
│  └─index.md
└─other
│  └─index.md

3. 定义头部导航菜单

修改根目录下的.umirc.ts 。详细内容参考官方文档关于navs的定义。

将null给注释掉，不然会按照目录进行解析。
可以设置二级菜单
文件名一定要用小写，如果用大写，顶部菜单导航会出问题

navs: [
    // null, // null 值代表保留约定式生成的导航，只做增量配置
    {
      title: '常用技巧',
      path: '/guide',
    },
    {
      title: 'Ant相关',
      path: '/ant',
      // 可通过如下形式嵌套二级导航菜单，目前暂不支持更多层级嵌套：
      children: [
        { title: 'AntDesign', path: '/ant/antdesign' },

        { title: 'ProComponents', path: '/ant/procomponents' },

        { title: 'AntChart', path: '/ant/antchart' },

        { title: 'AntDesignPro', path: '/ant/antdesignpro' },

        { title: 'DUmi', path: '/ant/dumi' },
      ],
    },
    {
      title: '常用组件',
      path: '/modules',
    },

    {
      title: 'JS&CSS',
      path: '/html',
    },

    {
      title: '其他',
      path: '/other',
    },

    {
      title: 'Demo',
      path: 'https://adminpro.redhtc.com/',
    },
    {
      title: 'Gitee',
      path: 'https://gitee.com/fanhualei/wukong-mall-learn',
    },
  ],

4. 编写 MD 文件

① 定义导航形式

toc:menu 表示在左侧现实导航，如果删除那么在右侧显示。
title 是一级导航名称，在正文中只能用二级、三级、四级导航

---
title: 基础使用
order: 2
toc: menu
---

② 引用图片

希望在本地用Typora打开可以显示，也希望编译后也可以显示。

每个目录下都有一个imgs文件夹，在程序中这么来引用。一定要加上一个引号。

./imgs/aaa.png

③ 代码块

这部分还比较重要，具体可以参考官方文档

不显示代码块

jsx | pure
// 我不会被渲染为 React 组件

④ 内部组件

详细内容可以去看官方文档

⑤ 嵌套其他 md 文件

dumi 对 HTML 默认的 embed 标签做了扩展，可以在一个 Markdown 文档中嵌入另一个 Markdown 文档的内容：

我们也可以通过 dumi 提供的主题 API 实现内置组件的复写和新增，可访问主题 - 主题开发了解更多。

5. 构建与部署

执行 npm run build 或 npx dumi build 即可对我们的文档站点做构建，构建产物默认会输出到 dist 目录下，我们可以将 dist 目录部署在 now.sh、GitHub Pages 等静态站点托管平台或者某台服务器上。

6. 常见问题

6.1 添加编辑此页

当您在根目录的 package.json 中设置 repository 后，dumi 就会在页面底部生成相应的编辑功能按钮。例如：

"repository": {
    "type": "git",
    "url": "git+https://gitee.com/fanhualei/wukong-mall-learn",
    "branch": "master",
    "platform": "gitee"
  }

gitee 好像不好用

6.2 自动部署

官方文档中有相关描述

利用 Github Action 在每次 master 分支更新后自动部署

6.3 Typroa 下导航不全

在 Typroa 中进行某些编辑时，会自动出现一些特殊格式，这样就造成右侧菜单实现不全。只能在 vscode 中重现编辑。

下面一些操作尽量不要做
- 在一个图片后面回车

7. 实践案例

案例地址

手机端

以上效果参考了蚂蚁金融科技

主要的技术点有：

主图动画效果
页面滚动的动画效果
PC 与移动端切换的样式

① 主图动画效果

是用两个背景图片，以及CSS的动画来实现的。如果在 CSS 中制作动画，首先要定义一个动画，其次要使用这个动画。

② 页面滚动动画

这里使用了Ant Motion的组件。

TweenOne 单元素动画
QueueAnim 进出场动画
TextyAnim 文字动画
OverPack 设置了在屏幕下方 50％时开始播放动画，子级可支持 rc-queue-anim rc-animate rc-tween-one。
BannerAnim Banner 动画

③ 不同屏幕切换

PC 与移动端切换的样式，如果有时间可以看看enquire-js。

主要是通过CSS进行切换的，看下面的代码:

@media screen and (max-width: 767px) {
  // 这里设置了手机端下的效果
}

④ Less 的技巧

使用了变量，例如&-page 会变成 banner5-page 。这个第一次见，今后可以留意一下。

@banner5: banner5;

.@{banner5} {
  & &-page {
    padding: 1px 0 0;
  }

  &-title {
    font-size: 48px;
    line-height: 1.5;
    color: #5f9bf1;
    margin-bottom: 8px;

ant-learning