共计 1746 个字符,预计需要花费 5 分钟才能阅读完成。
这篇文章将为大家详细讲解有关如何使用 utterances 给静态博客实现评论功能,丸趣 TV 小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
了解 utterances
utterances 是一款基于 Github Issue 的 Github 工具, 优点主要是无广告、加载快、配置简单,轻量开源! 由于我没有使用过其他评论工具的经验,因此只讲述一下 utterances 自身的优点,具体对比情况无法给出,但是看到有的博主表示之前使用 disqus, 但是广告多,加载也比较慢,体验了一把 utterances 后,马上切换到 utterances。相信 utterances 足够让我使用很久了。
安装 utterances
由于 utterances 是一款 Github App,因此安装 utterances[1]非常简单,只需要授权特定 repo 权限给 utterances 就可以了, 注意一个点:授权的这个 repo 必须是 public 的,可以选择多个 repo,但是建议选择一个就可以了,也比较安全。
给出我授权的 repo 作为参考,我是选择博客的 repo 作为 utterances 评论的存放点(在博客评论的内容都会以 issue 的形式发布在 repo 下).
到目前为止 utterances 就已经安装好了,接下来是需要在博客将评论的客户端显示出来。
配置 utterances 评论显示
可以配置在你希望显示评论的地方,这里给出一个简单的实现:配置在 footer.html 的顶部(显示在每篇文章的底部).
把具体的仓库改成自己授权给 utterances 的仓库即可。
script src= https://utteranc.es/client.js repo= liangyuanpeng/liangyuanpeng.github.io issue-term= title theme= github-light crossorigin= anonymous async /script
这是当前最简单的方式,更优雅的方式是以配置文件的方式实现,例如:
html 中的配置模板
{{ if .Site.Params.utteranc.enable }} script src= https://utteranc.es/client.js repo= {{ .Site.Params.utteranc.repo }} issue-term= {{ .Site.Params.utteranc.issueTerm }} theme= {{ .Site.Params.utteranc.theme }} crossorigin= anonymous async /script {{ end }}
配置文件中的配置项:
## 配置 utteranc 评论, 教程参考 https://utteranc.es/[params.utteranc] enable = false repo = liangyuanpeng/liangyuanpeng.github.io ## 换成自己得 issueTerm = title theme = github-light
这样的话需要修改仓库或者主题都可以很方便的修改一下配置文件就可以了,同时也可以选择不开启评论。
评论显示的主题有多种,具体可以在 utterances 官方 [2] 查看,这里给出当前时间点的一个列表:
1.github-light2.github-dark3.github-dark-orange4.icy-dark5.dark-blue6.photon-dark7.preferred-color-scheme8.boxy-light
映射到 issue 也有几种方式:
1.pathname2.url3.title4.og:title5.issue-number6.specific-term
我选择的是 title 的方式,对应评论会以文章标题作为 issue 的标题创建在对应仓库下。
到目前为止,给 hugo 静态博客添加评论的功能已经做好了,不需要服务器就可以拥有评论功能,实用!
关于“如何使用 utterances 给静态博客实现评论功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。