Disqus 댓글 카운터 달기

Jun 16, 2017, 13:26 by PengPengTo - Comments

Jekyll은 정적 사이트 생성기인 만큼, 댓글 시스템 같은 건 당연히 지원하지 않는다¹. 그러나 아무래도 블로그를 하다 보면 댓글 기능이 있었으면 하는 생각이 드는데, Disqus를 이용하면 정적 사이트에서도 댓글 기능을 사용할 수 있다. Disqus를 이용하면 단순한 댓글 기능 뿐만 아니라, 구글, 페이스북, 트위터 등의 계정을 이용한 커뮤니티 기능도 사용할 수 있다.

Jekyll 블로그에 Disqus 댓글창을 추가하는 과정은 매우 간단하다. Disqus에 가입한 후 블로그 정보 기입, 안내해주는 코드를 페이지 레이아웃 파일에 추가해주면 된다. 댓글창 디자인은 아쉽게도 배경색 정도만 Disqus 설정 페이지에서 변경할 수 있다².

댓글 카운터 기능 역시 간단하게 추가할 수 있도록 안내 페이지에 설명이 잘 되어 있으나, 내 경우 어째선지 제대로 동작하지 않았는데, 해결 방법을 이 포스트에 기록해두고자 한다.

...

<script id="dsq-count-scr" src="//EXAMPLE.disqus.com/count.js" async></script>
</body>

...

우선, 페이지 파일의 </body> 태그 앞에 위와 같이 코드를 추가하여 페이지를 확인할 수 있도록 한다. EXAMPLE 위치에는 Disqus에 등록한 자신의 사이트 shortname을 기입하여야 한다. 이제 실제 댓글창 바로가기를 아래와 같이 생성하면 된다.

...

<h2 class="page-heading">{{ page.title }}</h1>    
<p class="post-meta">
    {{ page.date | date: "%b %d, %Y" }} by {{ site.author }}
    {% if page.comments %}
        - <a href="{{ site.url }}{{ page.url }}#disqus_thread">Link</a>
    {% endif %}
</p>

{{ content }}

...

위 코드는 포스트용 레이아웃 파일의 일부이다. {{ site.url }}변수는 _config.yml 파일에 블로그 주소를 명시한 경우에 사용할 수 있고, 해당 위치에 직접 블로그 주소를 입력하여도 무방하다. 만일 포스트 페이지가 아니라 블로그 메인 등 다른 페이지에서 포스트 목록에 댓글창 바로가기를 생성하고자 할 경우, {{ page.url }} 대신 해당 페이지의 주소를 참조하는 변수를 사용해야 한다³.

그러나, 위와 같이 바로가기를 생성한 경우 댓글창 위치로 바로 이동은 가능하지만, 해당 페이지에 달린 댓글의 개수는 확인할 수 없다. 댓글의 개수를 표시하려면 바로가기 문구 Link를 아래와 같이 변경해주어야 한다. 댓글 개수 문구의 경우 Disqus 사이트 설정 페이지 내 Community 탭의 Comment Count Link 에서 변경할 수 있다.

...

<a href="{{ site.url }}{{ page.url }}#disqus_thread">0 Comments</a>

...

여기까지가 일반적으로 안내되는 댓글 카운터를 설치하는 방법이다. 만일, 위와 같은 방법으로 설정하였음에도 댓글 카운팅이 제대로 작동하지 않는다면, 직접 data-disqus-identifier를 설정해 주어야 한다. 본 포스트에서는 생략하였지만, Disqus 댓글창을 추가할 때 포스트용 레이아웃 파일에 Universal Embed Code를 붙여넣는 과정이 있다. 이 코드에서 사용자는 this.page.identifier 라는 변수를 설정해주어야 하며, jekyll 블로그에서는 일반적으로 {{ page.id }}가 사용된다. 이 변수는 해당 포스트의 댓글창을 가리키는 표시자에 해당하며, 댓글 카운터를 설정할 때 이 변수를 명시함으로써 해당 댓글창을 참조할 수 있다. 즉, 아래와 같이 바로가기 태그에 data-disqus-identifier 속성을 추가하고, 값에 this.page.identifier에 사용된 값을 기입해주어야 한다.

...

<a href="{{ site.url }}{{ page.url }}#disqus_thread" data-disqus-identifier="{{ page.id }}">Comments</a>

...

이와 같이 설정하면 해당 포스트에 댓글 개수가 변경됨에 따라 카운터 수가 변경되는 것을 볼 수 있다.