博客使用 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/

posted @ 2019-05-04 12:30  Steve_Xu  阅读(3466)  评论(0编辑  收藏  举报