Hexo next 主题加载自定义 js 文件

Hexo next 主题加载自定义 js 文件

为什么要配置 hexo next 主题自定义 js 文件呢？主要原因有两点：

• 不可靠：加载第三方站点的 js 依赖其站点的稳定性，如果第三方站点给挂了或者不维护了，那么加载的地址就失效了，
  访问直接 404… 比如最近就遇到 next 主题"不蒜子"文章 PV 统计功能用不了了，Chrome 抓包发现 https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js 这个地址 404 了，看了 "不蒜子"官方 blog 通知 才发现原来换成了 https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js。

• 加载速度慢：比如之前将 gitalk 功能用到的 https://rawgit.com/qhh0205/78e9e0b1f3114db6737f3ed8cdd51d3a/raw/3894c5be5aa2378336b1f5ee0f296fa0b22d06e9/md5.min.js 文件嵌入到主题，发现每次打开 blog 网站都加载很慢，Chrome 抓包发现是该文件加载缓慢，一直 pending 很久…

那么解决上面两个问题的办法就是可以将远程加载的 js 文件下载下来，放到本地 netx 主题 source/js/src/ 目录下，让 hexo 生成静态网站时，加载生成静态站点本身的 js。下面举两个例子。

next 主题 gitalk 评论功能加载自定义 js

1. 将 https://github.com/blueimp/JavaScript-MD5/blob/master/js/md5.min.js 文件下载下来放到 themes/next/source/js/src/ 路径下。
2. 修改 themes/next/layout/_third-party/comments/gitalk.swig，加载 md5.min.js 改为 <script src="/js/src/md5.min.js"></script>：

{% if page.comments && theme.gitalk.enable %}
  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="/js/src/md5.min.js"></script>
   <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '3840ba8c8d80c18be7e3',
          clientSecret: '1b00f2efe5285973c24da9ed9ac895775eacc8ea',
          repo: '{
  { theme.gitalk.repo }}',
          owner: '{
  { theme.gitalk.githubID }}',
          admin: ['{
  { theme.gitalk.adminUser }}'],
          id: md5(location.pathname),
          distractionFreeMode: '{
  { theme.gitalk.distractionFreeMode }}'
        })
        gitalk.render('gitalk-container')
    </script>
{% endif %}

next 主题 “不蒜子” PV 统计功能加载自定义 js

1. 将 https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js 文件下载
   下来放到 themes/next/source/js/src/ 路径下。
2. 修改 themes/next/layout/_third-party/analytics/busuanzi-counter.swig，将原先 <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script> 改为 <script async src="/js/src/busuanzi.pure.mini.js"></script>：

{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script async src="/js/src/busuanzi.pure.mini.js"></script>

  {% if theme.busuanzi_count.site_uv %}
    <span class="site-uv">
      {
  { theme.busuanzi_count.site_uv_header }}
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      {
  { theme.busuanzi_count.site_uv_footer }}
    </span>
  {% endif %}

  {% if theme.busuanzi_count.site_pv %}
    <span class="site-pv">
      {
  { theme.busuanzi_count.site_pv_header }}
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      {
  { theme.busuanzi_count.site_pv_footer }}
    </span>
  {% endif %}
</div>
{% endif %}

配置完成后需要 hexo clean && hexo g 生效…

附件

怕以下两个远程站点 js 丢了，在此备份一下吧…
https://github.com/blueimp/JavaScript-MD5/blob/master/js/md5.min.js：

!function(n){
   "use strict";function t(n,t){
   var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function r(n,t){
   return n<<t|n>>>32-t}function e(n,e,o,u,c,f){
   return t(r(t(t(e,n),t(u,f)),c),o)}function o(n,t,r,o,u,c,f){
   return e(t&r|~t&o,n,t,u,c,f)}function u(n,t,r,o,u,c,f){
   return e(t&o|r&~o,n,t,u,c,f)}function c(n,t,r,o,u,c,f){
   return e(t^r^o,n,t,u,c,f)}function f(n,t,r,o,u,c,f){
   return e(r^(t|~o),n,t,u,c,f)}function i(n,r){
   n[r>>5]|=128<<r%32,n[14+(r+64>>>9<<4)]=r;var e,i,a,d,h,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e<n.length;e+=16)i=l,a=g,d=v,h=m,g=f(g=f(g=f(g=f(g=c(g=c(g=c(g=c(g=u(g=u(g=u(g=u(g=o(g=o(g=o(g=o(g,v=o(v,m=o(m,l=o(l,g,v,m,n[e],7,-680876936),g,v,n[e+1],12,-389564586),l,g,n[e+2],17,606105819),m,l,n[e+3],22