给Blogger添加来必力评论系统


搜了一下,没找到在blogger上安装来必力评论系统的教程,自己研究了一下,发觉不太难,达成后,写个教程记录一下。


一、关于评论系统的选择

  • blogger自带的评论系统不太友好,尽管支持匿名评论,但也必须得翻墙,还是希望自己写的文章能有人来评论,于是琢磨着替换blogger自带的评论系统。
  • 期间参考了大佬整理了超详细的第三方评论系统:https://blog.shuiba.co/comment-systems-recommendation,然后最后选择了来必力
  • 之前有考虑过Valine: https://valine.js.org/ (基于Leancloud的极简风评论系统),然后仔细看了下,发觉这个评论系统没有后台,管理起来好像挺麻烦的, 另外没有反垃圾系统。
  • 虽然有大佬给出了升级版:https://panjunwen.com/diy-a-comment-system/ 但是实际配置起来似乎挺麻烦的,我比较懒,于是选择了带后台的来必力。
  • Valine暂做备用吧,如果哪天来必力凉了,就转向Valine

1.来必力的优点如下

  1. 墙内可访问
  2. 使用QQ/微信等社交网站账户登录,免去注册过程。
  3. 后台很方面管理/删除我的评论内容。
  4. 提供邮件提醒
  5. 不会有手机端和PC端浏览同一篇文章,显示的评论不同的问题。

2.注册来必力

来必力官网:https://livere.com/
注册过程就不说了
20190505174051.jpg
20190505174116.jpg

二、获取安装代码

先将以上代码修改一下,分成两部分

代码1:

<div id='lv-container' data-id='city' data-uid='你的data-uid'/>

代码2:

<script type="text/javascript">
   (function(d, s) {
       var j, e = d.getElementsByTagName(s)[0];

       if (typeof LivereTower === 'function') { return; }

       j = d.createElement(s);
       j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
       j.async = true;

       e.parentNode.insertBefore(j, e);
   })(document, 'script');
</script>

三、在blogger上安装

1

打开blogger后台,点击设置—博文、评论和分享—将评论位置设置为「隐藏」
20190505174311.jpg

2

点击主题背景—修改html
20190505174339.jpg

3

找到 <b:includable id='comments' var='post'>...</b:includable>,点一下左边的黑色箭头,展开代码。
将代码1插入到<b:includable id='comments' var='post'>< /b:includable>之间
如下图所示
20190505174422.jpg

4

将代码2,放在</body>之前即可,比如我放在下图这个位置
20190505174510.jpg
最后保存即可
代码2会被Blogger自动转义为XML格式
20190505174612.jpg
打开你的博客看看效果吧!
参考:

此博客中的热门博文

Blogger搭建国内可正常访问博客(超详细教程)