手把手教你使用issue做为博客评论系统

自从上周在阮一峰的 每周分享第 60 期 看到了能够将 GitHub 的 issue 看成评论系统，插入第三方网页的 JS 库——utterances。我就对此“魂牵梦绕”。我的博客使用的是VuePress。

TLDR (很少废话，先看效果)

以前是使用了 Valine 做为博客的评论系统。

下图是改成 utterances 风格。

utterances 介绍及使用

utterances 是基于github issue，拥有多种主题的开源免费小组件。

1.首先咱们所须要的 github 存储库必须是公开的，而不是私有的，这样咱们的读者才能够查看以及发表评论。

2.咱们必须在 github 上进行安装 utterances,首先咱们访问 utterances应用程序 而后点击 Install 按钮进行安装。

3.在这里能够选择能够关联的存储库，能够选择咱们所拥有的库(也包括将来创建的库)或者某一个仓库，这里咱们只选择某一个须要进行评论的库，这样比较好。

4.安装完成便可，随后咱们访问utterances应用程序就再也不是安装而是是执行配置项目。

5.此时服务端配置已经完成，如今咱们能够进行客户端的操做，也就是 blog 端。在blog端咱们只须要添加如下这段脚本就能够直接运行。

<script 
// 加载的客户端脚本
    src="https://utteranc.es/client.js"
// repo 就是访问的仓库，格式 用户名/仓库名
// 我的就是 repo="wsafight/personBlog"
        repo="[ENTER REPO HERE]"

// 选定的当前blog 与 issue 之间的关系
// 我的使用的是不会自动建立的 issue-number，每一个issue都有本身的number。该选项是使用特定的issue
        issue-term="pathname"
// 主题为  github-light 还有其余主题能够选择        
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>
复制代码

6.由于个人博客是采用 VuePress,因此在 markdown 中是没法使用 script 脚本的。咱们就须要编写写一个 vue 组件。(组件的文件路径为 [blog name]/.vuepress/components/)

// Utterances 组件
<template>
    <div id="comment"></div>
</template>
<script>
export default {
  name: 'Utterances',
  props: {
    // 传入的 issue-number  
    id: Number
  },
  methods: {
    initValine () {
        // 创建脚本以及属性
        const utterances = document.createElement('script');
        utterances.type = 'text/javascript';
        utterances.async = true;
        utterances.setAttribute('issue-number', this.id)
        utterances.setAttribute('theme','github-light')
        utterances.setAttribute('repo',`wsafight/personBlog`)
        utterances.crossorigin = 'anonymous';
        utterances.src = 'https://utteranc.es/client.js';

        // comment 是要插入评论的地方
        window.document.getElementById('comment').appendChild(utterances);

    }
  },
  mounted: function(){
    // 每次挂载时候，进行初始化
    this.initValine()
  }
}
</script>
复制代码

7.最后。在 md 文档中直接使用上面编写的组件

## 参考资料
[高性能JS-DOM](https://www.cnblogs.com/libin-1/p/6376026.html)   
[imba 性能篇](http://imba.io/guides/advanced/performance)

// 能够在 md 文档中直接使用组件
<Utterances :id="1"/>
复制代码

utterances其余配置项

主题 Theme 选项以下,咱们能够选择各色主题：

• Github Light
• Github Dark
• Github Dark Orange
• Icy Dark
• Dark Blue
• Photon Dark

评论 issue-term 映射配置选项以下：

• pathname
• url
• title
• og:title
• issue-number
  issue-term="1"
  特定number的issue，不会自动建立，我的使用该方案
• specific-term

鼓励一下

若是你以为这篇文章不错，但愿能够给与我一些鼓励，在个人 github 博客下帮忙 star 一下。 博客地址

参考文档

utteranc 文档
博客使用 utterances 做为评论系统