博客使用 utterances 作為評論系統

utterances 是一款基於 GitHub issues 的評論工具。

相比同類的工具 gitment、gitalk 以及 disqus 評論工具，優點如下：

1. 極其輕量
2. 加載非常快
3. 配置比較簡單

博之前客一直使用 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 是你配置允許訪問的倉庫，格式為 user-name/repo-name 。

或者動態創建 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 選項如下：

1. github-light
2. github-dark
3. github-dark-orange
4. icy-dark
5. dark-blue
6. photon-dark

評論 issue-term 映射配置選項如下：

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

更多配置查看 https://utteranc.es/

首發 https://nusr.github.io/