前言
之前说到,GitHub的服务器在国外较慢,虽然可以使用JSDeliver加速文件,但是效果并不是很明显,速度没有得到明显提升,这篇文章就讲讲怎么利用hexo-offline-popup插件提升博客访问速度,且还能实现博客更新后弹窗提醒的功能。
hexo-offline-popup
hexo-offline-popup 是一个 hexo 插件, 它可加速您的Hexo网站的加载速度,以及网站内容更新弹窗提示。
该插件基于停止维护已久的hexo-service-worker插件,并在它的基础上加以改进。
食用过程
安装
在Hexo根目录打开Git-bash
输入以下指令进行安装:
npm i hexo-offline-popup --save
安装后, 运行 hexo clean && hexo generate
激活插件。
配置
在博客根目录的 _config.yml
中添加以下配置:
# offline config passed to sw-precache.
service_worker:
maximumFileSizeToCacheInBytes: 5242880
staticFileGlobs:
- public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
stripPrefix: public
verbose: true
如果你有CDN资源,例:
- https://cdn.jsdelivr.net/npm/artitalk
将下面的配置追加到刚才添加的配置下面:
runtimeCaching:
- urlPattern: /* # 子路径(接受通配符)
handler: cacheFirst
options:
origin: unpkg.com # 域名
- urlPattern: /npm/* # 子路径(接受通配符)
handler: cacheFirst
options:
origin: cdn.jsdelivr.net # 域名
其中的
origin
填写你的CDN资源即可
上传
执行下列代码激活并使用:
hexo clean
hexo g
hexo deploy
常见问题
1.本地预览无效果
该插件仅部署后生效,本地运行不生效。
2.安装后打开未弹窗
安装插件后首次打开博客不会弹窗,后续更新将会有弹窗。
演示
更新弹窗仅在博客更新时会弹出,因此留了一个弹窗演示站: