docsify 4.0 发布，支持服务端渲染（SSR）

最新推荐文章于 2023-04-03 21:42:33 发布

weixin_33709590

最新推荐文章于 2023-04-03 21:42:33 发布

阅读量930

点赞数

文章标签： javascript 运维 ViewUI

原文链接：https://juejin.im/post/592d46082f301e005707b900

版权

docsify 是一个无需编译轻量级的文档生成工具，从发布到现在已经有半年多。经历了 110 个版本迭代，在 GitHub 收获 2k 多 stars，能搜索的数据显示有 300 多个项目正在使用 docsify。

docsify 可以让你只需将 md 文档直接部署在 GitHub Pages 然后创建一个 index.html 文件，将工具通过 script 标签引入即可。少量的配置就让你拥有一份精致的文档网站。

这本来是一个我拿来做实验的项目，所以能想到比较有意思的特性都会加进去。比如利用 CSS 变量特性做主题色定制、前段时间很火的 PWA 我也尝试性的加入、还有为 docsify 开发的 vue 代码编辑和预览的工具 vuep。今天我要宣布一个新特性——服务端渲染（SSR）。

效果

先看例子 docsify.now.sh

文档依旧是部署在 GitHub Pages 上，Node 服务部署在 now.sh 里，渲染的内容是从 GitHub Pages 上同步过来的。所以静态部署文档的服务器和服务端渲染的 Node 服务器是分开的，也就是说你还是可以用之前的方式更新文档，并不需要每次都部署。

快速开始

如果你熟悉 now 的使用，接下来的介绍就很简单了。先创建一个新项目，并安装 now 和 docsify-cli。

mkdir my-ssr-demo && cd my-ssr-demo
npm init -y
npm 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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>docsify</title>
  <link rel="icon" href="_media/favicon.ico">
  <meta name="keywords" content="doc,docs,documentation,gitbook,creator,generator,github,jekyll,github-pages">
  <meta name="description" content="A magical documentation generator.">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" title="vue">
</head>
<body>
  <!--inject-app-->
  <!--inject-config-->
</body>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
</html>复制代码

其中  和  为占位符，会自动将渲染后的 html 和配置内容注入到页面上。

现在，你可以运行 npm start 预览效果，如果没有问题就通过 npm run deploy 部署服务。

npm start
# open http://localhost:4000

npm run deploy
# now ...复制代码

最后最后

纪念下这特殊的版本 ?，一晚上实现外加一白天修 bug，还特么是在生日的时候。SSR 都支持了，编译静态文件也不远了，嗯。

如果你觉得 docsify 对你有帮助，或者想对我微小的工作一点资瓷，欢迎给我捐赠。

weixin_33709590

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
docsify 4.0 发布，支持服务端渲染（SSR）

docsify 是一个无需编译轻量级的文档生成工具，从发布到现在已经有半年多。经历了 110 个版本迭代，在 GitHub 收获 2k 多 stars，能搜索的数据显示有 300 多个项目正在使用 docsify。docsify 可以让你只需将 md 文档直接部署在 GitHub Pages 然后创建一个 index.html 文件，将工具通过 script 标签引入即可。少量的配置就让你拥有一...
复制链接

扫一扫