图文并茂的帮助文档你值得拥有

lzugis

发布于 2023-10-29 14:41:43

1280

发布于 2023-10-29 14:41:43

文章被收录于专栏：跟牛老师一起学WEBGIS跟牛老师一起学WEBGIS

概述

工作中除了写代码开发需求，也需要写文档，怎么写好一个文档能够让读者既能看懂API，又能快速上述操作，所见即所得。本文基于vitepress、ace-builds带大家实现一个这样好用的帮助文档。

实现效果

在线预览地址：https://lzugis.cn/sdk-examples/leaflet/base.html

实现

vitepress工程的初始化可参考SDK帮助文档生成。

本文在此基础上做了做了优化与扩展，包括：

组件自动导入

在\docs\.vitepress\theme\index.js中添加如下代码：

import { defineAsyncComponent } from 'vue'
const components = import.meta.glob('../vitepress/components/**/*.{vue,ts,tsx}')

export default {
  ...DefaultTheme,
  enhanceApp(ctx) {
    DefaultTheme.enhanceApp(ctx)
    // 注册所有组件
    for (const [key, component] of Object.entries(components)) {
      const name = key.match(/\/([^\/]+)\.vue$/)?.[1] ?? ''
      ctx.app.component(name, defineAsyncComponent(component))
    }
  },
}