是一个无需编译轻量级的文档生成工具,从发布到现在已经有半年多。经历了 110 个版本迭代,在 GitHub 收获 2k 多 stars,能搜索的数据显示有 300 多个项目正在使用 docsify。
docsify 可以让你只需将 md 文档直接部署在 GitHub Pages 然后创建一个 index.html
文件,将工具通过 script
标签引入即可。少量的配置就让你拥有一份精致的文档网站。
这本来是一个我拿来做实验的项目,所以能想到比较有意思的特性都会加进去。比如利用 CSS 变量特性做主题色定制、前段时间很火的 PWA 我也尝试性的加入、还有为 docsify 开发的 vue 代码编辑和预览的工具 。今天我要宣布一个新特性——服务端渲染(SSR)。
效果
先看例子
文档依旧是部署在 GitHub Pages 上,Node 服务部署在 now.sh 里,渲染的内容是从 GitHub Pages 上同步过来的。所以静态部署文档的服务器和服务端渲染的 Node 服务器是分开的,也就是说你还是可以用之前的方式更新文档,并不需要每次都部署。
快速开始
如果你熟悉 now
的使用,接下来的介绍就很简单了。先创建一个新项目,并安装 now
和 docsify-cli
。
mkdir my-ssr-demo && cd my-ssr-demonpm init -ynpm i now docsify-cli -D复制代码
配置 package.json
{ "scripts": { "start": "docsify start .", "deploy": "now -p" }, "docsify": { "config": { "basePath": "https://docsify.js.org/", "loadSidebar": true, "loadNavbar": true } }}复制代码
如果你还没有创建文档,可以参考。其中 basePath
为文档所在的路径,可以填你的 docsify 文档网站。
配置可以单独写在配置文件内,然后通过 --config config.js
加载。
渲染的基础模版也可以自定义,配置在 template
属性上,例如
"docsify": { "template": "./ssr.html", "config": { "basePath": "https://docsify.js.org/", "loadSidebar": true, "loadNavbar": true } }复制代码
ssr.html
docsify 复制代码
其中 <!--inject-app-->
和 <!--inject-config-->
为占位符,会自动将渲染后的 html 和配置内容注入到页面上。
现在,你可以运行 npm start
预览效果,如果没有问题就通过 npm run deploy
部署服务。
npm start# open http://localhost:4000npm run deploy# now ...复制代码
更多玩法
docsify start
其实是依赖了 模块,如果你感兴趣,你完全可以用它自己实现一个 server,可以加入缓存等功能。
var Renderer = require('docsify-server-renderer')var readFileSync = require('fs').readFileSync// initvar renderer = new Renderer({ template: readFileSync('./docs/index.template.html', 'utf-8')., config: { name: 'docsify', repo: 'qingwei-li/docsify' }})renderer.renderToString(url) .then(html => {}) .catch(err => {})复制代码
当然文档文件和 server 也是可以部署在一起的,basePath
不是一个 URL 的话就会当做文件路径处理,也就是从服务器上加载资源。
最后最后
纪念下这特殊的版本 ?,一晚上实现外加一白天修 bug,还特么是在生日的时候。SSR 都支持了,编译静态文件也不远了,嗯。如果你觉得 docsify 对你有帮助,或者想对我微小的工作一点资瓷,欢迎给我。