Fluid -5- 解决 live2d 看板娘导致不蒜子失效的问题

本文最后更新于:2022年8月5日 晚上

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

问题原因

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

解决方案

方案一

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

  • 在footer手动重新加载不蒜子统计结果

  • fluid 1.8 以后支持 footer 配置化,直接修改主题配置文件 _config.fluid.yml 即可:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#---------------------------
# 页脚
# 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"> 为:
1
<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"> 为:
1
2
3
<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
1
2
3
4
5
6
7
8
9
# 浏览量计数
# Number of visits
views:
enable: true
# 统计数据来源
# Data Source
# Options: busuanzi | leancloud
source: "leancloud"
format: "{} 次"
  • 修改主题配置文件,访问计数 source 使用 leancloud
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 展示网站的 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_idapp_keyserver_url
    • server_url 为 leancloud 的 REST API, 国际版不用填
1
2
3
4
5
6
7
8
# 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:https://www.leancloud.cn/
  • 国际 leancloud:https://www.leancloud.app/

参考资料


Fluid -5- 解决 live2d 看板娘导致不蒜子失效的问题
https://www.zywvvd.com/notes/hexo/theme/fluid/fluid-live2-busuanzi-err/fluid-live2-busuanzi-err/
作者
Yiwei Zhang
发布于
2021年8月30日
许可协议