avatar
hotlove
2023年04月15日

0

博客评论区的变更史

个人博客的评论区的体验决定了能否更高的转化用户的交互性,能有一个优质的评论体验对作者来说至关重要。所以对于我自己开发的博客主题中的评论区功能优化也变得尤为重要。虽然我的博客没什么看,我也不经常对外宣传,但偶尔如果有人想要评论了却发现没有很好的体验,可能评论就错失了。

介绍

在我初次开始开发博客主题的时候,写的很是匆忙,在那个时候我还是直接使用的 WordPress 自带的评论函数,关于评论区的美化也是很少,对于样式要么在CSS中去写要么需要通过参数的方式添加,放在我的博客主题中极不协调,但好在经过多次的样式优化,看起来也算是协调了,但是对于评论者却很不友好,因为 WordPress 还是使用的 form 标签通过action跳转POST 页面请求的方式提交评论,它没有在用户提交时在前端进行表单项检查,所以导致了你可以任意忘记某一项点击提交,然后经过“漫长”的等待跳转到一个和博客主题极不协调的错误提示页面:“ 你的评论信息 / 内容不能为空。 ”,然后点击返回按钮再经过“漫长”的等待跳回到文章页,这样在页面之间反复跳来跳去,会造成页面访问时间过长和卡顿,在如今Jvascript和ajax技术相对成熟的互联网时代中很不友好,这也让我萌生了自己重构「评论组件」的想法。

存在的问题

  • 没有对前端表单项进行检查,缺失较好体验。
  • 对评论区的样式优化有很大困扰。

初期

于是我开始对「评论组件」进行重构,最初先是做了简单的前端表单项检查,但是对于表单的生成我依然还是使用的 WordPress 的函数,就这样我“将就”着用了一段时间。如果有过 WordPress 开发经验的都明白,它的函数传递参数真的反人类,比如表单前的内容需要传递一个参数,表单后的内容需要传递一个参数,用户名;邮箱;网址等等都要传递不同的参数,这对主题开发想要给评论区增加额外功能的作者造成了很大的困扰,因为你需要在合适的位置去隔断 HTML 来实现你的想法,一不留神很有可能就会缺了一个标签闭合,这样就导致页面混乱。所以我一不做二不休,把自带的评论函数彻底抛弃,使用了 WordPress自带的REST API 的方式去提交、获取评论,单独的组件页面去实现评论区功能的模板。这样可以更优雅的评论和获取内容,也能更方便的对评论功能模块补充、扩展。

但是此时的评论区并没有完全完成,因为对于我的博客评论者很少,所以一些细节方面没有做太多的优化,比如评论者的评论信息不会被自动填充,以至于每次评论都需要重新填写评论者信息,这就会导致很多人不太那么想去多次评论,以及评论发布时没有太多的信息反馈。

存在问题

  • 缺少积极的多次评论体验。
  • 缺少对评论的信息反馈。

现在

针对初期完成的评论区组件重构,我在此基础上优化了细节方面的问题,目前已知的问题如下:

序号问题说明问题导致的情况解决方案
1无法自动填充评论者信息导致会有用户不太愿意多次评论首次评论过后会在本地存储评论者的信息,下一次打开可以直接快速填充评论者的信息,无需重复填写。
2点击评论时没有太健全的信息反馈导致用户以为没有正常发送评论点击发布按钮时会在评论框盒子有一个loading加载圈,待有响应后消失。
3评论后的信息不会及时出现在评论区导致以为没有正常评论上。发布评论成功后评论区会自动重新获取评论。

其实针对第三点,我的希望是直接在当前页面的评论列表中追加元素,可以更优雅的解决问题,同时也能解决服务器压力,但我最终还是使用了重新获取一遍评论,因为在追加元素的内容中有一点不确定性。

以上就是我对我博客评论区组件重构的重构史,当然这也仅限于我当前使用的主题,以后其他的主题可能就直接完成对评论组件的优化。

真诚赞赏,手留余香

文章收录于 技术分享
{{getcomments(99)}}
avatar

{{clist.comment_author}}

{{clist.comment_date}}

{{CommentsUser.reply}}

image
image

爱上迷失的云

现居临沂,非互联网行业

文章标签