上篇博文介绍了 Umami 的静态资源加速，这篇文章讲一下 Artalk 的静态资源加速。
现在要做的就是对外部引用资源的优化，博客现在使用的流量统计方案，以及博客的使用的评论方案，一直以来是托管在腾讯云香港的轻量应用服务器上的，但香港地区的线路越来越差，极其影响体验，遂进行做了一部分优化。
正文
上篇博文介绍了 Umami 的静态资源加速，这篇文章讲一下 Artalk 的静态资源加速。
此方法同样适用于那些服务域名被插件屏蔽的同学。
官方提供了 公共CDN 的静态资源加速的地址：
BootCDN (国内)
ElemeCDN (国内)
CDNJS
https://cdnjs.cloudflare.com/ajax/libs/artalk/2.5.3/Artalk.js
https://cdnjs.cloudflare.com/ajax/libs/artalk/2.5.3/Artalk.css
UNPKG
JS DELIVR
https://cdn.jsdelivr.net/npm/[email protected]/dist/Artalk.js
https://cdn.jsdelivr.net/npm/[email protected]/dist/Artalk.css
这些公共CDN的效果如果不太满意，或者有洁癖，就是想自己托管的话，可以继续看下去。
首先，你需要将使用 Artalk 版本的 CSS/JS 静态资源 保存下来，将其部署到你的 CDN 上。
主要包括两个静态文件：Artalk.css 和 Artalk.js
请注意，不要使用不同 Artalk 版本的相关静态资源。
最开始时，简单部署完毕调用后，才发现调用的代码有所修改，也有所限制。
原有引入静态资源，格式如下：
<!-- CSS -->
<link href="https://yourserversdomain/...../Artalk.css" rel="stylesheet">
<!-- JS -->
<script src="https://yourserversdomain/...../Artalk.js"></script>
<!-- Artalk -->
<div id="Comments"></div>
<script>
add Artalk({ #此处有些修改。
el: '#Comments',
pageKey: '<?= addslashes(get_permalink()) ?>',
pageTitle: '<?= addslashes(get_the_title()) ?>',
server: '<后端地址>',
site: '<?= addslashes(get_bloginfo('name')) ?>',
// ...你的其他配置
})
</script>
其中：
- https://yourserversdomain/…../Artalk.css 为你 Artalk 服务中外部调用 CSS资源 的地址。
- https://yourserversdomain/…../Artalk.js 为你 Artalk 服务中外部调用 JS 资源 的地址。
- 其下的代码，为部署到博客的代码，此处以 WordPress 为例。
而如果希望将 JS资源 托管在他处，则需要引用的 JS资源 所在的位置，请保证这个地址是可用的，以及指明服务所在位置，需要添加 data-host-url 参数，格式如下：
<!-- CSS -->
<link href="https://yourCDNdomain/...../Artalk.css" rel="stylesheet">
<!-- JS -->
<script src="https://yourCDNdomain/...../Artalk.js"></script>
<!-- Artalk -->
<div id="Comments"></div>
<script>
Artalk.init({
el: '#Comments',
pageKey: '<?= addslashes(get_permalink()) ?>',
pageTitle: '<?= addslashes(get_the_title()) ?>',
server: '<后端地址>',
site: '<?= addslashes(get_bloginfo('name')) ?>',
// ...你的其他配置
})
</script>
其中：
- https://yourCDNdomain/…../Artalk.css 为你部署在 CDN 中 Artalk 服务调用 CSS资源 的地址。
- https://yourCDNdomain/…../Artalk.js 为你部署在 CDN 中 Artalk 服务调用 JS资源 的地址。
- 其下的代码，为部署到博客的代码。
此处需要注意：
- 调用CSS和JS资源，需要在发送相关信息之前，建议放到 标签内。
- 原本嵌入到博客中的 add Artalk 部分需修改为 Aartalk.init
除此之外，还需要加速评论使用的表情包等资源，将下列资源部署到 CDN 上：
请注意：
1、请修改第一个项目中 default.json文件 中第84行关于 huaji表情包 的地址。
修改为：https://yourCDNdomain/......../huaji/huaji.json
2、将huaji.json 文件内的 https://cdn.jsdelivr.net/gh/qwqcode/huaji
批量替换为：https://yourCDNdomain/......../huaji
自此常用的资源基本部署完毕。
脚本加速之前属于一来一去，同样差的线路需要体验两次。加速之后，在加载脚本速度上会有质的飞跃，虽然还会向服务所在的域名发送采集到的相应数据，但总体来说速度上还是有明显差距的。