一、Utterances基本介绍

Utterances是一款基于GitHub Issues的轻量级评论工具，它允许用户使用GitHub账号登录并发表评论。Utterances的特点包括：

  1. 极其轻量：Utterances的脚本大小不到100KB，加载速度非常快。
  2. 基于GitHub Issues：评论存储在GitHub Issues中，无需搭建额外的数据库。
  3. 支持Markdown：支持Markdown语法，方便用户发表格式化的评论。
  4. 支持代码高亮：支持代码块的语法高亮，适合技术博客。
  5. 支持多种主题：提供多种主题，适应不同网站的风格。
  6. 配置简单：配置过程非常简单，只需要几个步骤就可以完成。

二、Utterances的实际应用场景

Utterances作为一种评论系统，在以下场景中特别适用：

  1. 技术博客：技术博客的读者通常都有GitHub账号，使用Utterances可以方便他们发表评论。

  2. 个人网站：个人网站使用Utterances可以减少服务器的负担，无需搭建额外的评论系统。

  3. 开源项目：开源项目的文档网站使用Utterances可以让用户直接通过GitHub账号发表评论，方便项目维护者与用户交流。

  4. 静态网站：静态网站无法使用传统的评论系统，Utterances作为基于GitHub Issues的评论系统，非常适合静态网站。

  5. 轻量级网站：对于注重加载速度的轻量级网站，Utterances的轻量级特性非常适合。

三、Utterances与其他评论系统的比较

1. 与Gitment的比较

  • 优势：Utterances比Gitment更加轻量级，加载速度更快，配置更加简单。
  • 劣势：Gitment的功能更加丰富，如支持评论通知等。

2. 与Gitalk的比较

  • 优势：Utterances比Gitalk更加轻量级，加载速度更快。
  • 劣势：Gitalk的界面更加现代化，功能更加丰富。

3. 与Disqus的比较

  • 优势：Utterances比Disqus更加轻量级，加载速度更快，无需第三方依赖。
  • 劣势：Disqus的功能更加丰富，如支持社交分享、评论统计等。

四、Utterances集成步骤

1. 安装Utterances App

GitHub安装地址：https://github.com/apps/utterances

首先安装这个App，选择要关联评论的仓库。可以选择所有仓库，也可以只选择一个仓库。选择一个仓库比较安全。

2. 配置Utterances

在themes/yilia/layout/_partial/article.ejs下添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- 《utteranc评论：基于github issue的评论系统 -->
<% if (theme.utterance && theme.utterance.enable){ %>
    <section id="comments" class="comments">
      <style>
        .utterances{max-width: 100%;}
      </style>
        <script src="https://utteranc.es/client.js"
                repo="<%= theme.utterance.repo %>"
                issue-term="<%= theme.utterance.issue_term %>"
                theme="<%= theme.utterance.theme %>"
                crossorigin="anonymous"
                async>
        </script>
  </section>
<% } %>
<!-- utteranc评论》 -->

3. 修改主题配置

在themes/yilia/_config下添加以下代码：

1
2
3
4
5
6
#6.utteranc评论： https://utteranc.es (参数配置详见主页)
utterance:
  enable: true
  repo: root1761/root1761.github.io     #仓库名字,格式：你的用户ID/仓库名称，如：blog/utterance_repo
  issue_term: 'title'            #映射配置
  theme: github-light         #主题

enable：true使用utterances评论false关闭
repo： 你的用户ID/仓库名称，如：blog/utterance_repo
issue_term：映射配置,有如下选项：

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

theme：主题,有如下选项：

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

4. 查看效果

显示如下效果，说明配置成功：

五、常见问题及解决方案

1. 评论区显示”Error: Not Found”

原因：Utterances App没有安装到对应的仓库，或者仓库不存在。

解决方案：

  • 确保Utterances App已经安装到对应的仓库。
  • 确保仓库存在，并且你有该仓库的访问权限。
  • 确保仓库是公开的，私有仓库无法使用Utterances。

2. 评论区显示”Error: Validation Failed”

原因：GitHub API的速率限制，或者评论内容不符合GitHub的要求。

解决方案：

  • 等待一段时间后再尝试，GitHub API的速率限制会在一段时间后重置。
  • 检查评论内容是否符合GitHub的要求，避免使用敏感词汇或违规内容。

3. 评论区显示”Error: Network Error”

原因：网络连接问题，或者GitHub API暂时不可用。

解决方案：

  • 检查网络连接是否正常。
  • 等待一段时间后再尝试，GitHub API可能暂时不可用。

4. 评论区无法加载

原因：Utterances的脚本加载失败，或者主题的配置不正确。

解决方案：

  • 检查主题的配置是否正确，确保Utterances的相关配置已经添加。
  • 检查网络连接是否正常，确保Utterances的脚本可以正常加载。

六、Utterances的技术价值

1. 轻量级设计

Utterances的脚本大小不到100KB，加载速度非常快，不会影响网站的加载速度。

2. 无需搭建服务器

Utterances基于GitHub Issues，无需搭建额外的服务器和数据库，减少了维护成本。

3. 安全可靠

Utterances使用GitHub的OAuth认证，确保了用户身份的真实性，减少了垃圾评论的风险。

4. 易于集成

Utterances的集成非常简单，只需要几个步骤就可以完成，适合各种类型的网站。

5. 支持Markdown

Utterances支持Markdown语法，方便用户发表格式化的评论，特别适合技术博客。

6. 支持多种主题

Utterances提供多种主题，适应不同网站的风格，提高了用户体验。

七、Utterances的发展趋势

1. 技术演进

Utterances作为基于GitHub Issues的评论系统，一直在不断演进：

  • 功能增强：不断添加新的功能，如评论通知、代码高亮等。
  • 性能优化：优化加载速度和响应速度，提高用户体验。
  • 安全性提升：加强安全性，防止恶意攻击和垃圾评论。

2. 与其他技术的融合

  • 与静态网站生成器的集成：Utterances已经与多种静态网站生成器集成，如Hexo、Jekyll、Hugo等。
  • 与现代前端框架的集成：Utterances可以与现代前端框架如React、Vue等集成。

3. 未来发展方向

  • 支持更多平台：除了GitHub，可能会支持其他代码托管平台，如GitLab、Bitbucket等。
  • 增强社交功能：增加社交功能，如评论点赞、分享等。
  • 提供更多主题：提供更多的评论区主题，适应不同网站的风格。
  • 支持更多语言：支持更多的语言，提高国际化程度。

八、总结与个人感悟

Utterances作为一种基于GitHub Issues的轻量级评论系统，为静态网站和技术博客提供了一种简单、快速、可靠的评论解决方案。它的出现解决了静态网站无法使用传统评论系统的问题，为网站所有者和读者之间的交流提供了便利。

技术价值

  • 简化评论系统的搭建：Utterances无需搭建额外的服务器和数据库，简化了评论系统的搭建过程。

  • 提高网站加载速度：Utterances的轻量级设计，不会影响网站的加载速度。

  • 提高用户体验：Utterances支持Markdown语法和代码高亮，提供多种主题，提高了用户的评论体验。

  • 增强网站互动性：Utterances为网站添加了评论功能，增强了网站的互动性和用户粘性。

应用价值

  • 适合技术博客：技术博客的读者通常都有GitHub账号，使用Utterances可以方便他们发表评论。

  • 适合开源项目：开源项目的文档网站使用Utterances可以让用户直接通过GitHub账号发表评论，方便项目维护者与用户交流。

  • 适合个人网站：个人网站使用Utterances可以减少服务器的负担，无需搭建额外的评论系统。

  • 适合轻量级网站：对于注重加载速度的轻量级网站，Utterances的轻量级特性非常适合。

个人感悟

作为一名技术人员，我认为Utterances的成功在于它的轻量级设计和简洁的用户体验。它利用GitHub Issues作为评论存储的载体，无需搭建额外的服务器和数据库，简化了评论系统的搭建过程。同时，它的轻量级设计确保了网站的加载速度不会受到影响。

在未来的技术发展中，随着静态网站的普及，Utterances这类基于第三方服务的评论系统将会继续发挥重要的作用。对于我们来说，学习和掌握Utterances不仅是了解一种评论系统，更是理解如何利用现有服务构建功能的重要途径。

Utterances的设计理念和实现方式也值得我们学习，它展示了如何通过巧妙的设计，利用现有服务构建功能，减少开发和维护成本。这种学习不仅可以帮助我们更好地使用Utterances，还可以启发我们在其他领域的设计和开发。