Jekyll에 Disqus 추가하기

2016-08-09

Jekyll에 Disqus를 추가하는 방법을 알아본다. Disqus는 정적 웹사이트에서 동적 기능인 댓글을 사용할 수 있는 좋은 방법이다.

Prerequisite

Disqus에 로그인하여 새로운 Disqus site를 생성한다. 이때 shortname.disqus.com라고 생성하면, shortname 이 아래에서 사용할 Disqus ID가 된다.

Install

Jekyll 코드에 Disqus 코드를 추가한다. {% if page.comments %} 태그와 {% endif %} 태그 사이에 Universal Embed Code을 넣은 스크립트를 원하는 곳에 추가한다. 나는 _config.yml에 전역변수로 Disqus ID를 지정하고 다음 코드를 사용하였다.


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

(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = '//{{ site.disqus.id }}.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>


disqus:
  id: "YOUR_DISQUS_ID"

Disqus를 사용하려면, YAML frontmatter에 아래와 같이 comments: true를 삽입하면 된다. comments: false나 comments: 자체를 넣지 않으면 Disqus가 나타나지 않는다.

---
layout: default
comments: true
# other options
---