上篇博文介绍了 Umami 的静态资源加速,这篇文章讲一下 Artalk 的静态资源加速。

现在要做的就是对外部引用资源的优化,博客现在使用的流量统计方案,以及博客的使用的评论方案,一直以来是托管在腾讯云香港的轻量应用服务器上的,但香港地区的线路越来越差,极其影响体验,遂进行做了一部分优化。


正文

上篇博文介绍了 Umami 的静态资源加速,这篇文章讲一下 Artalk 的静态资源加速。

此方法同样适用于那些服务域名被插件屏蔽的同学。

官方提供了 公共CDN 的静态资源加速的地址:

BootCDN (国内)

https://cdn.bootcdn.net/ajax/libs/artalk/2.5.3/Artalk.js

https://cdn.bootcdn.net/ajax/libs/artalk/2.5.3/Artalk.css

ElemeCDN (国内)

https://npm.elemecdn.com/[email protected]/dist/Artalk.js

https://npm.elemecdn.com/[email protected]/dist/Artalk.css

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

https://unpkg.com/[email protected]/dist/Artalk.js

https://unpkg.com/[email protected]/dist/Artalk.css

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资源,需要在发送相关信息之前,建议放到 <head> 标签内。
  • 原本嵌入到博客中的 add Artalk 部分需修改为 Aartalk.init

除此之外,还需要加速评论使用的表情包等资源,将下列资源部署到 CDN 上:

  • https://github.com/ArtalkJS/Emoticons
  • https://github.com/qwqcode/huaji

请注意

1、请修改第一个项目中 default.json文件 中第84行关于 huaji表情包 的地址。
修改为:https://yourCDNdomain/......../huaji/huaji.json
2、将huaji.json 文件内的 https://cdn.jsdelivr.net/gh/qwqcode/huaji
批量替换为:https://yourCDNdomain/......../huaji

自此常用的资源基本部署完毕。

脚本加速之前属于一来一去,同样差的线路需要体验两次。加速之后,在加载脚本速度上会有质的飞跃,虽然还会向服务所在的域名发送采集到的相应数据,但总体来说速度上还是有明显差距的。

脚本虽小,但加速与否体验差别挺大。


《使用 CDN 加速 Artalk 静态资源》