手把手教你使用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

參考文檔

utteranc 文檔
博客使用 utterances 做爲評論系統