本篇主要分享什么内容：

• 常用的文档/静态站点生成工具有哪些
• 每个工具有什么特点
• 工具适应场景

• MarkDown
• MDX MarkDown + JSX
• YMAL Front Matter

AndD组件库文档是怎么制作的，使用了什么工具。

以AntD Button组件为例，我们看一下antd组件库的文档页面结构构成和文档生成：

Button文档

Button文档仓库源文件

网站文档仓库源文件

按钮类型

bisheng

特点：

安装

初始化

预览

目录结构

​​ 文件入口

​​ 主页

​​ 防止GitHub Pages忽略以下划线开头的文件

侧边栏

创建 _sidebar.md（支持目录层级嵌套）。

_sidebar.md中页面会自动生成标题和子标题

自定义导航栏

封面

_coverpage.md ​​ 首页全屏展示

可以指定背景图和背景色

可以指定只展示封面

配置

window.$docsify = {

el:'#app', // 根元素

repo:'docsifyjs/docsify/', //Git仓库地址

maxLevel: 6,  // 目录最大层级

loadNavbar: false, // 加载_navbar.md作为导航栏(或者直接指定md路径)

loadSidebar: false, // 加载_sidebar.md作为侧边栏

hideSidebar: true, // 隐藏侧边栏

subMaxLevel: 0, // 在自定义侧边栏中添加目录（最大层级）

auto2top: true, // 页面路径改变时滚动到屏幕顶部

homepage: 'README.md', // ​​ 主页

basePath: '/path/', // 基本路径, 可以将其设置为其他目录或其他域名

relativePath: false, // 如果为 true，则链接是相对于当前上下文的。

coverpage: false, // 封面 默认加载_coverpage.md，也可以指定md路径

logo,

name,

namelink,

markdown, // 自定义渲染MarkDown为HTML 文档

themeColor,

executescript: true,

mergeNavbar: true, // 小屏幕上的导航栏将与侧边栏合并

externallinkTarget: '_self', // default: '_blank' 打开默认连接方式

routerMode: 'history', // default: 'hash' 路由模式

onlyCover: false, // ​​只展示封面

requestHeaders: {    'x-token': 'xxx',  }, // 设置请求资源头

notFoundPage: true, // 加载_404.md 或指定相应的md

vueComponents, // 注册vue组件, 可在md中直接使用

vueGlobalOptions,

vueMounts

}

主题  官方和社区制作的主题

插件  全文检索，谷歌分析，表情符号，第三方脚本支持，图片缩放，在github上编辑，jsfiddler Demo预览，复制到剪切板，Gitalk,  分页和标签等

PWA

SSR

嵌入文件：支持视频， 音频，iframe或代码块，甚至MarkDown

• html标签
• _navbar.md（同样支持目录层级嵌套，展示形式为弹窗）
• 简单轻便
• 没有静态构建的 html 文件
• 多个主题

Docz

安装

运行

开发

创建.mdx文件即可(指定name和route)。

构建

也可以在配置中指定打包输出目录

部署

构建之后可以使用任何静态站点托管服务进行部署。

MDX支持

可以直接引入.jsx/.tsx组件，样式；

内置组件

文档设置

使用YMAL自定义文档设置(也可以自定义属性，用于自定义theme)

CSS预处理器

需要Gatsby提供的能力，安装插件

Typescript支持

如果需要精确控制组件后缀，可以使用​​​ and ​​进行过滤

支持自定义主题

项目配置

基本配置

​​ 页面访问的basePath

​​ 指定组件存放目录

​​ 指定docz解析文件查找路径规则  默认会查找所有扩展名为.mdx的文件

​​ 需要忽略解析的文件

​​ 指定docz build的目录

​​  Header展示title，默认会去package.json中name字段

​​ HTML中meta字段

​​ typescript支持 默认false .mdx文件中需要引入Typescript组件则需要设置

​​ props格式化 供渲染使用，禁用可以提升性能。

​​​ 指定docz配置文件 默认顺序 ​​

​​ 指定公共目录，绝对资源路径会从这个目录下取数据

​​ 点击 Github 按钮时用于编辑文档的分支

​​ devServer地址 默认 '127.0.0.1'

​​ devServer 端口

构建流程

​​ 可指定菜单中文档的顺序

​​ 指定要使用的插件数组

组件和HooksAPI

​​ 将组件传递给 MDX，它们将在您将 Markdown 转换为 html 时使用

​​ 渲染组件并在其中显示代码的可编辑版本

​​ 获取组件并根据组件中属性定义生成属性表的组件

​​ 配合ComponentsProvider使用

​​ 获取所有已解析文档的列表, 当要创建菜单或列表之类的内容时会很有用。

​​ 返回 Docz 构建的菜单

​​ 获取项目配置中项目配置对象

支持自定义插件和MDX插件

使用注意：每次涉及到路由的变化都需要重启生效，遇到缓存问题可以删除.docz文件夹后重启

• Playground
  Playground支持编辑实时渲染，支持函数组件和State
• Props
  组件内的prop-types定义和typescript的Interface会通过转换成表格展示
• 基于MDX进行了封装
• 完全使用Gatsby构建，可以使用Gatsby的插件和工具生态
• 零配置
• Typescript支持

Dumi

组件开发脚手架

静态站点脚手架

运行

构建及部署

目录结构

代码块

jsx和tsx的代码块会被dumi解析为React组件，并进行渲染。

dumi引入组件原则：

像用户一样使用组件：直接引入组件库进行文档demo演示。不仅可以用来调试组件、编写文档，还能用来被用户直接拷贝到项目中使用。dumi会为我们自动创建组件库NPM包->组件库源代码的映射。

外部demo

可以引入外部文件作为demo渲染，并可支持查看demo源代码

直接嵌入渲染

embed Markdow嵌套

组件API自动生成

JS Doc注释 + Typescript类型定义的方式实现组件API自动生成

如何在非-umi-项目中使用-dumi

DEMO理念

• 开箱即用
• 为组件开发而生，支持Markdown扩展，可以渲染组件
• 主题系统，支持自定义渲染样式
• API自动生成，基于Typescript类型定义自动生成组件API
  
  

    以上就是本篇文章【前端组件库文档解决方案】的全部内容了，欢迎阅览 ！ 文章地址：http://ww.kub2b.com/quote/10940.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 企库往资讯移动站http://ww.kub2b.com/mobile/,查看更多