waline修改自定义源

为何要更换CDN源

waline默认指定CDN为unpkg,虽然使用外部CDN,在一定程度上减少自身服务器的负担和带宽消耗,但CDN请求有时并不稳定,以导致网页加载时间过长甚至异常。如unpkg获取表情的库有时会无法访问,导致表情无法正常加载。故可以将从外部获取的CDN源下载至本地,统一使用站内的 Web 资源文件,以此来解决外部源不稳定的问题。

以下是对waline系统CDN emojis@1.0.1 (upkg)的举例:

获取CDN资源的详细信息

下载存储表情信息以来指定单个表情的json文件

1
wget https://unpkg.com/@waline/emojis@1.1.0/weibo/info.json

下载图片的详情页html

1
wget https://unpkg.com/@waline/emojis@1.0.1/weibo

下载后可以看到index.html文件中的图片信息以一行多个多维的json数组展示,显然这是不便于提取和阅读的

1
"/weibo/weibo_boy.png":{"path":"/weibo/weibo_boy.png","type":"file","contentType":"image/png","integrity":"sha384-I3svPYFmtrwnFIakOcoXwMbw1hlkk6tzskuL/CbywCGY6+kVjDu1YiKB9exup1jL","size":2349},"/weibo/weibo_bye.png":{"path":"/weibo/weibo_bye.png","type":"file","contentType":"image/png","integrity":"sha384-igQlHvoIQ7L770Cxln245Irba2DwUqk2aa0LUbgyVJ3azqTpuR1e4GoxA8pNQA0f","size":2726},"

提取CDN资源的URL信息

可以通过简单的sed操作修改一下,便于提取和操作

1
2
3
4
5
6
7
8
9
cat index.html |sed 's/</\n</g'|sed 's/>/>\n/g'|grep "weibo"|grep -v "^<" 

weibo_alpaca.png
weibo_angry.png
weibo_annoyed.png
weibo_annoyed_left.png
weibo_annoyed_right.png
......此处省略多个

可以将需要添加的图片放在数组里

1
2
3
4
5
6
img=(weibo_alpaca.png
weibo_angry.png
weibo_annoyed.png
weibo_annoyed_left.png
......此处省略多个
)

下载需要的CDN资源到本地

使用for遍历下载图片到指定的lib文件夹

1
2
3
4
5
for i in ${img[@]}
do

wget -P /root/blog/themes/next/source/lib/@waline/emojis@1.0.1/weibo/ https://unpkg.com/@waline/emojis@1.1.0/weibo/$i
done

修改waline源为本地资源

将waline的源换成自己的本地的资源文件。

1
2
3
4
waline:
# Custom emoji
emoji:
- https://www.mountainmist.work/lib/@waline/emojis@1.0.1/weibo

hexo重新构建

hexo重新进行构建部署

1
hexo clean && hexo g -d 

查看网页获取资源的header URL信息,可以看到已经成功修改了