Docusaurus 静态站点、文档框架

是什么？

Docusaurus 是一个专注于构建文档的框架，与 Vuepress 定位相同。
由 Facebook 开源，使用 React 来构建

Home: Build optimized websites quickly, focus on your content | Docusaurus

为什么？

• 支持 MDX
• 使用 React 构建
• 功能全、开箱即用
• 内置搜索
• 社区规模较大
  doc 龙是 react 界使用最多的文档生成器（和 vuepress 在 v 圈一个地位）

对比

vitepress
vitepress 自定义度还是不高，并且各方面都在暗示你写 “短文” ，但是只要文档站不复杂，vitepress 已经足够（本文的迁移已经算不是那么简单的文档站），未来 vitepress 肯定还会进一步发展。

实践

workspace

将组件库和 Docusaurus 文档通过 pnpm workspace 的方式来管理，前提是需要将组件库从项目中拆分出去，同样可以按照以下目录结构划分

• uikit （组件库）
• docs（docusaurus文档）
• blog（团队博客）
• weekly（团队周刊）

插件

• docusaurus-plugin-module-alias：别名设置GitHub - atomicpages/docusaurus-plugin-module-alias: A tiny docusaurus 2 plugin for easy module alias creation

参考

• 站点参考
  • Home | Bandwidth API Docs
    • 底部栏的效果不错
  • One Tab Group: Your all-in-one tab/tab group manager for Chrome.
  • CSS星际穿越背景效果
    • canvas星际穿越h5动画背景特效
    • 酷炫CSS3代码时空穿梭动效
    • three.js黑洞穿越动画特效
    • canvas实现3D穿越隧道动画html5代码
  • Mermaid | Diagramming and charting tool
    • logo渐变色
    • 底部Meet The Team

CSS 文件提取

使用 PostCSS 解析CSS AST：

• postcss开发实战 - 掘金
• Postcss 运用以及原理解析 - 简书
• CSS预编译器三剑客（Sass、Less、Stylus）及PostCSS（AST、开发插件）_ChrisP3616的博客-CSDN博客_css预编译器
• Nodejs 下如何读取 sass、scss 和 less 的内容并将它们转成 css 字符串 - 知乎