前端组件站点生成工具

优秀的前端站点文档

前端的小伙伴可能在看antd或者vue等站点的时候发现他们的技术文档站点很不错，那么这些站点都是使用了哪些工具呢？下面我们就列举下常用的站点生成工具。

dumi- 为组件开发场景而生的文档工具

上面的标题已经说明了dumi的使用场景了，详细的大家可以访问它的官网 这个主题看下面的截图你就会发现你很熟悉，阿里系的文档长点应该是大都这样子，官方给出了三套主题：

dumi-theme-default

• 仓库地址： dumi/packages/theme-default
• 体验地址： dumi 官网
• 主题简介： dumi 的内置主题

dumi-theme-mobile

• 仓库地址： dumi/packages/theme-mobile

• 体验地址：（缺失）

• 主题简介： 基于 dumi 默认主题扩展的移动端研发主题，特性如下：

  1. sticky 手机模拟容器 + iframe 预览 demo
  2. 基于 umi-hd 为 demo 预览提供 viewport 和 root font-size 的自动设置
  3. 提供二维码便于真机预览

dumi-theme-tuya

• 仓库地址： https://github.com/youngjuning/dumi-theme-tuya
• 文档地址： https://dumi-theme-tuya.js.org/dumi-theme-tuya/
• 体验地址： Tuya Design
• 主题简介： 涂鸦文档平台主题

docsify — 神奇的文档站点生成器。

这个工具大家也会很熟悉如果你打开官网，vue的技术文档跟它很像。下面是官方的描述：

概述

docsify 可以快速帮你生成文档网站。不同于 GitBook、Hexo 的地方是它不会生成静态的 .html 文件，所有转换工作都是在运行时。如果你想要开始使用它，只需要创建一个 index.html 就可以开始编写文档并直接部署在 GitHub Pages。

特性

• 无需构建，写完文档直接发布
• 容易使用并且轻量 (压缩后 ~21kB)
• 智能的全文搜索
• 提供多套主题
• 丰富的 API
• 支持 Emoji
• 兼容 IE11
• 支持服务端渲染 SSR (示例)

主题

目前提供三套主题可供选择，模仿 Vue 和 buble 官网订制的主题样式。还有 @liril-net 贡献的黑色风格的主题。其他还有大家可以去官网详细查看。

Rocket—带有少量 JavaScript 的静态网站的现代 Web 设置

这个工具国内使用的较少，整体上来说界面比较的清爽，上述的两个大家使用的较多 ，这里放在这里给大家多一个选择，大家可以看看官网

概述

元框架：建立在像 Eleventy、Rollup 和 Modern Web 这样的巨头之上。 强大的默认模板：提供内容，您就可以开始了。 小：没有夸张的工具或前端框架，仅在需要的页面上添加 JavaScript 和/或 Web 组件。