Fluid -5- 解决 live2d 看板娘导致不蒜子失效的问题一起养成写作习惯！这是我参与「掘金日新计划 · 4 月

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

title: Fluid -5- 解决 live2d 看板娘导致不蒜子失效的问题 mathjax: false date: 2021-08-30 19:21:18 tags: [Hexo, Theme, Fluid] categories: [Hexo, Theme, Fluid]

fluid 自带不蒜子统计站点访问人数，但是该功能与 live2d 看板娘冲突，看板娘出现统计就失效，本文记录解决方案。

问题原因

看板娘与不蒜子冲突
不蒜子可以成功加载，看板娘出现就会干掉不蒜子的结果
貌似是会将 busuanzi_container_page_pv, busuanzi_container_site_uv， busuanzi_container_site_pv 三个值的style: display设置为 none
导致事实上不蒜子计数了，但是显示不出来

解决方案

方案一

重新手动加载不蒜子，在 footer 添加总访问量计数

在footer手动重新加载不蒜子统计结果
fluid 1.8 以后支持 footer 配置化，直接修改主题配置文件 _config.fluid.yml 即可：

#---------------------------
# 页脚
# Footer
#---------------------------
footer:
  # 页脚第一行文字的 HTML，建议保留 Fluid 的链接，用于向更多人推广本主题
  # HTML of the first line of the footer, it is recommended to keep the Fluid link to promote this theme to more people
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    <div style="font-size: 0.85rem">
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/vvd_js/duration.js"></script>
    
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span><br></span>	

    <span>总访客&nbsp<span id="busuanzi_value_site_uv"></span>&nbsp人 &nbsp</span>

    <span>访问总量&nbsp<span id="busuanzi_value_site_pv"></span>&nbsp次</span>
    </div>
  '

其中包含了 fluid 链接、站点运行时间、访问量统计

存在的问题

该方法重新在footer加载了不蒜子，但是原始不蒜子没有关闭，使得网页计数会 double
破坏了原始设计架构，不很优雅
不蒜子计数并不稳定
文章统计数还是会消失

方案二

在方案一的基础上修改方案，放弃手动添加计数，使用原生计数

打开 themes -> fluid -> layout -> _partial -> post-meta.ejs
修改 <span id="busuanzi_container_page_pv" style="display: none"> 为：

<span id="busuanzi_container_page_pv_" style="display: true">

打开themes -> fluid -> layout -> _partial -> statistics.ejs
修改 <span id="busuanzi_container_site_pv" style="display: none"> 和 <span id="busuanzi_container_site_uv" style="display: none"> 为：

<span id="busuanzi_container_site_pv_" style="display: true">
# 和
<span id="busuanzi_container_site_uv_" style="display: true">

思路为无脑显示这两个 span，同时破坏原始id，使得其 style 不会被修改为隐藏

相对方案一优势

解决了重复计数的问题
不用在 footer 加上丑陋的代码
出现了文章阅读量计数

存在的问题

修改源代码，也没有优雅到哪去
不蒜子计数不稳定，经常会空着显示在那里，略显尴尬

方案三

方案二已经是不蒜子计数的极限，万恶之源就是不蒜子不太行了，于是换掉不蒜子使用 leancloud

修改主题配置文件，文章计数 source 使用 leancloud

    # 浏览量计数
    # Number of visits
    views:
      enable: true
      # 统计数据来源
      # Data Source
      # Options: busuanzi | leancloud
      source: "leancloud"
      format: "{} 次"

修改主题配置文件，访问计数 source 使用 leancloud

  # 展示网站的 PV、UV 统计数
  # Display website PV and UV statistics
  statistics:
    enable: true

    # 统计数据来源，使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；使用 busuanzi 不需要额外设置，但是有时不稳定，另外本地运行时 busuanzi 显示统计数据很大属于正常现象，部署后会正常
    # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
    # Options: busuanzi | leancloud
    source: "leancloud"

    # 页面显示的文本，{}是数字的占位符（必须包含)，下同
    # Displayed text, {} is a placeholder for numbers (must be included), the same below
    pv_format: "总访问量 {} 次"
    uv_format: "总访客数 {} 人"

修改主题配置文件，配置 leancloud app_id， app_key和 server_url
- server_url 为 leancloud 的 REST API，国际版不用填

  # LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
  # LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
  leancloud:
    app_id: xxxxxxxxxxxx
    app_key: xxxxxxxxxxxxxxxx
    # REST API 服务器地址，国际版不填
    # Only the Chinese mainland users need to set
    server_url: xxxxxxxxxxxxxxxxx

优雅地解决了问题

相对方案二优势

计数稳定，反应快
不会和live2d冲突
不修改源码，优雅得很
访问统计和文章统计都在

存在的问题

代价就是之前不蒜子的计数全部清零

leancloud

此处说明一下 leancloud

leancloud 分为国内版和国际版，对于国内用户来说如果网站ICP备案稳定没有问题，如果备案出问题国内的leancloud便无法提供服务
国内 leancloud：www.leancloud.cn/
国际 leancloud：www.leancloud.app/

参考资料

www.zywvvd.com/notes/hexo/…