点我
点我
文章目录
  1. 1 关于评论数量的显示,我们可以直接使用多说官网提供的方法,很简单
  2. 2 关于访问量统计这事儿,不太好搞,我找到了这个不蒜子,这位非著名码农自己做的访问统计,哈哈,点个赞
  3. 3 今天还看到了font-awesome,可以显示一些小图标,为了显示效果更好,一并加上去
  • 1 配置评论数量的显示
  • 2 配置文章访问量的显示
  • 3 经过美化后最终的代码
  • 参考文献
  • 致谢
  • 给hexo配置上评论和访问量

    哈哈,我们家笨笨,绝对是我学习技术的很大很大很大大的动力.更开始用github pages的时候,就觉得没法看访问量和评论数量这事,很蛋疼,不过也没折腾.
    今天上午,我们家笨笨说没有评论和访问量不好,都不知道多少人看了.妹子都发话了,果断要搞定.

    google一番找到解决方法:

    1 关于评论数量的显示,我们可以直接使用多说官网提供的方法,很简单

    2 关于访问量统计这事儿,不太好搞,我找到了这个不蒜子,这位非著名码农自己做的访问统计,哈哈,点个赞

    3 今天还看到了font-awesome,可以显示一些小图标,为了显示效果更好,一并加上去

    先展示一下最终的效果:

    页底关于整站访问量的显示
    文章页面关于访问量和评论数量的显示

    下面,开始动手

    1 配置评论数量的显示

    首先,确认你的评论系统用的是多说,如果不是,那就不用继续往下看了(参考这里配置多说).
    我使用的主题是light,其他主题原理类似.我们打开themes/light/layout/_partial/article.ejs,我们在header标签的尾部添加上下面的代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <% if (item.excerpt && index){ %>
    <% } else { %>
    <div class="busuanzi_container_page_pv">
    <span class="head-plus">
    <i class="fa fa-user"></i><span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span>次访问
    </span>
    <span class="head-plus">
    <i class="fa fa-comments"></i><span class="ds-thread-count" data-thread-key="<%= page.layout %>-<%= page.slug %>"><i class="fa fa-spinner fa-spin"></i></span>条评论
    </span>
    </div>
    <% } %>

    最终效果如图

    修改后的article.ejs
    以上代码,是最终成型的代码,我加入了一些美化的东西,最核心的就是

    1
    <span class="ds-thread-count" data-thread-key="<%= page.layout %>-<%= page.slug %>"></span>

    尤其注意data-thread-key的设置,他和你之前配置多说的时候是一致的,每篇文章有一个独一无二的key,你可以去你的themes/light/layout/_partial/comment.ejs里找到关于data-thread-key的内容,直接复制过来即可.

    Ps:这里我们可能还需要配置下数据显示的格式,在你的多说后台管理里面,进入设置界面如图
    多说后台设置
    我们找到暂无评论,1条评论,{num}条评论,这几个设置,修改成自己要的格式,也可以参照我的修改,0,1,{num}

    2 配置文章访问量的显示

    这个更简单了,按照作者的说法,只需要引入一个js,再添加一个span就完成了.由于js一般放置在页面的最底部,所以我们找到themes/light/layout/_partial/after_footer.ejs,我们在最后添加上下面的代码:

    1
    2
    <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
    </script>

    上面就完成了js文件的引入,我们再在要显示访问量的地方添加一个span就行了.比如我想显示在标题的下面,那就打开themes/light/layout/_partial/article.ejs,添加的代码,就是第一步里面添加的那个.如果你想简洁一点,也可以只添加下面核心代码就行:

    1
    2
    3
    本站总访问量<span id="busuanzi_value_site_pv"></span>
    本站访客数<span id="busuanzi_value_site_uv"></span>人次
    本文总阅读量<span id="busuanzi_value_page_pv"></span>

    3 经过美化后最终的代码

    如果只用官方提供的代码,没有优化,很丑,我优化了下,分享一下.

    1.修改themes/light/layout/_partial/article.ejs,在header标签的末尾添加以下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <% if (item.excerpt && index){ %>
    <% } else { %>
    <div class="busuanzi_container_page_pv">
    <span class="head-plus">
    <i class="fa fa-user"></i><span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span>次访问
    </span>
    <span class="head-plus">
    <i class="fa fa-comments"></i><span class="ds-thread-count" data-thread-key="<%= page.layout %>-<%= page.slug %>"><i class="fa fa-spinner fa-spin"></i></span>条评论
    </span>
    </div>
    <% } %>

    修改后的article.ejs
    2.修改themes/light/layout/_partial/footer.ejs,下面是footer.ejs的全部代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="alignleft">
    <% if (config.author){ %>
    &copy; <%= new Date().getFullYear() %> <%= config.author %>
    <% } else { %>
    &copy; <%= new Date().getFullYear() %> <%= config.title %>
    <% } %>
    <span id="busuanzi_container_site_pv">
    <i class="fa fa-flag"></i> 你是第<span id="busuanzi_value_site_pv"><i class="fa fa-spinner fa-spin"></i></span>个到访的小伙伴
    </span>
    </div>
    <div class="clearfix"></div>


    3.修改themes/light/layout/_partial/after_footer.ejs,我们在最后添加上下面的代码:

    1
    2
    <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
    </script>

    4.修改themes\light\source\css\_partial\article.styl,我们在第124行,在.entry之前添加上以下代码,尤其注意与左右的间距,因为它是一个树形结构,它与左侧的距离,影响着它的层级.我们这里应该和entry平级,下面代码应该与.entry对齐

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .busuanzi_container_page_pv
    margin:20px 0
    color: # 817C7C
    font-size: 12px
    # busuanzi_value_page_pv
    padding-left:4px
    .head-plus
    padding-left:4px
    .ds-thread-count
    padding-left:4px

    最终效果如图:
    添加css,注意左对齐
    5.修改themes\light\source\css\_partial\footer.styl,在最后添加上以下代码

    1
    2
    3
    4
    5
    # busuanzi_value_site_pv
    color:black
    padding:4px
    # busuanzi_container_site_pv
    padding-left:2em

    6.修改themes\light\source\css\_partial\variable.styl,在最后添加以下代码

    1
    @import url("http://libs.useso.com/js/font-awesome/4.2.0/css/font-awesome.min.css")

    ok 打完收工

    参考文献

    1 博客访问技术工具–不蒜子 http://ibruce.info/2015/04/04/busuanzi/
    2 多说-代码显示【文章评论数】方法

    致谢

    这里,要感谢我最亲爱的笨笨http://huirong.github.io

    支持一下
    扫一扫,试试看
    • 微信扫一扫
    • 支付宝扫一扫