博客使用 utterances 作為評論系統
阿新 • • 發佈：2019-05-04
info fig anon hugo uri https block light document
utterances 是一款基於 GitHub issues 的評論工具。
相比同類的工具 gitment、gitalk 以及 disqus 評論工具，優點如下：
- 極其輕量
- 加載非常快
- 配置比較簡單
博之前客一直使用 disqus ,這個工具配置也比較簡單，也是免費的。但是，廣告多，而且加載也比較慢。
體驗了一把 utterances 後，馬上切換到 utterances。
安裝 utterances
utterances 的安裝相當簡單，因為出品了一個 Github App。
首先安裝這個 App ，選擇要關聯評論的倉庫。可以選擇所有倉庫，也可以只選擇一個倉庫。選擇一個倉庫比較安全。
安裝完成就是配置成功了，是不是非常簡單。
使用 utterances
在你要使用評論的地方，插入以下代碼：
<script src="https://utteranc.es/client.js"
repo="nusr/blog"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>nusr/blog
或者動態創建 script 標簽：
<script type="text/javascript"> (function() { // 匿名函數，防止汙染全局變量 var utterances = document.createElement('script'); utterances.type = 'text/javascript'; utterances.async = true; utterances.setAttribute('issue-term','pathname') utterances.setAttribute('theme','github-light') utterances.setAttribute('repo','nusr/blog') utterances.crossorigin = 'anonymous'; utterances.src = 'https://utteranc.es/client.js'; // content 是要插入評論的地方 document.getElementById('content').appendChild(utterances); })(); </script>
我的博客是使用 Hugo 搭建的，可以參考我的配置 config.toml。
配置 utterances
utterances 可以配置主題，評論映射。
主題 theme 選項如下：
- github-light
- github-dark
- github-dark-orange
- icy-dark
- dark-blue
- photon-dark
評論 issue-term 映射配置選項如下：
- pathname
- url
- title
- og:title
- issue-number
- specific-term
更多配置查看 https://utteranc.es/
首發 https://nusr.github.io/
博客使用 utterances 作為評論系統