將Cusdis留言系統整合到Hexo

目錄
  1. 1. 取得程式碼
  2. 2. 修改主題
    1. 2.1. 顯示留言數

無意間在其他人的部落格看到Cusdis留言系統──很單純的匿名留言系統，沒有花俏的功能，載入速度超快。和Disqus或Facebook這種社交型態的留言系統完全不同。

優點：

  • 開放原始碼。
  • 沒有會員系統，只能匿名留言。
  • 可以自架或官方託管（目前完全免費）。
  • 支援多國語言（可以用官方多語或自己改）。
  • 輕量級，嵌入網站的程式碼只有5kb（gzipped）。
  • 支援Email通知和Webhook，回覆和批准留言不需登入。
  • 可以從Disqus匯入資料。
  • 管理後台不會紀錄留言者的敏感資料，例如IP位址。
  • 官方託管的管理後台只能用Google、GitHub和GitLab三種帳號來登入。

因為是新的開發專案，小問題也很多：

  • 我從Disqus匯入資料都會失敗。
  • 因為是匿名留言系統，所以每一條評論都要審核，討論度高的的網站不適合。
  • 暫時沒有過濾機制。
  • 暫時沒有資料匯入、匯出、合併等功能。

取得程式碼

如果要將Cusdis整合到Hexo也很簡單，首先登入官方的管理後台，取得一組程式碼：

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="XXXXXXXXXX"
  data-page-id="{{ PAGE_ID }}"
  data-page-url="{{ PAGE_URL }}"
  data-page-title="{{ PAGE_TITLE }}"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>

不能直接拿來給Hexo使用，需依照你的主題用哪種樣板來修改。例如我用的Light主題，樣板是用EJS，所以要用EJS的語法來修改。最簡單的方式就是找你主題的Disqus變數：this.page.identifier、this.page.url、this.page.title，後面對應的變數是怎麼寫的，直接抄過來。

修改主題

將/themes/主題名稱/layout/_partial/的comment.ejs和after_footer.ejs兩個檔案都複製一份出來，分別改名為_comment.ejs和_after_footer.ejs。因為內容會大改，所以先做一下備份。

將comment.ejs內容改為：

<% if (page.comments){ %>
<section id="comment">
  <h1 class="title"><%= __('comment') %></h1>

<div id="cusdis_thread"
  data-host="https://cusdis.com"
  data-app-id="XXXXXXXXXX"
  data-page-id="<%= page.path %>"
  data-page-url="<%= page.permalink %>"
  data-page-title="<%= page.title %>"
></div>
<script async defer src="https://cusdis.com/js/cusdis.es.js"></script>
</section>
<% } %>

data-app-id填入前面取得的數值。最後將after_footer.ejs相關Disqus的程式碼都刪除，不然網頁原始碼還是會出現。

顯示留言數

參考〈Cusdis的Show comment count文件〉來改。需求為：讓留言數顯示在文章外底部右邊，使用文章摘要或全文章也都能正確顯示，順便加入文章的留言連結。

  1. 上述data-page-id="{{ PAGE_ID }}"變數，如果你的主題article.ejs用的是<%= page.path %>，請改成：

    data-page-id="<%= page.path %>"

    如果是<%= item.path %>，請改成：

    data-page-id="<%= item.path %>"

    因為data-page-id變數不一致，會影響到文章外的留言數顯示，只會顯示0。文章內不影響，都會顯示出來。

  2. 編輯/themes/主題名稱/layout/_partial/head.ejs內容加入：

    <script defer data-host="https://cusdis.com" data-app-id="XXXXXXXXXX" src="https://cusdis.com/js/cusdis-count.umd.js"></script>

  3. 編輯/themes/主題名稱/layout/_partial/article.ejs，搜尋：

    <% if (item.excerpt){ %>
  <div class="alignleft">
    <a href="<%- url_for(item.path) %>#more" class="more-link"><%= theme.excerpt_link %></a>
  </div>
<% } %>

    底下加入： 

    <div class="alignright"><a href="<%- url_for(item.path) %>#comment" class="comment-link">
  <span data-cusdis-count-page-id="<%= item.path %>">0</span></a>
</div>

    因為Hexo Light主題的CSS已經定義好comment-link，不用再改CSS，只是之前都沒用到。

  4. 文章內我只改一下讓留言區塊顯示數字而已。編輯/themes/主題名稱/layout/_partial/comment.ejs，搜尋：

    <h1 class="title"><%= __('comment') %></h1>

    將這段改成： 

    <h1 class="title"><%= __('comment') %> (<span data-cusdis-count-page-id="<%= item.path %>">0</span>)</h1>

  5. 效果如下：
    Cusdis show comment count-1

    Cusdis show comment count-2

參考文章：