Hugo 添加站点统计信息


通过不蒜子来统计每个页面的访问量

Hugo 添加站点统计信息

通过不蒜子来统计每个页面的访问量

Mon Nov 12, 2018

1500 Words|Read in about 3 Min|本文总阅读量
Tags: hugo  

不蒜子 是 Bruce 开发的一款轻量级的网页计数器,它的口号是(非官方):

轻量级,但好用。

如果你想尝试不蒜子计数器,可以查阅 不蒜子计数器的介绍文档

不蒜子虽好,但也有一些问题。Bruce 在文档中提到:

我的网站已经运行一段时间了,想初始化访问次数怎么办? 请先注册登录,自行修改阅读次数。

但因为各(qi)种(shi)原(shi)因(lan),注册登录的功能一直没有上线。所以现在,如果用户希望修改初始值,则必须联系 Bruce,让他手工升级。这无疑违背了 geek 的原则。于是这篇文章提出一个非官方的办法,解决这个问题。我们的口号是:

非官方,但好用。

1. 分析问题


不蒜子之所以被成为「geek 的计数器」,就是因为它的安装使用非常简单——只需要加载计数器 js 脚本,以及使用 span 标签显示计数器结果就可以了。其余所有的事情,都交给用户的 css 去控制。因此,自然,这个「所有的事情」也包括了最终显示的值是多少。因此,我们可以在最终显示的数字上做一些手脚。

不蒜子的站点 PV 对应的标签是这样的:

<span id="busuanzi_value_site_pv"></span>

Note


  • PV 即 Page View,网站浏览量
  • 指页面的浏览次数,用以衡量网站用户访问的网页数量。用户没打开一个页面便记录 1 次 PV,多次打开同一页面则浏览量累计。
  • UV 即 Unique Visitor,独立访客数
  • 指 1 天内访问某站点的人数,以 cookie 为依据。1 天内同一访客的多次访问只计为 1 个访客。

    既然如此,我们只需要在页面上用 js 取得这个标签中的值,而后加上一个偏移量作为初始值就可以了。如果使用 jQuery,可以这样做:

    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(
            var busuanziSiteOffset = parseInt(100000);
            function fixCount() {
                if ($("#busuanzi_container_site_pv").css("display") != "none") {
                    $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + busuanziSiteOffset);
                }
            }
        );
    </script>
    

    余下唯一的问题,就是不蒜子的 js 代码,是通过异步的方式加载的。而在其加载完成之前,上述 span 标签会整个被隐藏起来,不可见。于是,这样的朴素的修复就会失效了。

    对付「异步」,一个朴素的处理方式是定期轮询。比如这样:

    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var int = setInterval(fixCount, 100);
            var busuanziSiteOffset = parseInt(10000);
            function fixCount() {
                if ($("#busuanzi_container_site_pv").css("display") != "none") {
                    clearInterval(int);
                    $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + busuanziSiteOffset);
                }
            }
        });
    </script>
    

    2. Hugo 的解法


    在上面的分析中,我们实际上已经有了完整的解法。不过,这样的解法可定制性非常差。试想,在需要修改初始值的时候,都需要深入到代码中去,而后修改 var busuanziSiteOffset = parseInt(10000); 的值。这种事情,想想就令人崩溃。

    对于 Hugo 来说,在站点或主题配置中的变量,可以在主题模版中引用得到。于是,我们可以这样做:

    $ cat config.toml
    
    ...
    [Params]
    ...
    # busuanzi
    busuanzi = true
    busuanzi_site_offset = 100000
    ...
    

    然后将 js 脚本添加到 header 信息中:

    $ cat themes/beautifulhugo/layouts/partials/head_custom.html
    
    {{ if isset .Site.Params "busuanzi" }}
    <!-- 不蒜子 -->
    <script async src="//cdn.busuanzi.ibruce.info/cdn/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <!-- 不蒜子计数初始值纠正 -->
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            var int = setInterval(fixCount, 100);
            var busuanziSiteOffset = {{ .Site.Params.busuanzi_site_offset }}
            function fixCount() {
                if ($("#busuanzi_container_site_pv").css("display") != "none") {
                    clearInterval(int);
                    $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + busuanziSiteOffset);
                }
            }
        });
    </script>
    {{ end }}
    

    添加站点 PVUV

    $ cat themes/beautifulhugo/layouts/partials/footer.html
    
            <p class="credits copyright text-muted">
            &copy;2017-2018
              {{ if .Site.Author.name }}
                {{ if .Site.Author.website }}
                  <a href="{{ .Site.Author.website }}">{{ .Site.Author.name }}</a>
                {{ else }}
                  {{ .Site.Author.name }}
                {{ end }}
              {{ end }}
              &nbsp;&bull;&nbsp;
              {{ .Site.LastChange.Format "January 2,2006" }}
              updated
              {{ if .Site.Title }}
                &nbsp;&bull;&nbsp;
                <a href="{{ "" | absLangURL }}">Home</a>
              {{ end }}
            </p>
            ...
            <p class="credits theme-by text-muted">
            ...
            <span id="busuanzi_container_site_pv">
                本站访问量:<span id="busuanzi_value_site_pv"></span>次
            </span>
            &nbsp;
            <span id="busuanzi_container_site_uv">
                您是本站第 <span id="busuanzi_value_site_uv"></span> 位访问者
            </span>
            </p>
    

    展示效果:

    添加页面 PV

    $ cat themes/beautifulhugo/layouts/partials/postmeta.html
    
    {{ $baseurl := .Site.BaseURL }}
    <div>
        <section id="datecount">
            <h4 id="date"> {{ .Date.Format "Mon Jan 2, 2006" }}</h4>
        </section>
        <h5 id="wc">{{ .FuzzyWordCount }} Words|Read in about {{ .ReadingTime }} Min|本文总阅读量<span id="busuanzi_value_page_pv"></span>次</h5>
        <h5 id="tags">Tags: {{ range .Params.tags }}
            <!--tags前的那个/不要去掉,否则点击链接后无法跳转-->
            <a href="{{ $baseurl }}tags/{{ . | urlize }}/">{{ . }}</a> &nbsp;{{ end }}
        </h5>
    </div>
    

    展示效果:

    大家可以根据自己的审美,功能来定制主题,首先需要对主题的结构,调用等信息清楚,然后再添加自己的改动。

    3. 参考资料



    -------他日江湖相逢 再当杯酒言欢-------

    「真诚赞赏,手留余香」

    杨传胜

    真诚赞赏,手留余香

    使用微信扫描二维码完成支付

    相关文章

    隐藏