更新: 写一个大型的插件集合, 把我之前对文章中想要的功能全集中进去, 提供按需加载功能, 预计@#$!前完成
开端
因为写文章经常想要看看以前写的是啥, 又怎么改过来的, 所以编写了这个插件, 最早的想法起于十月
详细使用方法可见 hexo-history
效果
右下角尝试一下就好, 配置如下图
简介与发展
最早时想的是能够对比出上一次文章的差异, 所以不知道自己想要什么效果, 执行的流程又是如何, 现在整个核心思想应该是展示旧文章是如何转变为新文章的, 通过删除, 新增, 更改来标注段落
但是到现在,只完成了能够查看以前写的是啥, 最想写的文章更改还差部分, 所以预计将会在面试结束前后完成
编写思路
执行流程
- hexo 注册函数
- vue 挂载, 请求 github 得到内容
- 选择时间, 插入骨架屏到页面
- 在 iframe 中加载dom, 然后返回想要的 dom 节点
- 替换节点, 加载成功
建立整个项目的基础
找到了 git-history 项目, github 相关 api, 然后根据 hexo-helper-live2d, 了解了 hexo 注册方法, 此时正式开始
流程细节
hexo 注册
hexo 可以用 vscode debug, 具体可见 hexo debug
另外, hexo server 的内容似乎用 hexo generate 更新后也不会改变, 所以让我出现不少蜜汁操作
本来使用 after_render:html 参数基本解决插入脚本的问题, 可是想要只让 post 文章中才显示, 所以测试了filter 中的 after_post_render 参数, 在 issue 中了解到应该是新建一个 post 的时候才会调用, 又尝试了其他参数, 和 processor, renderer 等扩展注册, 都没法解决问题, 看来应该只能在执行的时候判断了,现在搁置
如何在插件中使用 vue
- 使用
$mount动态挂载 - 使用 iview 省得手动写组件
遇到的问题
- 用 innerHTML 来替换节点, 发现渲染似乎不变, 改为 dom 节点替换
骨架屏
使用手写的骨架屏方式, 然后注入进去
遇到的问题
- 希望能动态生成
- 用 js 读取文字长度再转为像素, 设定几个div加上css
- 将 p 标签全部转为 span 等行内标签就可以自适应长度, 再用css显示
- 嫌麻烦, 就这样了
请求方式
采用 fetch 请求, 就没必要写回调, 直接 await 清清楚楚, 同时有 sessionstorage, 存储下请求, 防止多次访问
节点渲染
用 iframe 在内部挂载好事件监听load再返回, 力求一致
遇到的问题
- !!!并未解决, 如果换了主题, 之前的资源文件都被删了, 该怎么办
- 放到某个cdn上, 然后手动替换字符串
- 检测节点属性挂载
打包优化
- webpack 使用生产模式
- vue 使用外部 cdn
- 可以把 iview css 分出来, 但没有这么做
超详细流程
从整个执行流程来看, 首先需要一个执行的
- hexo 注册函数, 移动js文件, 修改html文件内容
- vue 挂载, 将组件插入文档中
- 在组件 mounted 时, 请求 github 当前页面的 commit 历史
- 解析 response, 请求 commit 的具体信息, 再根据具体信息找出当前页面的更改信息的url, 这次请求便可得到内容
- base64 decode 获得最终想要的文档, 返回到组件 data 中的 items 属性, 此时组件开始渲染
- 选择想回到的时间, 插入骨架屏到页面
- 在 iframe 中加载dom, 然后返回想要的 dom 节点
- 替换节点, 加载成功