关于 docsify ssr 的研究
关于 docsify ssr 的研究
docsify 虽然不错, 但是不支持 seo 。
官网虽然提供 seo 的一个简单示例, 但总总问题在 issues 中无人解答。
今天再次尝试, 解决了 indexOf 和几个相关的报错, 总算可以 ssr 起来了。
但是还有一个时有时无极不稳定的问题不知道怎么解决。
先把之前的研究记录一下, 以免遗忘。
- clone docsify 项目
node ./build/ssr.js
生成packages/docsify-server-renderer/build.js
文件。- 创建 t.js 文件, 内容如下:
// t.js
// ## 方案1
// 1. 搜索引擎走 ssr
// 1. 浏览器走 history
// => 结果导致浏览器刷新时找不到路由, 老大爷来了 history 并不在服务器真实存在
// ## 方案2
// 1. 浏览器也走服务器的 ssr
// => 结果导致服务器负载高、渲染容易出错
const liveServer = require('live-server')
const isSSR = !!process.env.SSR
const middleware = []
if (true) {
const Renderer = require('./packages/docsify-server-renderer/build.js')
const renderer = new Renderer({
template: `
<!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="https://unpkg.com/docsify@4.9.4/lib/themes/vue.css" title="vue">
</head>
<body>
<!--inject-app-->
<!--inject-config-->
<script src="https://unpkg.com/docsify@4.9.4/lib/docsify.min.js"></script>
<script src="https://unpkg.com/docsify@4.9.4/lib/plugins/search.min.js"></script>
</body>
</html>`,
config: {
// routerMode: 'history', // 把用户端的路由也设置为 history 值以保持与收录的一致
name: 'docsify',
repo: 'docsifyjs/docsify',
// basePath: 'https://docsify.js.org/', // 使用其他域名 正常
// basePath: 'http://localhost:2233/', // 本地启动另一个 doc 服务器 404
// basePath: 'docs', // 使用本地 doc 目录 404
basePath: 'https://raw.githubusercontent.com/docsifyjs/docsify/develop/docs/', // 使用 github 正常
// basePath: 'https://raw.githubusercontent.com/wll8/note/master/',
loadNavbar: true,
loadSidebar: true,
subMaxLevel: 3,
auto2top: true,
path: './',
alias: {
'/de-de/changelog': '/changelog',
'/zh-cn/changelog': '/changelog',
'/changelog':
'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG'
}
},
})
middleware.push(function(req, res, next) {
console.log('req.url', req.url)
// var deviceAgent = req.headers["user-agent"].toLowerCase();
// if(deviceAgent.includes('+http')){
// renderer.renderToString(req.url).then(html => res.end(html))
// } else {
// return next()
// }
if (/\.(css|js)$/.test(req.url)) {
return next()
}
renderer.renderToString(req.url).then(html => res.end(html))
})
}
const params = {
port: 3000,
watch: ['lib', 'docs', 'themes'],
open: false,
middleware
}
liveServer.start(params)
node t.js
即可打开 ssr 渲染的页面。
问题简述
虽然可以 ssr 渲染了,但是如果把 basePath
设置成本地目录, 点击其他菜单时就会找不到文件, github 仓库目录虽然能找到文件,
但是速度很慢, 可能 t.js
文件需要先去 github 上请求到 .md
文件, 再渲染为 .html
所以比较慢。
慢也就算了, 却还有一个时有时无的问题, 比如你打开 /a/b/c
这个的文档, 有时候可以渲染出现, 有时候却不能, 有时候又渲染了一半,
不知道是由于 github 的连接速度倒是的还是什么。我在自己的服务器上测试时没有成功, 因为服务器内存太小,安装依赖时总是崩溃。
可能还有其他方案可以尝试
- 继续研究看看是不是 github 速度导致的时有时无的问题, 通过虚拟内存或仅安装所用依赖来在服务器上测试。
- 可以研究下 docsify 提供的 ssr 示例
https://docsify.now.sh/
是如何完成的,他这个看起来还比较正常, 可能有个 build dist 类似的命令可以把 ssr 的东西都渲染成静态 html 文件也说不一定 。
后记
可以直接安装 docsify-server-renderer
// 处理错误: _docsify-server-renderer@4.9.1@docsify-server-renderer/build.js:349:30
// 处理错误: _docsify-server-renderer@4.9.1@docsify-server-renderer/build.js:553:37
经后面实测,发到自己服务器上正常,故与国内访问 github 速度有关。 唉, 仰天而望: 天朝啊!
使用本地文件
另外, 既然他能去 github 获取内容, 那么应该可以把获取内容的地方拦截为本地的内容即可, 有时间再研究。
关于 docsify ssr 的研究的更多相关文章
- 在阿里云 ECS 搭建 nginx https nodejs 环境(三、nodejs)
在阿里云 ECS 搭建 nginx https nodejs 环境(三.nodejs) 在阿里云 ECS 搭建 nginx https nodejs 环境(三.nodejs) 第一步 指定版本源 执行 ...
- SSR分子标记
参考: SSR标记 分子标记开发与筛选之SSR SSR 分子标记开发策略及评价 SSR分子标记在牡丹亲缘关系研究中的应用与研究进展 SSR(Simple Sequence Repeats)标记是近年来 ...
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js
前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...
- docsify网站文档工具用法总结
docsify , 网站文档动态生成工具,类似gitbook 特性 无需构建,写完文档直接发布 容易使用并且轻量 (~19kB gzipped) 智能的全文搜索 提供多套主题 丰富的 API 支持 E ...
- 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染
今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...
- 使用docsify并定制以使它更强大
背景 经常在网上看到一些排版非常漂亮的技术手册,左边有目录栏,右边是Markdown格式的文档,整个配色都十分舒服,就像一本书一样,一看就很让人喜欢.就比如Markdown Preview Enhan ...
- vue ssr 项目改造经历
vue ssr 项目改造经历 由于工作项目需求,需要将原有的项目改造,vue ssr 没有用到nuxt,因为vue ssr更利于seo,没办法,一个小白的改造经历, 首先说明一下,小白可以借鉴,高手也 ...
- 实现ssr服务端渲染demo
最近在研究SSR服务器端渲染,自己写了的小demo. 项目布局 ├── build // 配置文件 │ │── webpack.base // 公共配置 │ │── webpack.clien ...
随机推荐
- array_change_key_case()
定义和用法 array_change_key_case() 函数将指定数组的所有的键进行大小写转换. 如果数组的键(索引)为数字则不发生变化.如果未提供第二个参数,则默认转换为小写. 语法 array ...
- 2015 Changchun Regional
弱没机会去长春,但拿了题来做了,加上请教各路大牛,理论AC了一发,但没实现~(感谢各路有形无形的大牛的指导) A题~Too Rich 给你1,5,10,20,50,100,200,500,1000,2 ...
- UVA 10891 区间DP+博弈思想
很明显带有博弈的味道.让A-B最大,由于双方都采用最佳策略,在博弈中有一个要求时,让一方的值尽量大.而且由于是序列,所以很容易想到状态dp[i][j],表示序列从i到j.结合博弈中的思想,表示初始状态 ...
- HDU 2767-Proving Equivalences(强联通+缩点)
题目地址:pid=2767">HDU 2767 题意:给一张有向图.求最少加几条边使这个图强连通. 思路:先求这张图的强连通分量.假设为1.则输出0(证明该图不须要加边已经是强连通的了 ...
- Atom编辑器折腾记_(15)JS代码片段补全(插件:javascript-snippets)
题外话 这款插件就比較重量级了-.用熟悉了写原生JS的效率要提升非常多--并且,不仅支持JS还包括了nodejs snippet javascript-snippets 插件作者: zenorocha ...
- 编程算法 - 和为s的连续正整数序列 代码(C)
和为s的连续正整数序列 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 输入一个正数s, 打印出全部和为s的连续正数序列(至少含有两个数). 起 ...
- 动态规划---区间dp
今天写内网题,连着写了两道区间dp,这里就总结一下. 区间dp思想主要是先枚举f[i][j]中的i,再枚举j,再枚举一个1~j之间的变量k,一般是f[i][j] = max(f[i][j],f[i][ ...
- 解析HTML文件
#!/usr/bin/env python3 # -*- coding: UTF-8 -*- from bs4 import BeautifulSoup import operator import ...
- Python入门 六、像个 Pythonista
pickle import pickle test_data = ['Save me!',123.456,True] f = file('test.data','w') pickle.dump(tes ...
- Servlet初始化与异步支持
Shared libraries(共享库) / runtimes pluggability(运行时插件能力) 1.Servlet容器启动会扫描,当前应用里面每一个jar包的 ServletContai ...