关于博客:给hugo博客添加评论功能

7次阅读

共计 1633 个字符,预计需要花费 5 分钟才能阅读完成。

原因

动态博客不像动静博客一样想要什么性能就写个代码实现,然而折腾一番还是能够满足日常需要的。本文次要讲述应用 utterances 给动态博客实现评论性能。

理解 utterances

utterances是一款基于 Github Issue 的 Github 工具, 长处次要是无广告、加载快、配置简略,轻量开源! 因为我没有应用过其余评论工具的教训,因而只讲述一下 utterances 本身的长处,具体比照状况无奈给出,然而看到有的博主示意之前应用 disqus, 然而广告多,加载也比较慢,体验了一把utterances 后,马上切换到utterances。置信utterances 足够让我应用很久了。

装置 utterances

因为 utterances 是一款 Github App,因而装置 utterances 非常简单,只须要受权特定 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 官网查看,这里给出以后工夫点的一个列表:

  1. github-light
  2. github-dark
  3. github-dark-orange
  4. icy-dark
  5. dark-blue
  6. photon-dark
  7. preferred-color-scheme
  8. boxy-light

映射到 issue 也有几种形式:

  1. pathname
  2. url
  3. title
  4. og:title
  5. issue-number
  6. specific-term

我抉择的是 title 的形式,对应评论会以文章题目作为 issue 的题目创立在对应仓库下。

到目前为止,给 hugo 动态博客增加评论的性能曾经做好了,不须要服务器就能够领有评论性能,实用!

关注公众号: 四颗咖啡豆, 第一工夫获取更新

正文完
 0