Hexo 新增 Disqus 留言板功能

Disqus 是普遍還蠻常見的一個留言板系統，且在安裝完 Hexo 後，如果有特別挑 theme 沒有用預設的 landscape theme 的話 (landscape 預設好像也沒有 disqus?)，然後挑到的 theme 沒有支援 disqus，這篇來教你怎麼手動安裝 Disqus 囉。

至 Disqus 註冊

起初我們先至 https://disqus.com 官網註冊一個帳號並且建立網站專屬的留言板，進到官網後我們先按下 GET STARTED
註冊完後或者是在已登入的狀態下就會進到這個頁面，選擇 I want to install Disqus on my site
依循以下指示輸入資料：
- Website Name: 要注意這裡是你的 disqus 專屬網址的名稱，會是 shortname.disqus.com
- Category: 可以根據你的 Blog 是什麼樣的類型選擇分類
- Language: 如果選擇 Chinese，中文的部份是殘體中文，如果介意的話可以使用 English。
第 1 步是進到購買計劃的部份，往下可以選擇 Basic，如果網站人數瀏覽人次不多的話，我們就用這個計劃就好
第 2-1 步選擇你的網站類型，這裡有列出來的應該都是有寫好的專用 Plugin (WordPress 就有)，但列表裡並沒有 Hexo，所以我們選擇最底下的 I dont't see my platform listed, install manually with Universal Code
第 2-2 步就會有影音的部份教你怎麼安裝程式碼，這裡我們留待下面手把手教你怎麼安裝!
第 3 步是設定你要應用的網站留言板的相關設定，填寫你想填的資料或是都不填也可以，但要記得 Website Name 不要改到就好，或是再另外改成你想要的即可
第 4 步是評論的審核機制，你可以選擇不受限的 Balanced，或是評論是需要經過系統審核或有限的 Strict，差異解說如下：
- 圖片、影片或連結允許/不允許在留言裡
- 訪客留言是允許/不允許的
- 留言被 flagged (被標記有害的意思?) 5次/3次 會被送到待審核的機制中
- 留言內有限制或敏感字的部份都會被自動刪除
- 有害的評論 需要你的審核才能顯示/自動刪除
- Strict 的部份，話題(Threads)會在 30 天後自動關閉

安裝 Disqus 至 Hexo

以下的 theme 以 stellar 這個佈景主題為主，在某些檔案的安裝上都是可以客製化的，所以你可以把檔案安裝在你覺得適合的位置，或是跟著我安裝在同樣的位置中。

修改 _config.yml
請先確認 url: 這個參數是有設定好你的網站的 url，再來在檔案底端新增以下參數 (注意 yml 檔的縮排)
1
2
3
4
disqus:
enable: true
thread_count: false
shortname: {輸入上面註冊流程中的 Website name}

建立 Disqus 專屬的 ejs 檔案
將以下程式碼安裝在 themes/stellar/layout/_partial/plugins/disqus/index.ejs

<% if (config.disqus.enable) { %>
  <div id="disqus_thread"></div>
  <script>
      /**
      *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
      *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables    */
      var disqus_config = function () {
        this.page.url = '<%- page.permalink %>';  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = '<%- page.date %>'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
      };
      (function() { // DON'T EDIT BELOW THIS LINE
      var d = document, s = d.createElement('script');
      s.src = 'https://<%- config.disqus.shortname %>.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
      })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
<% } %>

參數的部份：

第 8 行 <%- page.permalink %> 這裡是指定頁面的獨立連結
第 9 行 <%- page.date %> 這是頁面的唯一識別碼，我以 page 的發佈時間為主
第 13 行 <%- config.disqus.shortname %> 這裡是指 Website name，從 _config.yml 檔裡來的設定

將 Disqus 安裝在適當的頁面內
目前我們的 Hexo 只有文章的部份需要 Comment 功能，所以打開 themes/stellar/layout/post.ejs 裡，需要自己找一下適當的位置安插，我安插的位置在文章最底部的部份
1
<%- partial('_partial/plugins/disqus/index.ejs') %>
安裝完後就可以預覽看看有沒有出現 Disqus 囉

安裝留言計數功能

安裝的樣子如下圖紅框

新增留言計數功能的程式碼到 themes/stellar/layout/_partial/plugins/disqus/thread_count.ejs
1
2
3
<% if (config.disqus.thread_count) { %>
<script id="dsq-count-scr" src="//<%- config.disqus.shortname %>.disqus.com/count.js" async></script>
<% } %>
參數的部份：
- <%- config.disqus.shortname %> 一樣是 Website name，在 _config.yml 檔案裡的設定
安裝程式碼在 Layout 裡
將以下程式碼安插在 themes/stellar/layout/layout.ejs 結尾 </body> 的標籤之前
1
<%- partial('_partial/plugins/disqus/thread_count.ejs')%>
大概是長這樣
應用在文章列表的每一個文章區塊中
打開 themes/stellar/layout/_partial/main/post_list/post_card.ejs，將程式碼安插在適當的位置中，以本例是插在第 27 行之後
1
2
3
4
<% if (config.disqus.thread_count) { %>
<span> | </span>
<span class="disqus-comment-count" data-disqus-url="<%- post.permalink %>">0 Comments</span>
<% } %>
參數的部份：
- <%- post.permalink %> 在安裝 Disqus 的第二步驟的第 8 行是相對應的，所以這裡會是文章的完整連結，才抓取得到該文章的留言數
所以大概也是長這樣
開啟 thread_count
修改 _config.yml 的 thread_count 為 true
1
thread_count: true
然後就可以看結果啦。

The article uses Attribution-NonCommercial-ShareAlike 4.0 International license agreement, please indicate the source for reprinting.