博客评论功能升级（增加“留言过滤”、“200条之后自动加载”等）

★引子

　　话说两年前（2012年9月），俺对 BlogSpot 博客平台的“评论/留言功能”进行了一次定制。当时增加了“嵌套评论”（两层），增加了“评论中插入图片、超链接、粗体”（采用 BBCode 语法）。
　　最近两年来，博客的访问量大增，因此评论数也大增。尤其是最近一个季度，几乎每篇博文的评论数都超过200条。这就引出几个【易用性】的问题：
1. BlogSpot 平台默认只加载开头200条评论
2. 如果你想看全部评论，要自己去页面底部点击“加载更多”
3. 如果评论数太多（比如超过300条），你需要连续点击好几次“加载更多”，点得手指头都抽筋了（已经有好几个人来抱怨了）
3. 虽然俺在页面上用醒目的红色粗体进行了提示，但是很多粗心的读者并不知道要去点击“加载更多”
4. 如果这些粗心的读者去发评论，（并是在200条之后）他们就以为评论发不出来（已经有好几个人来抱怨了）
5. 已经有好几个热心读者提出建议，要求加入类似论坛的过滤功能（比如：“只看此人”、“不看此人”）

　　虽然俺是个老程序猿，不过捏，Web 界面并不是俺擅长滴。再加上本人也比较懒，所以对上述抱怨也没有及时处理（在此深表道歉）。
　　但是最近几个月，俺自己也受不了了——每次回复评论，都要点击“加载更多”，点得心烦。所以这几天痛下决心，终于把上述几个问题都搞定了。然后顺便也稍微美化一下评论区的界面。

★新增功能清单

◇自动加载200条之后的【所有】评论

　　功能描述
　　如题。

　　前提条件
　　你的浏览器必须开启“JavaScript 脚本功能”（所有主流的浏览器，默认都开启该功能）。
　　如果你把浏览器的 JS 脚本功能给禁用了，打开俺博客界面时，会看到醒目的提示。

　　补充说明
　　如果某篇博文的评论数比较多（比如大于300），你可能需要稍等片刻。为了界面友好，俺在评论区的开头位置会显示一个动态的文字提示，以表面正在加载。

◇评论/留言的过滤功能

　　功能描述
　　目前支持两种过滤：
1. 只看某人的【相关】的评论
（包括：此人的评论、此人回复的评论、回复此人的评论。其它统统都隐藏）
2. 隐藏某人的【相关】评论
（包括：此人的评论、回复此人的评论）
　　在每一条留言的底部，会显示 2-3 个超链接。为了避免超链接太多，影响整个界面的视觉效果，俺目前采用的是“mouse hover”的风格——只有当鼠标移动到这条留言上，才会显示相应的超链接。

　　补充说明
　　如果是【已经】登录过 Google 帐号的用户，可以进行精确的过滤。
　　如果是【没有】登录过 Google 帐号的用户，但是设置了“网名”，俺根据网名进行过滤。这种情况下，【无法区分】“同名用户”。典型的例子就是：俺博客至少有两位长期读者，都用了“忠党爱国”这个网名（一个自称是“网评员”，另一个专门与之抬杠）。
　　对于“匿名用户”，只提供“功能2”，不提供“功能1”（貌似没啥意义）。

　　前提条件
　　你的浏览器必须开启“JavaScript 脚本功能”（所有主流的浏览器，默认都开启该功能）。
　　如果你把浏览器的 JS 脚本功能给禁用了，打开俺博客界面时，会看到醒目的提示。

◇增加新的“自定义语法”

　　功能描述
　　最近2年来，发现不少读者喜欢在评论中粘贴网址。为了方便大伙儿直接点击，俺支持一种新的“自定义语法”——对于评论中的网址，如果两边都是空格或换行，该评论发布后，这个网址会自动变成可点击的超链接。

　　前提条件
　　俺博客评论区的所有“自定义语法”功能都是通过 JS 脚本实现滴——这个自然也不例外。

◇在页面底部增加一个提示框

　　功能描述
　　这是用来显示某些通知信息的。比如当博客的评论加载完之后，会提示一下。
　　为了避免影响阅读，这个提示框只出现在页面最底部，而且会在几秒钟之后自动消失。

　　补充说明
　　对于那些禁用了 JS 脚本的浏览器，这个提示框会一直存在并显示：你的浏览器不支持 JavaScript 脚本, 导致某些功能无法正常显示 :(
　　为啥“提示框会一直存在”？因为提示框的自动消失靠的是 JS 脚本来实现的。

★欢迎热心读者提供反馈

◇帮忙发现新增功能的 Bug

　　上述介绍的这些新功能，都是这几天晚上匆忙赶出来的，而且俺的 CSS 水平基本上属于三脚猫功夫。所以，可能会有一些 Bug。
　　如果你发现了啥问题，敬请告知，俺会非常感谢。

◇帮忙发现浏览器兼容性的 Bug

　　搞过 Web 开发的同学应该明白——要兼容不同浏览器（尤其是老版本 IE），是非常头疼的事情。
　　目前为止，俺只测试了如下几款浏览器：
Firefox 32 for Linux
Chrome 37 for Windows
IE 8
　　初步感觉：新版的 Firefox 和 Chrome，应该没啥问题。至于 IE8，“自动加载评论”和“评论过滤”这两个功能貌似都有问题（估计 IE6 更惨）。解决的希望比较渺茫（IE 对 W3C 标准的实现，太烂了）。有空的话，俺再测试一下新版本的 IE，看看效果如何。希望俺能搞定 IE8 之后的版本。
　　如果你用的浏览器碰到兼容性问题，请帮忙反馈一下，先行谢过。

◇帮忙提出其它建议

　　如果你对本博客的界面功能有啥想法，欢迎在博客留言中告知俺。
　　俺趁着这几天写 JS/CSS 的热情还没消退，再一鼓作气多做些界面完善。

★技术实现

　　如果你自己也是博主，需要了解相关的技术，建议你先自己去看俺博客的 HTML 源代码（“JS 脚本”和“CSS 样式”都包含在其中了）。对于想搞“Web 界面开发”或“Web 界面美化”的同学，看别人页面的源代码是基本功。
　　如果你看了俺博客的 HTML 源代码还是搞不定，可以到本文留言，俺会提供友情支持 :)
　　假如有比较多的人来询问相关的技术实现，俺再单独发一篇帖子作介绍。

俺博客上，和本文相关的帖子（需翻墙）：
博客评论功能升级（智能贴图、图片代理）——兼谈“Web 图片的隐私问题及防范”
博客评论功能升级（“未读”状态、按时间过滤）——兼谈“为啥俺不用其它博客平台”
博客界面升级（增加“界面定制”、“文章目录”、“自动刷评论”、“全屏显示”等）
博客评论功能升级（引入 BBCode 语法），顺便分享一下实现方法

版权声明
本博客所有的原创文章，作者皆保留版权。转载必须包含本声明，保持本文完整，并以超链接形式注明作者编程随想和本文原始地址：
https://program-think.blogspot.com/2014/09/custom-blogger-comment.html?m=0