背景故事

部落格從去年多說評論關閉後就切換到 Disqus, 並且實現了國內 Disqus 代理服務, 國外訪問直接引用 Disqus, 國內訪問將顯示簡單輸入框以及評論列表, 使用者可以實現匿名評論並且通過代理提交到 Disqus.

代理服務的服務端通過 ciqulover 的專案 ciqulover/disqus-proxy 實現, 如果沒有這個 prototype 我也不可能專注於接下來的設計.

新評論框功能

TODO:

• 點贊功能
• 跟蹤版本更新功能

Finished:

• 分頁功能
• 撰寫除錯指導
• 判斷是否可以載入 Disqus 原生評論框, 如果可以則直接載入, 否則載入自定義評論框及評論列表
  
  - 評論列表預設顯示 50 條最近評論, 等我有時間來研究一下分頁功能
• 匿名評論功能
• 回覆特定歷史評論

樣式截圖

• 評論框樣式

  

• 評論層級回覆樣式

  

• 評論分頁功能

  

使用方法

首先你要有個 VPS, 並且 VPS 能夠正常訪問 Disqus

前端配置

首先將 client/static 資料夾 copy 到你的部落格裡面, 然後前端引用這些檔案並且進行配置

    <!-- 必須提供一個 id 完全相同的 div -->
    <div id="disqus_thread"></div>

    <!-- 一些元素用到了 FA 的 icon, 這一段可以放到 header 裡面 -->
 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


    <script>
      window.disqusProxy = {
        username:'szhshp',  // 你的 Disqus username
        server: 'xxx.xx.xxx.xx', // 你的 VPS IP
        port: 5000, // 這個 repo 的服務端對應的埠
        identifier:
 
 window.location.href // 頁面 identifier, 一般就是頁面 url
      };
      window.disqus_config = function () {
        this.page.url = window.location.href;
        this.page.identifier = window.location.href;
      };
      var s = document.createElement('script');
      s.src = '/static/js/main.09c31d67.js'; //引用 static 資料夾下面的 JS
      s.async = true;
      document.body.appendChild(s);
    </script>
    <!-- 引用 static 資料夾下面的 CSS -->
    <link rel="stylesheet" href="/static/css/main.331fc925.css"> 

後端配置

2. 安裝依賴

        npm i --production
        // 或者
        yarn install --production
   

3. 配置 server 目錄下的config.js

        module.exports = {
                // 服務端埠，需要與 disqus-proxy 前端設定一致
                port: 5509,
                // 你的 diqus secret key
                api_secret: 'your secret key',
                // 你的 disqus 名稱，就是forum名稱
                username:'ciqu',
                // 服務端 socks5 代理轉發，便於在本地測試，生產環境通常為 null
                socks5Proxy: null,
                // 日誌輸出位置, 輸出到檔案或控制檯 'file' | 'console'
                log: 'console'
        }

api secret key需要在Disqus的API頁面申請

另外需要到Settings => Community 裡開啟訪客評論

4. 啟動服務

        cd server
        node index.js
   

   正常執行服務，關閉ssh的時候就會關閉伺服器，因此可以考慮使用forever外掛

5. 讓服務跟隨伺服器自動啟動

Forever 的使用

很簡單，只需要學會啟動和關閉兩個命令即可。

forever start app.js
forever stopall

伺服器自動啟動

除錯指導

服務端除錯

本地執行的條件是本地已經可以訪問 Disqus, 因此建議掛載到 VPS 進行 FTP 連線.

進入 \server 執行 node index.js 即可開啟服務

客戶端除錯

進入 \client 執行 npm start 即可開啟本地除錯

客戶端構建

npm run-script build