Charles的ACG博客
0%

Hexo人数统计插件不蒜子问题修补

发表于 分类于 | 阅读次数：
随缘更新的Hexo博客的一些基本构建操作2。

引言

  • 毋庸置疑，任何一位博客的博主都希望知道自己博客的真实访问人数。这不是所谓的流量攀比，而是发自内心的对于自己博客是否真的能够吸引他人的一种期待式的评判。而 busuanzi（不蒜子） 这个插件刚好可以满足博主们的这一基本需求。

插件开启

  • 开启插件的方式很简单，只要在 Next 7.80 主题的主题设定文件 _config.yml 里修改如下几行即可：
1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: user
  total_views: true
  total_views_icon: eye
  post_views: true
  post_views_icon: eye

问题排查

  • 然而由于种种原因，这个插件在开启后并没有能够显示在博客的静态网页上。为了寻找问题，我通过 F12/源码检查 对网页的代码进行了检查，发现在 html 中有着这么一行字—— display: none;。如果有的话，恭喜你，你和我的问题是一样的。当然，网上有很多相互抄抄的人只说这不显示和 src= 写错有关系。对此，我表示理解，毕竟人类的本质就是复读机。

  • 事实上，display: none;是一段 css 代码，这是一种展示的默认值，意思是不显示。而 display 还有着如下三种模式：
1
2
3
display: inline;
display: block;
display: block-inline;
  • 其中，inline 和 block-inline 两者是可以在同一行显示的。通常来说，网页代码要去掉后面的 style="display: none;" 才可以正常显示。作为一个完全没有学过前端的咸鱼，我表示自己完全不清楚为什么开发者明明将东西做出来了，却还要加上这句代码使得开发出来的东西不可见。

解决方法

  • 要知道，人类是懒惰的，不可能在每次加载出页面后都用 F12 来删除固定语句，所以我们需要一个一劳永逸的方式。

  • 先打开 \blog\themes\next\layout\_third-party\statistics\busuanzi-counter.swig。在这里我要划重点，这是 Next 7.80 版本的 busuanzi-counter.swig 的文件路径。如果你也是Next 7.80 版本的主题，那就不要去听信那些说是 \blog\themes\next\layout\_third-party\analytics 的人，这些人不是蠢就是坏（比我还蠢）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script{{ pjax }} async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {%- if theme.busuanzi_count.total_visitors %}
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
      </span>
      <span class="site-uv" title="{{ __('footer.total_visitors') }}">
        <span id="busuanzi_value_site_uv"></span>
      </span>
    </span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_visitors and theme.busuanzi_count.total_views %}
    <span class="post-meta-divider">|</span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_views %}
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
      </span>
      <span class="site-pv" title="{{ __('footer.total_views') }}">
        <span id="busuanzi_value_site_pv"></span>
      </span>
    </span>
  {%- endif %}
</div>
{%- endif %}
  • 然后你就会发现以上代码，可以把它整个修改为如下代码（我改的，当然，仅供参考）：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{%- if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
  <script{{ pjax }} async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  {%- if theme.busuanzi_count.total_visitors %}
    <span class="post-meta-item-icon">
      <i class="fa fa-{{ theme.busuanzi_count.total_visitors_icon }}"></i>
    </span>
    <span class="site-uv" title="{{ __('footer.total_visitors') }}">
      总访问人数：<span id="busuanzi_value_site_uv"></span>
    </span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_visitors and theme.busuanzi_count.total_views %}
    <span class="post-meta-divider">|</span>
  {%- endif %}

  {%- if theme.busuanzi_count.total_views %}
    <span class="post-meta-item-icon">
      <i class="fa fa-{{ theme.busuanzi_count.total_views_icon }}"></i>
    </span>
    <span class="site-pv" title="{{ __('footer.total_views') }}">
      总阅读次数：<span id="busuanzi_value_site_pv"></span>
    </span>
  {%- endif %}
</div>
{%- endif %}

  • 而在文章顶端显示的单章访问人数则要在另一个名叫 post.swig 的文件内进行修改，它的目录是：\blog\themes\next\layout\_macro\post.swig。

  • 你可以通过 Ctrl+F 来搜索 busuanzi 从而找到那块代码的确切位置。整段相关代码如下：

1
2
3
4
5
6
7
8
9
{%- if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.post_views %}
<span class="post-meta-item" title="{{ __('post.views') }}" id="busuanzi_container_page_pv" style="display: none;">
    <span class="post-meta-item-icon">
    <i class="fa fa-{{ theme.busuanzi_count.post_views_icon }}"></i>
    </span>
    <span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
    <span id="busuanzi_value_page_pv"></span>
</span>
{%- endif %}
  • 我对于这段代码的修改为：
1
2
3
4
5
6
7
8
{%- if not is_index and theme.busuanzi_count.enable and theme.busuanzi_count.post_views %}
<span class="post-meta-divider">|</span>
<span class="post-meta-item-icon">
    <i class="fa fa-{{ theme.busuanzi_count.post_views_icon }}"></i>
</span>
<span class="post-meta-item-text">{{ __('post.views') + __('symbol.colon') }}</span>
<span id="busuanzi_value_page_pv"></span>
{%- endif %}
  • 可以直接照搬我的修改方式，整体效果可以在我的网页中进行查看。