將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.identifierthis.page.urlthis.page.title,後面對應的變數是怎麼寫的,直接抄過來。

修改主題

/themes/主題名稱/layout/_partial/comment.ejsafter_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>

效果如下:
Cusdis show comment count-1

Cusdis show comment count-2


參考文章: