Disqus - Blog留言板功能

最近把部落格的留言功能弄好了，就順便寫篇文章紀錄過程。 支援靜態部落格的留言板的軟體其實很多，HYPERCOMMENTS、Commento、Gitalk、Disqus…，我最後選了Disqus因為以下幾個原因:

1. 支援多平台
   本來是想用Gitalk這種開issue的方式去做，後來想想用Gitlab、Bitbucket的人其實不少但應該沒人沒有fb、google帳號(雖然沒選Gitalk但我蠻推的)
2. 支援Jekyll
   我的部落格是用Jekyll但我不會Ruby，所以最好能弄弄設定不寫code
   
3. 免費
   支持自由軟體社群

建立Disqus Site 

要用Disqus第一步就是要先創個帳號 

選擇I want to install Disqus on my site 

創立一個site，這裡要記住Website Name對應的Disqus URL，之後在設定留言板的時候會用到 

到這裡一個簡單的Disqus Site就可以運作了，更個人化的設定可以到右上角齒輪＞Admin去做調整

設定留言板 

在html想要嵌入留言版的位置插入元素 

<div id="disqus_thread"></div> 

加上js script 

<script>
    var disqus_config = function () {
        this.page.url = PAGE_URL; 
        this.page.identifier = PAGE_IDENTIFIER; 
    };
    (function() { // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');
        s.src = 'https://shortname.disqus.com/embed.js'; // Disqus URL
        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script> 

這裡的變數disqus_config是區別不同留言板的參數，一個page.identifier對應同一thread的留言板，如果不設定的話Disqus會用目前的網址當作預設identifier，所以如果不同位址對應到相同頁面的情形時要記得設成一樣的identifier，不然會出現missing comments。

page.url是紀錄每筆留言是留在哪個頁面上，設錯或沒設我用起來不會影響留言功能，就是從Disqus後台看會知道留言是哪來的。

在Jekyll使用Disqus 

用Jekyll的好處就是我不用一個頁面一個頁面寫disqus_config，寫個設定就幫我做掉這些事了。

先在_config.yml定義好網址跟shortname

url: "https://test.github.io"
baseurl: "/blog/"
# Disqus settings
disqus_username: test-blog 

html一樣插入元素 

<div id="disqus_thread"></div> 

最後加上js script，這裡的disqus_identifier跟disqus_url就對應到前面的page.identifier跟page.url，把設定的參數串成url，再用每篇文章的id當成identifier。

<script>
    /* * * CONFIGURATION VARIABLES * * */
    var disqus_shortname = "{{site.disqus_username}}";
    var disqus_url = "{{site.url}}{{site.baseurl}}{{page.url}}";
    var disqus_identifier = "{{page.id}}";
    (function() {
        var d = document, s = d.createElement('script');
        s.src = 'https://' + disqus_shortname + '.disqus.com/embed.js';
        (d.head || d.body).appendChild(s);
    })();
</script>