启用Typecho原生评论系统替代多说

2017年6月1日起,多说(duoshuo.com)社会化评论系统正式停止提供服务。天博体育APP下载网页版自从转入Typecho以来一直未启用系统自带的评论系统,而使用了多说的评论系统。

采用多说可以不限于单独一个站点的评论帐号登录,在使用多说评论的站点间,信息无缝融合同步,只要有多说的cookies,所有的多说评论框都可以自动登录,直接就可以填写评论内容,省去了每次填写评论姓名邮箱等信息的繁琐。另一个重要的原因是多说支持众多社交账号直接登录,访客在本站进行评论时,可以任选QQ、微博、微信等方式进行登录及分享,省却了另外注册账号的麻烦,一定程度上增加了访客粘性。

自从4月份收到了多说将要停止服务的通知,就开始计划着重新启用Typecho原生评论系统替换多说,但一直忙于各种琐事无暇去修改。因为天博体育APP下载网页版在制作现用模板时就没有考虑使用原生评论,所以重新启用它要考虑融入现有模板。

本来本站使用的多说样式已经被我修改的较为满意了,所以决定还是照着原来的样式写原生评论的CSS。多说六一停运后本站的评论区空白了十几天,日前终于将原生评论启用了,现将修改过程中遇到的一些问题记录一下。

原生评论模板修改

Typecho默认模板中评论部分列评论内容的代码只有一行:

<?php $comments->listComments(); ?>

虽然输出的html已经有比较完善的结构和Class,但还是需要根据自己需要修改一下来适合自己使用,照着typecho的文档http://docs.typecho.org/themes/custom-comments制作好了自己的评论结构,但是运行总是出错,最后查出是把原来的<?php $comments->listComments(); ?>删除了,所以TE文档的意思是在comments.php的顶端 增加

<?php function threadedComments(){}......?>

函数,原list部分代码不变,并不是替换。原生评论包含了很多评论的ID、child-parent关系函数生成样式,所以定制很容易。

评论表情图片

之前使用多说的时候曾从其他站点偷来了“一句话神评论”的js进行小量修改来自己使用,原代码是为多说量身定做的,对于原生评论肯定需要大刀阔斧的修改一下了,对于JS一窍不通的天博体育APP下载网页版又抓紧时间恶补了一些JS知识,把“一句话评论”移植到了原生评论中。其实说白了就是用js替换字符为图片,基本功课做足了后确实很简单。

Typecho并没有原生的评论表情功能,因这个需求搜索到了一款现成的插件:羽中漫步的Smilies1.1.2插件。插件制作的很精美,后台配置项也相当完善,本来想要把“神评论”集成到插件中,而且想要把wordpress风格的文字表情比如“:smile:”换成“[微笑]”,读了插件的源码发现比较容易实现。步骤如下:

\usr\plugins\Smilies\Plugin.php修改Line301内的:smile::cry:等字段全部替换为[微笑][哭泣]等对应的字符,并且Line341中[':smile:']改为['[微笑]'],这个是表情框弹窗的开关按钮。如果并不打算转换到wordpress等其他程序的话,直接按以上步骤修改为汉字即可,这些修改可以提高评论者阅读体验。

如果插件自带的表情数量不满足要求,可以增加其他字符与图片对应替换关系,方法如下:

在Line390行的$arrays = self::parsesmilies();之前插入以下内容,增加替换规则,

$addword = array("[表情一]","[表情二]","[表情三]");
$addimg = array('<img src="1.gif" alt="表情一" title="表情一"/>','<img src="2.gif" alt="表情二" title="表情二"/>','<img src="3.gif" alt="表情三" title="表情三"/>');
$content = str_replace($addword,$addimg,$content);

依照上面对应格式增减,注意把图片地址修改正确。

但是,使用后发现一个现象,就是插件启用后评论框允许了<img>标签,从插件代码中也找到了源头,可这个插件就是在后端处理过程中替换文字标签为图片标签然后再输出到前端的,要想正常显示图片必须开启评论框接受图片标签。这就使天博体育APP下载网页版有点担心了,因为这样就允许了访客在评论内容贴其他的图片,容易破坏评论结构。所以最终决定还是通过自己编写JS通过前台替换文字为图片实现评论表情功能,正好可以与“神评论”写在一起,代码重复利用。

Gravatar头像

评论头像统一启用了Gravatar头像,所以考虑是否启用头像缓存插件,发现羽中还有一个插件(读者墙头像缓存插件),也是很好用。但有个需要斟酌的考虑就是,启用缓存后如果访客当时未设置G头像时被缓存了,然后当时去设置头像,回到本站头像是不会显示新设置的的。所以暂时不启用头像缓存了,期待有更好的解决方案。

上一条考虑过程中又产生了一个想法,写篇Gravatar头像设置教程,给没接触过的朋友参考。于是就写了,点击每一篇文章评论框前面的头像可以跳转到:Gravatar头像设置教程

另外修改了几个系统文件,以后升级typecho(如果还要那么一天)可能还要重新改。

\var\Typecho\Common.php

Line949 修改

$url .= '&amp;d=' . $default; $url .= '&amp;d=retro';

“d”参数代表default,用于Gravatar默认头像类型选择,有以下几个可选值,

留空显示gravatar官方图形

404直接返回404错误状态

mm神秘人(一个灰白头像)

identicon抽象几何图形

monsterid小怪物

wavatar用不同面孔和背景组合生成的头像

retro八位像素复古头像

也可以是一个经过urlencode处理的真实图片地址,用如下代码处理:

urlencode('http://example.com/images/avatar.jpg');

默认评论区评论者的名字带其网址链接,但是在当前窗口打开,需要修改以下文件

\var\Widget\Abstract\Comments.php

Line 376的  '>'改为' target="_blank">'

这样评论者名字上的网站链接就可以在新窗口打开。

回到开头对多说的评价,多说确实是个不可多得的社会化评论系统,虽难免一些小的BUG,但总体来说还是相当人性化的。自从多说发布停止服务的消息后,网上很多声音倡议多说开源,但毕竟也不是必须的,多说团队的未来还是有他们自己的选择的。天博体育APP下载网页版还是发自内心的感谢这个产品及其背后的团队,愿多说一路走好吧!

如果习惯于用云评论系统的朋友,还是有几个其他选择的,国外的Disqus,国内的搜狐畅言、网易云跟帖等,都还是不错的选择,不过经过这次事件,天博体育APP下载网页版还是觉得数据保存在自己手里更加放心。

另外,原多说的评论数据是可以通过插件直接导入typecho原生评论系统的,但想来天博体育APP下载网页版原来的评论系统也并没有太多有价值的内容,所以就不保留了,从新再开始吧,希望到访天博体育APP下载网页版的朋友多多留下宝贵评论!

评论一句
  • [点个赞]
  • [这真是极好的]
  • [朕知道了]
  • [不明觉厉]
  • [涨姿势]
  • [贱人就是矫情]
  • [也真是醉了]
  • [人艰不拆]
  • [你那么萌你家人造吗]
    1. xx
      xx

      [这真是极好的]

    2. 柒小懿

      话说,博主啊,怎么自己集成表情到主题啊,你竟然不写写么[生气]

    3. Sun
      Sun

      [朕知道了]

    4. baby
      baby

      [涨姿势]

  • [点个赞]
  • [这真是极好的]
  • [朕知道了]
  • [不明觉厉]
  • [涨姿势]
  • [贱人就是矫情]
  • [也真是醉了]
  • [人艰不拆]
  • [你那么萌你家人造吗]
  • [微笑][大笑][撇嘴][酷][吐舌][眨眼][阴险][脸红][呆][尴尬][流汗][白眼][难过][生气][折磨][大哭][哭泣][叹气][举手][傲慢][惊恐][惊讶][震惊][拜托][闭嘴][恶魔][亲亲][飞吻][困][睡觉]