Hexo에 Disqus를 사용하여 댓글 기능 세팅하기

오늘은 블로그의 세팅중 한가지인 댓글 기능을 세팅하는 방법에 대해 포스팅해보겠습니다. 사실 hexo 테마들의 대부분은 여러 댓글 시스템들을 간편하게 세팅 할 수 있도록 되어있습니다.
그 중에 디스커스(Disqus)를 사용하여 댓글 기능을 세팅해보겠습니다.

디스커스(Disqus)란?

디스커스는 소셜 댓글 서비스의 하나입니다. 소셜 댓글 서비스란 소셜미디어(SNS)를 활용한 댓글 시스템으로 페이스북,트위터 와 같은 SNS와 연동해서 댓글을 달 수 있게 만들어 주는 서비스입니다. 소셜 댓글 서비스를 활용하여 댓글을 달면 동시에 해당 댓글이 자신이 연동한 SNS에도 발행이 됩니다.
별도의 댓글시스템을 구현할 필요없이 디스커스에서 제공하는 위젯을 설치함으로 사용 할 수 있는 것이 장점입니다.

설치순서

1. Disqus 회원가입
2. Settings > profile, Account 수정
3. Add Disqus To Site > I Want to comment on site 사이트 추가
4. Account > Username 확인 (shortname)
5. _config.yml 설정 변경

회원가입

Disqus 회원이 아니라면 회원가입이 필요합니다.
Disqus 사이트에서 회원가입을 진행합니다.

정보 수정

Settings 에 profile 과 Account에서 필요한 정보들을 수정해 줍니다.

사이트 추가

우측 상단의 Add Disqus To Site 에 들어가서 I Want to comment on site 를 클릭

혹은 메인에서 GET STARTED 에 들어가서 I Want to comment on site 를 클릭

해당 정보들을 입력 후 Select a plan 에서 Basic 을 선택

Select Platform 단계에서는 맨 아래의 universal Code를 선택해 줍니다.

여기는 테마마다 조금 다릅니다. 디스커스를 지원하는 테마라면 configure 누르고 사이트 세팅을 마친다음
_config.yml 의 설정만 변경 해주면 되고 안되어 있다면 소스를 추가해 주어야 합니다. 그 때 아래와 같은 코드를 사용합니다.
Installation instructions

계정정보 확인

Account 에서 Username(shortname)을 확인하여 줍니다.

_config.yml 설정

comment:
    type: disqus
    shortname: disqus 계정이름

이 부분은 현재 제가 사용하는 icarus 테마의 _config.yml의 양식이고 테마마다 조금씩 다를수 있습니다.

배포

hexo d -g

배포를 시켜주고 아래와 같이 나온다면 성공입니다.

오류체크

icarus테마는 기본적으로 disqus 댓글 시스템을 지원하고 있어서 위와같이 세팅하면 정상적으로 댓글기능이 작동해야 하지만
무엇이 문제였는지 시스템 자체는 연결되었는데 댓글을 작성하는 위젯이 제대로 작동하지 않았다 ㅠㅜ

icarus테마에서 제공하는 포스팅에서도 comment Plugin 의 설정만을 변경해 주면된다고 나오는데 말이다.
Disqus Comment Plugin

여러가지를 시도해 보다 결국 소스코드 자체를 변경하는 것으로 해결하였다.
icarus 테마의 경우 disqus.ejs 파일의 내용을 universal Code에서 제공하는 코드로 변경하니 정상적으로 작동되었다.
테마마다 약간의 설정이 다를수 있으니 참고정도만 하시면 되겠습니다.

언어선택 문제

현재 disqus에서는 한글을 지원하지 않는 것으로 변경되었다고 합니다.
그래서 편법으로 설정하는 방법이 있는데 편법이라 방법이 나와있는 포스팅을 공유하는 것으로 대체하겠습니다.
디스커스 한글 세팅을 해보자