给你的博客增加评论功能🕶

1,797 阅读3分钟

弱者坐待时机,强者制造时机✨。

1 前言

昨天博客搭建完了之后,突然想到要是有老铁跟我互动应该怎么办啊😶(不知道怎么搭建博客的看我上一篇文章) 我就去fluid的文档里面搜了搜确实有关于博客评论的知识点👍点赞。

2 评论系统选型

文档里面明确说了如果想要应该使用博客评论,应该注意的问题,我在这里引用一下地址

既然作者都说国内用户推荐使用Valine或者Utterances那我就在这两个里面选了一个。下面是这两个评论的截图。

Utterances👆 Utterances👆 Valine👆 Valine👆

通过颜值和实用度来看我选择了Utterances因为我觉得他的样式好看一点。并且还不用像Valine填写用户信息和网址直接只用GitHub账户登陆就可以了✨。

配置

选型选好了之后我们就根据作者提供的文档,以及我们的配置文件也就是_config.fluid.yml修改一下配置文件。

配置文件👆 配置文件配置完之后我们执行一下hexo s命令看看你的文章下面是不是就多出来一个类似与github Issue的评论。我天真的以为这就结束了。但是当我真正评论的时候,他就报错了。是长这个样子的。

翻译过来的大概意思就是你配置的仓库并没有绑定Utterances 如果你想使用这个Utterances就去绑定一下。接下来点击install app。会跳转到绑定安装页面。

点击install 进行下一步操作,他会询问你名下所有的库都绑定Utterances还是只给某个固定的库绑定,我们选择自己的博客,然后点击install,之后会让你输入github密码,我们把正确的密码输入正确就可以啦。 这时我们再次回到自己的博客再次评论发表评论就会发现已经大功告成啦🎁。

扩展

实际上用户在真正评论了之后会在绑定的仓库下面提一个Issue

关闭还是回复就交给你自由发挥啦🎁。

细心的同学可能会发现,我只是评论了为什么发起Issue还默认把路径和文章名称作为评论的标题啊并且还是乱码?🎭这时有两种解决方案。

  • 文章的标题采用中文(有点鸡贼哈)
  • 修改配置文件 怎么修改配置文件呢?我们去utterances的官网,这里是这么说的Blog Post ↔️ Issue Mapping 翻译过来就是文章和Issue的映射。我翻译了一下大概是这样。

我们选择第三个 文章标题和页面标题,不包含路径这是utteranc官网下方的代码会跟着变化。

紧接着我们把_config.fluid.yml文件中的issue-term后面修改为title 再次评论一下,就会发现乱码没有了🎉。

总结

当初以为评论特别简单修改一个配置就可以,后来还是发现自己大意了没有闪😕。网上关于这种的也不是很多,我全是凭着谷歌翻译一点点摸索出来的。还好fluid作者和utterances作者的文档写的比较详细。小生这厢有礼了,下期见🏃‍♂️。