hexo icarus、golang、google analytics自行实现访问量统计(二)

前言

在上一篇文章中，已经实现了Golang服务端的部分，并且经过了postman的测试。接下来就是修改icarus主题的代码了。
icarus自带的统计是不蒜子，因为是集成的，所以他的样式会跟现有的主题比较契合吧。我要实现的访问统计，并不想让他看起来太突兀，因此也趁这个机会学习一下自带的插件是如何实现的，在原有的位置上加上自己实现的版本。

查看官方的实现

新版的icarus插件并不在主题的目录下，而是单独拆了出来。不过看了波代码，不蒜子插件的内容只不过是在head中引入了script地址，对应的jsx路径是hexo-component-inferno/src/view/plugin/busuanzi.jsx。

原版的统计是在首页footer的位置和非首页文章标题上方，那就任选其一看一下了。
footer.jsx中有这样的定义:

visitorCounterTitle: _p('plugin.visitor_count', '<span id="busuanzi_value_site_uv">0</span>')

前面的plugin.visitor_count是多语言的文本key了，首页对应的是uv、具体的文章页面的是pv，看来复用这两条文本就行了

多语言yml:

visit_count: '%s次访问'
visitor_count: '共%s个访客'

接下来就开始改造了。

coding

界面模板修改

由于是利用google analytics，我就叫插件GACount了。首先就是修改上面的article.jsx和footer.jsx了。
article.jsx在原有的Visitor Count下面添加如下内容：

{!index && plugins && plugins.ga_count === true ? <span class="level-item" id="ga_count_container_page_pv" dangerouslySetInnerHTML={{
__html: _p('plugin.visit_count', '<span id="ga_count_value_page_pv">0</span>')
}}></span> : null}

footer.jsx首先在cacheComponent的return中添加下面内容：

showGACount: plugins && plugins.ga_count === true,
gaCountTitle: _p('plugin.visitor_count', '<span id="ga_count_value_site_uv">0</span>')

记得this.props中添加上面两个变量，然后在原有的模板下面添加：

{showGACount ? <span id="ga_count_container_site_uv"
dangerouslySetInnerHTML={{ __html: gaCountTitle }}></span> : null}
{showGACount ? <br /> : null}

自定义插件

同样，还是不去动node_modules下的任何文件，利用自带的plugin.jsx往header里加我们的代码。
themes/icarus/include/schema/plugin下创建插件的描述ga_count.json

{
    "$schema": "http://json-schema.org/draft-07/schema#",
    "$id": "/plugin/ga_count.json",
    "description": "Ga count plugin",
    "type": "boolean",
    "default": true
}

themes/icarus/include/schema/common/plugins.json properties节点下添加如下内容

"ga_count": {
    "$ref": "/plugin/ga_count.json"
}

在主题的配置yml添加

ga_count:
  true

在layout/plugin下创建ga_count.jsx，通过fetch请求上次做好的golang后端，然后dom操作赋值。
本地测试的话，可以在handler里加入跨域的header，因为我用了caddy、nginx之类的做反向代理所以之前没加。

const { Component, Fragment } = require('inferno');
const { cacheComponent } = require('hexo-component-inferno/lib/util/cache');


class GACount extends Component {
    
    render() {
        let gaCountJs = `document.addEventListener("DOMContentLoaded", function () {
    fetch('后端地址', { method: 'post', body: JSON.stringify({ path: window.location.pathname }) }).then(response => response.json())
        .then(json => {
            let uvElement = document.getElementById('ga_count_value_site_uv');
            if (uvElement) {
                uvElement.innerText = json.uv;
            }
            let pvElement = document.getElementById('ga_count_value_page_pv');
            if (pvElement) {
                pvElement.innerText = json.pv
            }
        })
});`;
        return <Fragment>
            <script dangerouslySetInnerHTML={{ __html: gaCountJs }}></script>
        </Fragment>;


    }
}


GACount.Cacheable = cacheComponent(GACount, 'plugin.ga_count', (props) => {
  if (!props.head) {
    return null;
  }
  return {};
});


module.exports = GACount;

效果预览

footer的效果如下，跟Google Analytics后台对比一下，不知道用户数为啥差了1，不过好像影响不大。


文章效果如下，pv跟后台数据就完全一致了。

小结

折腾了一波总算初步弄好了这个统计。
不过这样默认的样式在移动设备上查看文章，会出现横向的滚动条，个人感觉不是很好看，所以就暂时没弄上线。

下次修改一波样式，再正式放到博客上。