This page looks best with JavaScript enabled

Hugo | 为Mogege主题添加Utterances评论

Utterances,基于github issues,权限更少的轻巧评论区

 ·  ☕ 3 min read

背景提要

给自家男孩子搭博客的时候我向他推荐了Mogeko二次开发的Mogege主题(基于Leavelt主题,现已被作者弃坑)。虽然Mogege主题也被弃坑了,但是简洁好用,去掉了很多实用性不高的功能,而且配置文件有部分汉化,相当适合小白。

但另一方面,当时Mogege的作者正在使用Gitalk。虽然现在由于安全问题已经改用Utterances了,但依旧没有在Mogege主题中显现出来,这就直接导致了config.toml中开箱即用的评论系统只有Gitalk,而DisqusUtterances虽然在html文件中有所体现,但都没有出现在主题配置文件中,更可怜的Disqus连自己的html都没有…实际上LeaveIt的作者似乎没有为主题添加评论功能。

选择Utteranc评论系统的原因

基于 github issues 的评论系统,比较流行的有gitmentgitalk,因为使用的是 GitHub Issue 的 api,不依赖任何第三方平台,而是直接和github仓库绑在一起。言外之意,只要Github不倒闭,你的评论系统就不会被关闭。缺点就是若要登录Github对博客进行评论,索要权限实在过多,而且似乎没有将权限减少的意思,风险确实可能达到能让不怀好意之人通过OAuth冒充登录帐号并删库跑路的程度。

虽然我自己的博客使用的是无后端的Waline评论系统,但是鉴于我已经在Mogege主题仓库中看到Utterances相关的代码了,而且好巧不巧男孩子的Vercel帐号被风控暂时无法登录,机缘巧合下我接触了这款无追踪不保留数据的开源评论系统。

简单的安装步骤

似乎有一个有基于其版本开发的中文版:beaudar,我没有用这个。

在Github中新建一个公开可见的仓库专门用来存放评论,比如名叫Utterances,然后安装Utterances,配置它允许调用的仓库。建议只选择这个新建的Utterances仓库而不是全部仓库。如果想对他的调用权限进行更改,可以去github中的应用页面,点击Utterances右边的Configuration就能更改权限了。

安装后在新的页面中填写你的repo,格式为Username/Utterances,然后预览并选择你喜欢的主题,系统会在下面自动为你提供一个client.js,里面有四个变量分别是repoissue-termthheme和·crossorigin,先记下来不要动。

更改配置文件

根据Mogege主题的github仓库,在这里,也就是layouts/partials/utteranc.html,可以发现这里已经引用了{{ .Site.Params.Utteranc.repo }}(以repo为例)。而在这个html文件的103行又引用了{{ else if .Site.Params.enableUtteranc }}utteranc.html,所以在config.toml文件的最后添加:

1
2
3
4
5
[params.utteranc] # Homepage: https://utteranc.es
    repo = "你的repo" # The repo to store comments
    issueTerm = "你的issueTerm" # the mapping between blog posts and GitHub issues. 
    theme = "你选择的主题" # Theme
    crossorigin = "anonymous" # default: anonymous

这样做还没完,继续在config.toml[params]部分找到enableGitalk = true,在下一行添加:enableUtteranc = true

之后刷新浏览器,就可以快乐地谈笑风生了!


Roelxy
WRITTEN BY
Roelxy
新世紀摸魚戰士