原因

动态博客不像动静博客一样想要什么性能就写个代码实现,然而折腾一番还是能够满足日常需要的。本文次要讲述应用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动态博客增加评论的性能曾经做好了,不须要服务器就能够领有评论性能,实用!

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