Jekyll에 Disqus 적용하기

2016-07-04

이 문서는 Jekyll 시절에 작성한 것으로 현재 이 사이트에서 유효하지 않음.

Disqus는 각종 Framwork을 이용한 웹사이트에 Comment를 달게 해주는 서비스이다.

사용자는 Disqus, Facebook, Twitter, Google 계정을 이용하여 comment를 남길 수 있다.

지원하는 Framework 이랄까 Platform이랄까…

Universal Code
Wordpress
Blogger
Tumblr
Squarespace
TypePad
MovableType
Drupal
Joomla

목표

github.io에 [Jekyll][Jekyll]을 이용해서 Static page들로 운영(?)을 하고 있는데, 각 post에 comment를 달아보려 한다.

1. Disqus 가입

Disqus 에 가입한다.

가입 과정에 Installation이 있다. Universal Code를 선택한다.

2. Jekyll에 적용

이후 /layouts/post.html 의 하단에 Disqus에서 제공하는 소스를 넣으면 끝난다. 너무 빨리 끝나서 놀랐다. (…)

<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_URL;  // Replace PAGE_URL with your page's canonical URL variable
        this.page.identifier = PAGE_IDENTIFIER; // 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 = '//lazyrodi.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" rel="nofollow">comments powered by Disqus.</a></noscript>

this.page.url과 this.page.identifier는 Disqus thread가 중복되어 생성되는 것을 방지하기 위해 설정하는데 다음과 같이 하면 된다. url에는 본인의 것을 넣으면 된다.

아래 \는 코드가 반영되어 버려서 어쩔 수 없이 넣었다. 실제 소스에 반영할 땐 제거할 것.

1 2	this.page.url = "http://lazyrodi.github.io\{\{ page.url }}"; this.page.identifier = "\{\{ page.url }}";

3. Comment count 표시하기

thread 별로 달린 comment의 개수를 확인하여 post list나 각 post의 상단 등에 표시하기 위해서는 아래의 과정이 필요하다.

</body> 전에 아래 코드 추가
- default.html 에서 </body> 전에 아래 코드를 넣는다.
- 원래 의도대로면 count를 표시하고 싶은 page에만 넣으면 된다.
  1
  2
  <script id="dsq-count-scr" src="//lazyrodi.disqus.com/count.js" async></script>

count를 표시하기 원하는 page에 아래 코드를 넣는다.

<!-- post.html -->
<a href="\{\{ page.url }}index.html#disqus_thread" data-disqus-identifier="\{\{ page.url }}"></a>
<!-- index.html -->
<a href="\{\{ post.url }}index.html#disqus_thread" data-disqus-identifier="\{\{ post.url }}"></a>

주절주절

local에서만 발생하는 이슈인지는 모르겠지만 Disqus 서버와의 동기화 속도가 조금 느린 것 같다.

comment를 달았다가 삭제하면 한참 1 comment 상태로 남아있다.

comment를 한 번 달아야 thread가 생성되어 그 전에는 0 comment 표시가 되지 않는 문제(?)가 있다.

페이지를 JavaScript로 억지로 구현해 두었는데 refresh 문제인지 그쪽엔 html code까지는 같은데 반영이 안 된다. ㅠㅠ

Devetc

목표

1. Disqus 가입

2. Jekyll에 적용

3. Comment count 표시하기

주절주절