Vuepress使用utterances评论系统

前言

我用过的评论系统先后有：多说-畅言-gitment-valine-isso-utterances

前两者，多说关闭后转到畅言，但后来广告、UI等等问题主动转到gitment，基于github issue的评论系统，类似的还有gitalk。

gitment、gitalk两者设计类似，明显的缺陷是，要求权限过多，且有安全性争议，此外部署起来相对麻烦。

后来又看到了valine这款，颜值也挺高，号称无后端，不过实际数据托管使用了LeanCloud。

在使用valine过程中，也有很多不方便的，比如新评论通知、回复通知等，虽然写了脚本处理，但后来还是决定数据自托管，于是调研部署了isso——一款python写的评论系统。

isso部署还是比较麻烦的，不过评论框简洁，经过fork自己更新的仓库，功能也满足要求，用了一段时间。

顺便一提，我fork的isso-cn主要是增加了微信审核，顺便翻译了文档
PS: 另外，个人部署isso后做成了服务，其他用户可以无需服务器直接接入Isso建立评论功能，参考诏预平台开放的isso服务

不过后来博客的文章涉及了一些词被短暂关闭，由于当时博客界面不好看+不想再重构，所以又迁移到GitHub Pages/Vuepress，评论系统也换成了utterances，故有此文。

Utterances

官方站点及说明：https://utteranc.es

特点

开源。📖
没有追踪，没有广告，永久免费。♻️
不保留数据，所有数据保存在用户 GitHub issue 中。📚
有源于 Github primer 的多个主题。🌈
轻量化，没有字体下载，没有 JS 框架加载，没有polyfills。🍜

轻量、配置简单，UI美观，一致的issue体验等。

如何工作

Utterances加载时，将使用GitHub issue search api根据 url, pathname 或 title 查找与页面相关的issue。如果找不到与页面匹配的issue，即没有评论。当有人首次发表评论时，utterances-bot会自动创建一个issue。

要发表评论，用户必须授权utterances app以代表用户发帖，或者，用户可以直接在GitHub issue上评论。

安装使用

确保有个公开仓库，然后安装utterances app配置它允许调用的仓库，之后需要评论的页面引入client.js就可以了。

引入client.js需要设置一些参数，详情还是参考官网。

以后用户发表评论只需要点击登录通过OAuth App授权utterances即可。

备注

utterances默认使用的服务部署在cloudflare，国内访问速度可能并不理想。
utterances实际上可以自行部署的，国人有基于其版本开发的中文版：beaudar

Vuepress utterances

单组件

前面有说博客迁移到github pages，用的vuepress生成的静态站点，评论也切换为utterances，但是目前网上我好像没找到vuepress集成utterances的插件，所以写了一个全局组件：

<template>
    <div id="comment"></div>
</template>

<script>
export default {
    name: 'Utterances',
    methods: {
        initValine() {
            let utterances = window.document.createElement('script')
            utterances.type = 'text/javascript'
            utterances.async = true
            utterances.setAttribute('issue-term', 'pathname')
            utterances.setAttribute('theme', 'github-light')
            utterances.setAttribute('repo', 'staugur/staugur.github.io')
            utterances.crossorigin = 'anonymous'
            utterances.src = 'https://utteranc.es/client.js'
            window.document.getElementById('comment').appendChild(utterances)
        }
    },
    mounted() {
        this.initValine()
    }
}
</script>

<style>
.utterances {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 760px;
    margin-left: 0;
    margin-right: auto;
}

.utterances-frame {
    position: absolute;
    left: 0;
    right: 0;
    width: 1px;
    min-width: 100%;
    max-width: 100%;
    height: 100%;
    border: 0;
}
</style>

用法：

上传代码保存在你的 .vuepress/components/ 下，会被自动注册为全局组件，之后在markdown 文章底部放入 <Utterances /> 即可加载评论。

插件化

不过上述组件需要手动引入，用起来不是很方便，所以我研究参考 vuepress-plugin-comment、 @Timi-design/vuepress-plugin-comment实现了 vuepress-plugin-utterances

github: staugur/vuepress-plugin-utterances

npm package: @saintic/vuepress-plugin-utterances

demo: 参考本站底部评论

另，支持 beaudar - 表达，简单来说就是中文版的Utterances

·End·