hexo+yilia集成utteranc评论系统

阅读数：9次 2019-11-05

字数统计: 1.5k字 | 阅读时长≈ 6分

hexo+yilia集成utteranc评论系统

utteranc评论系统是基于GitHub issues的，类似Gitment/Git talk。

file

前言

博客的评论系统还是挺多的，但是也死了挺多的，下面就简单介绍下。(注：以下数据多来自网络，可能存在错误。)

第一类：已暂停服务的

多说：已于2017年6月1日正式关停服务。
网易云跟帖（网易第三方评论系统）：已于2017年8月1日停止服务。
友言：2018年4月30日停止了服务。

第二类：第三方，还可以使用的

畅言（搜狐）：畅言是需要备案的，不备案会有15天的试用期。
Disqus：听说广告有点多。
来比力（韩国）：挺好的，就是国外的，有点慢，可能会加载不出来。
Valine ：国内后端云服务提供商 LeanCloud 提供的评论系统。Valine 的特点：
- 无后端实现
- 高速，使用国内后端云服务提供商 LeanCloud 提供的存储服务
- 开源，自定义程度高
- 支持邮件通知
- 支持验证码
- 支持 Markdown
- 头像可选择

第三类：GitHub相关的

giteement：基于码云的评论系统，详见：https://gitee.com/zhousiwei/giteement。
Gitment/Git talk：基于GitHub issue的评论系统，使用Github Application，问题多，好像只能适配一个网站，不适合多网站发布。好像主要是这两个参数的设置：Homepage URL是你的仓库的名字;Authorization callback URL:网站地址，如果你指向了新的域名就填网站主页地址，如我的https://www.yansheng.xyz；否则写仓库的名字应该也可以（不确定，没使用过）。
utteranc：基于GitHub issue的评论系统，官网：https://utteranc.es/，详见下文。

如需了解更多，可参考下面链接：

utterances

介绍

一个机器人utterances bot，好像是2017年开工的，2018开始火（769star）,2019大热了（截止发文，2878star）。

网址：https://utteranc.es/，下面是官网的介绍：

A lightweight comments widget built on GitHub issues. Use GitHub issues for blog comments, wiki pages and more!
Open source. 🙌
No tracking, no ads, always free. 📡🚫
No lock-in. All data stored in GitHub issues. 🔓
Styled with Primer, the css toolkit that powers GitHub. 💅
Dark theme. 🌘
Lightweight. Vanilla TypeScript. No font downloads, JavaScript frameworks or polyfills for evergreen browsers. 🐦🌲

当有人评论时，自动在指定仓库创建一个issues，用于评论。（issues名可指定为多种形式）

使用

网上找的好像都是使用next主题的，如

没有找到相同的，只能自己摸索了。

1.安装应用

安装utterances应用，网址 https://github.com/apps/utterances ，设置指定仓库即可。

2.配置基本参数

官方（主页）其实自带教程，配置相关参数，生成脚本如下：

<script src="https://utteranc.es/client.js"
        repo="username/username.github.io"
        issue-term="title"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

解释一下主要参数：

repo：存放评论的issues的仓库名（即步骤1指定访问的仓库），可以和博客相同，也可以不同。
issue-term：指定issues的标题，title表示使用文章的标题作为issues的标题。可选参数（只介绍部分）：
- URL：博客网址：网址全路径，如：http://localhost:4000/2019/11/05/hexo+yilia集成utteranc评论系统/#more
- pathname：网址域名之外的文件名：<2019/11/05/hexo+yilia集成utteranc评论系统/#more>
- title：博客标题（推荐使用这个，因为上面两个涉及到网址，如果网址包含中文，会被转义，不方便看。）
theme：评论系统的主题，在Theme里面，选择主题，页面会变色：https://utteranc.es/#heading-theme
github-light

github-dark

3.hexo+yilia配置

直接嵌入

修改：H:\Hexo\themes\yilia\layout\_partial\article.ejs，在博客评论系统代码附近，添加如下代码：

<!-- 《utteranc评论：基于github issue的评论系统 -->
<div>
    <section id="comments" class="comments">
      <style>
        .utterances{max-width: 100%;}
      </style>
        <script src="https://utteranc.es/client.js"
                repo="username/username.github.io"
                issue-term="title"
                theme="github-light"
                crossorigin="anonymous"
                async>
        </script>
  </section>
</div>
<!-- utteranc评论》 -->

在官网也有介绍到:Customize the layout using the.utterancesand.utterances-frameselectors.，如果需要控制样式，可以通过这两个选择器。因为指定了.utterances{max-width: 750px;}，我试了下，在yilia主题下，宽度不能充满评论区域，所以进行了调整。

灵活嵌入

可主题的配置文件中进行配置

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

修改：H:\Hexo\themes\yilia\layout\_partial\article.ejs，在博客评论系统代码附近，添加如下代码：

<!-- 《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评论》 -->

bug

1.服务器问题

因为服务器在国外，需要访问github等问题，该评论有可能会加载不出来（介意者慎用！）。

2.401问题

控制台报错，评论内容不能加载出来。如下图：

逛了下仓库issues，发现了类似问题：

https://github.com/utterance/utterances/issues/123

https://github.com/utterance/utterances/issues/148

处理方法

清除cookies：点击地址栏左侧感叹号–>Cookie–>清除全部Cookie。

虽然这样可以可以让评论加载出来，但是好像401问题还存在，不过我觉得问题不大😜。

（ps:如果你有更好的解决方法，请留言告知，谢谢！）

本文作者： 荷塘月色
发布时间： 2019-11-05
最后更新： 2020-08-12
本文标题： hexo+yilia集成utteranc评论系统
本文链接： https://www.yansheng.xyz/article/c5f6d65b.html
版权声明： 本作品采用 CC BY-NC-SA 4.0 许可协议进行许可。转载请注明出处！