如何使用utterances给静态博客实现评论功能

91次阅读
没有评论

共计 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 给静态博客实现评论功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

正文完
 
丸趣
版权声明:本站原创文章,由 丸趣 2023-08-16发表,共计1746字。
转载说明:除特殊说明外本站除技术相关以外文章皆由网络搜集发布,转载请注明出处。
评论(没有评论)