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>複製代碼
其中 <!--inject-app--> 和 <!--inject-config--> 爲佔位符，會自動將渲染後的 html 和配置內容注入到頁面上。
如今，你能夠運行 npm start 預覽效果，若是沒有問題就經過 npm run deploy 部署服務。
npm start
# open http://localhost:4000
npm run deploy
# now ...複製代碼
更多玩法
docsify start 實際上是依賴了 docsify-server-renderer 模塊，若是你感興趣，你徹底能夠用它本身實現一個 server，能夠加入緩存等功能。
var Renderer = require('docsify-server-renderer')
var readFileSync = require('fs').readFileSync
// init
var 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 對你有幫助，或者想對我微小的工做一點資瓷，歡迎給我捐贈。
- 1. SSR（服務端渲染）
- 2. 服務端渲染（SSR)
- 3. Vue 服務端渲染（SSR）
- 4. ssr服務端渲染
- 5. 服務端渲染SSR
- 6. 7、SSR（服務端渲染）
- 7. SSR 服務器端渲染
- 8. 服務器端渲染SSR
- 9. ssr服務器端渲染
- 10. 七、SSR（服務端渲染）
- 更多相關文章...
- • 服務端腳本 指南 - 網站建設指南
- • XSLT - 在服務器端 - XSLT 教程
- • Spring Cloud 微服務實戰(三) - 服務註冊與發現
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. SSR（服務端渲染）
- 2. 服務端渲染（SSR)
- 3. Vue 服務端渲染（SSR）
- 4. ssr服務端渲染
- 5. 服務端渲染SSR
- 6. 7、SSR（服務端渲染）
- 7. SSR 服務器端渲染
- 8. 服務器端渲染SSR
- 9. ssr服務器端渲染
- 10. 七、SSR（服務端渲染）