* updated german links * fixed links where `QingWei-Li` should've been `docsifyjs` * naturally excluded donate links and links to private projects like `vuep` unrelated to docsify --- See commit for details. If you have a question, just ask.
2.7 KiB
2.7 KiB
Server-Side Rendering
- siehe https://docsify.now.sh
- Quellcode siehe https://github.com/docsifyjs/docsify-ssr-demo
Warum SSR?
- Bessere SEO
- Damit du dich cool fühlst!
Schnellstart
Installiere now und docsify-cli in deinem Projekt.
npm i now docsify-cli -D
Ändere package.json. Im folgenden Beispiel ist die Dokumentation im ./docs Verzeichnis:
{
"name": "my-project",
"scripts": {
"start": "docsify start . -c ssr.config.js",
"deploy": "now -p"
},
"files": [
"docs"
],
"docsify": {
"config": {
"basePath": "https://docsify.js.org/",
"loadSidebar": true,
"loadNavbar": true,
"coverpage": true,
"name": "docsify"
}
}
}
!> Für basePath ist dies der gleiche wie bei webpack publicPath. Unterstützt werden lokale oder remote Dateien.
Wir können lokale Dateien verwenden, um zu sehen, ob es funktioniert.
npm start
# open http://localhost:4000
Veröffentliche sie!
now -p
Damit hast du SSR Unterstützung für deine Dokumentation.
Eigene Vorlagen
Du kannst eine Vorlage für deine gesammte Seite wie folgt erstellen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docsify</title>
<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/themes/vue.css" title="vue">
</head>
<body>
<!--inject-app-->
<!--inject-config-->
</body>
<script src="//unpkg.com/docsify/lib/docsify.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
</html>
Die Vorlage sollte folgende Kommentare für die Anzeige von Inhalten enthalten:
<!--inject-app--><!--inject-config-->
Einstellungen
Du kannst die Einstellungen in einer speziellen Datei oder in package.json vornehmen:
module.exports = {
template: './ssr.html',
config: {
// docsify config
}
}
Deploy für deinen VPS
Führe docsify start direkt auf deinem Node Server aus, oder schreibe deine eigene Server app mit docsify-server-renderer:
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: 'docsifyjs/docsify'
}
})
renderer.renderToString(url)
.then(html => {})
.catch(err => {})