前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Fliud -9- 为文章增加 Waline 评论数统计信息显示

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

作者头像
为为为什么
发布2022-08-06 10:30:27
3380
发布2022-08-06 10:30:27
举报
文章被收录于专栏:又见苍岚

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

先置条件

修改思路

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

修改主题

修改 post-meta.ejs

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

代码语言:javascript
复制
  <% 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
代码语言:javascript
复制
new Waline(options);

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

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

效果示例

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

参考资料

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年9月2日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 先置条件
  • 修改思路
  • 修改主题
    • 修改 post-meta.ejs
      • 修改 waline.ejs
      • 效果示例
      • 参考资料
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档