Fliud -9- 为文章增加 Waline 评论数统计信息显示

本文最后更新于：2021年12月11日 上午

之前我们升级了 Waline 到 1.3.4，已经获得了统计文章浏览量和评论数的能力。本文将该数据显示在文章标题处。

先置条件

修改思路

  • 添加计数相关内容
  • 设置 container，默认隐藏
  • 在创建完 Waline 实例后设置 container 可见

修改主题

修改 post-meta.ejs

修改 themes -> fluid -> layout -> _partial -> post-meta.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <% if (theme.post.meta.views.source === 'leancloud') { %>
    <!-- LeanCloud 统计文章PV -->
    <span id="leancloud-page-views-container" class="post-meta" style="display: none">
      <i class="iconfont icon-eye" aria-hidden="true"></i>
      <%- views_texts[0] %><span id="leancloud-page-views"></span><%- views_texts[1] %>

<span id="waline-comment-count-container" style="display: none">
	&nbsp
	<i class="iconfont icon-comment" aria-hidden="true"></i>
	<span id="test_id_visitor"></span>
</span>

<script>
	path = window.location.pathname
	console.log(path)
	video_html_res = "<span id='" + path + "' class='waline-comment-count'></span>&nbsp评论"
	console.log(video_html_res)
	document.getElementById("test_id_visitor").innerHTML = video_html_res;
</script>

    </span>
  • 其中第 7 -19 行是需要添加的

修改 waline.ejs

  • 修改 themes -> fluid -> layout -> _partial -> comments -> waline.ejs
1
2
3
4
5
6
new Waline(options);

wa_ccc = "waline-comment-count-container"
var i=document.getElementById(wa_ccc)
i.style.display = 'inline'

  • 其中第3 行之后加在 new Waline(options); 之后

效果示例

不得已改了源码，有些丑陋，之后努力优雅实现一下

参考资料