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

时间 2019-11-17

标签 docsify 4.0 发布支持服务渲染 ssr 繁體版

原文原文链接

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

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

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

效果

先看例子 docsify.now.shgit

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

快速开始

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

mkdir my-ssr-demo && cd my-ssr-demo
npm init -y
npm i now docsify-cli -D复制代码

配置 package.jsonjson

{
  "scripts": {
    "start": "docsify start .",
    "deploy": "now -p"
  },
  "docsify": {
    "config": {
      "basePath": "https://docsify.js.org/",
      "loadSidebar": true,
      "loadNavbar": true
    }
  }
}复制代码

若是你尚未建立文档，能够参考以前的文章。其中 basePath 为文档所在的路径，能够填你的 docsify 文档网站。缓存

配置能够单独写在配置文件内，而后经过 --config config.js 加载。bash

渲染的基础模版也能够自定义，配置在 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 对你有帮助，或者想对我微小的工做一点资瓷，欢迎给我捐赠。

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

效果

快速开始

更多玩法

最后最后