关于 docsify ssr 的研究
2024-08-31 03:31:00
关于 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 获取内容, 那么应该可以把获取内容的地方拦截为本地的内容即可, 有时间再研究。
最新文章
- python3 黑板客爬虫闯关游戏(四)
- diff 比较两个文件的差异
- js 滚动加载iframe框中内容
- explode and implode
- .NET中的访问修饰符
- Oracle_11g中解决被锁定的scott用户的方法(转载)
- 发布网站,报Access to the path is denied的解决办法
- 【Kafka入门】Kafka入门第一篇:基础概念篇
- (配置)CKEditor+CKFinder+php上传配置,根据年月命名创建文件夹来存放
- ES6新特性简介
- SCM文章4教训:定时器共阴极LED动态显示屏
- [原]vue实现全选,反选
- 阿里云有对手了!CDN横评:腾讯云优势明显
- IIS7中JS、CSS、Image无法显示和加载解决方案
- Spring data mongodb 聚合,投射,内嵌数组文档分页.
- VM中centos设置子网内虚拟机ip
- HBase数据压缩算法编码探索
- 使用Tenorshare iCareFone for mac为iPhone做系统修复
- Centos 03 基础命令
- tab栏切换案例
热门文章
- [转]十五天精通WCF——第七天 Close和Abort到底该怎么用才对得起观众
- 关于压缩软件gzip和xz的简单对照
- HDU 3572 Task Schedule(ISAP模板&;amp;&;amp;最大流问题)
- 5分钟快速构建苹果IPA免费发布服务器
- ubuntu使用ssh连接远程电脑的方法
- B1208 [HNOI2004]宠物收养所 平衡树||set (滑稽)
- 复习--二叉树&;&;树
- [python基础] Flasky-表单WTForms支持的html字段和内建函数
- 第3课 把文件存入Git文档库
- 关于MFC控件删除出现“具有该ID的控件已存在”这样的情况的解决方案,详细,网上都没有这么详细的,我是“深受其害”,所以想将详细的方法分享出去。