[Git Page Jekyll Blog] - [10] 댓글 기능 넣기

Jekyll 정적 웹페이지로는 구현할 수 없는 댓글 기능을 댓글 서비스 제공자로부터 서비스 받아서 구현해보자. 많은 댓글 서비스 제공자가 있는데 그중 ‘Disqus’ 의 댓글 기능을 내 포스트에 나타나도록 할것이다.

Jekyll 정적 웹페이지의 한계

Jekyll 정적 웹페이지는 모든 페이지를 미리 만들어놓고 보여주기만한다.

따라서 Jekyll은 이 포스트 Jekyll에서도 언급했지만 Jekyll 만으로는 댓글 데이터를 저장해 둘 방법이 없다는 한계점을 가진다.

이를 극복하기 위해서는 별도의 댓글 서비스 제공자로부터 댓글 데이터 저장 기능을 서비스 받아야 한다. 아니면 내가 직접 댓글 서비스를 제공하는 서버를 만들고 운영해야한다.

Disqus 댓글 기능 구현

댓글 기능을 구현하기 위해 Disqus 댓글 서비스를 받아보자.
내가 댓글 기능을 넣을 특정 위치를 지정하면 Disqus는 그곳에 댓글 기능을 구현하고 별도로 마련돼 있는 DB에 연결한다. 이를 통해 나 대신 댓글 데이터를 저장하고 관리해준다.

1. Disqus Sign in(가입)

Disqus 사이트로 가서 계정을 생성한다.

2. Get Started

가입이 완료되면 Disqus 로그인한 다음 Disqus 대문 페이지로 가자. 거기서 ‘Get Started’ 버튼을 클릭한다. 그러면 아래와 같은 화면이 뜨면서 댓글 연동 설정을 시작한다. 두번째 버튼 I want to install Disqus on my site 를 클릭한다.

3. Disqus Website Name

Website Name을 정하자. Disqus에서 내 블로그를 이르는 명칭이라고 할수 있다.
다른곳에 드러나는 이름은 아니지만 이 이름 기반으로 댓글 서비스 URL과 코드가 생성되고 내 블로그와 연동될 것이므로 너무 막 넣진 말자.

4. Payment

댓글 서비스의 지불 정책을 설정할 수 있는데 미안한 말이지만 유료로 사용할거였으면 내가 개인 서버를 운영했겠지…
유료 기능을 사용할지는 나중에 결정하는 것으로 하고 지금은 Basic 정책의 ‘Subscribe Now’ 버튼을 누르자.

5. 블로그 플랫폼

플랫폼에 따라서 내 블로그에 댓글 서비스를 주입할때 필요한 코드가 달라지므로 필요한 과정같다. Jekyll을 찾아서 선택해주자. 난 처음에 Jekyll 로고를 겨우 찾았다.. 왜 이렇게 눈에 안띄는거지… 힌트: 검정색

6. Universal Embed Code

이제 댓글 기능을 삽입할 포스트로 가자.

1 항목 설명을 보면 댓글 기능을 사용하려면 머리말에 comments: true 값을 지정해주라는 설명이 나온다.

그리고 2 항목에서는 아래 코드처럼 포스트에서 댓글이 들어갈 자리를 마련하고 ‘Disqus Universal Embed Code Guide‘를 그 자리에 삽입하라고 한다.

---
layout: default
comments: true
---
...포스트 내용들...


{% if page.comments %}
[이곳에 Universal Embed Code 가 들어간다.]
{% endif %}


...다른 요소들...

Universal Embed Code 원본

그 코드는 아래와 같다.

<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 = 'https://[내 Disqus 이름].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>

Universal Embed Code 수정

원본 코드 그대로는 사용할 수 없다. 코드에서 몇가지를 수정하자.

• 코드 주석 제거
  주석 처리되어 있는 코드가 있다. var disqus_config으로 시작하는 부분부터 주석을 모두 제거한다.

• URL 값 수정
  • 주석 제거 한 곳에서 PAGE_URL을 "{{ page.url | absolute_url }};" 로 바꾼다.
  • 주석 제거 한 곳에서 PAGE_IDENTIFIER를 "{{ page.id }}";
• s.src 수정
  “DON’T EDIT BELOW THIS LINE” 라고 써진 부분이 있다. 그 아래부터는 건드리지 말라는 뜻이다. 하지만 s.src 값이 제대로 들어가있지 않으면 수정이 필요하다. 따라서 그 값을 유지 보수가 쉽도록 변경한다.
  s.src = 'https://{{ site.comments.disqus.shortname }}.disqus.com/embed.js'; 로 그 줄을 바꿔 넣는다.

아래는 수정 완료된 Universal Embed Code 이다.

<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 | absolute_url }};";  // Replace PAGE_URL with your page's canonical URL variable
  this.page.identifier = "{{ page.id }}";; // 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 = 'https://{{ site.comments.disqus.shortname }}.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 설정은 완료이다! 다른 설정들은 모두 패스한다.

7. _config.yml 설정

우리가 위에서 한 작업을 보면 Universal Embed Code의 변수 값들을 박아 넣어서 고정하는 것이 아니라 liquid 변수로 수정했다. 이 liquid 변수들을 Jekyll의 /_config.yml 파일에서 글로벌 변수로 정의하자.

그렇게 하면 나중에 변수값들을 변경하고자 할 때 /_config.yml 파일의 값만 수정해서 댓글 기능을 사용하는 모든 포스트에 수정된 값을 전파 시킬수 있기 때문에 효율적인 유지보수가 가능하다.

_config.yml에 아래 내용을 추가하자.

comments:
  disqus:
    shortname: "[내 Disqus Shortname]"

이때 [내 Disqus Shortname] 은 Disqus 사이트의 Admin 화면에서 내 블로그를 선택하자.

그리고 Topbar의 Setting 메뉴를 클릭한 후 왼쪽 사이드바의 General 메뉴를 보면 수정 불가능한 Shortname이라는 값이 있다.

이 값을 _config.yml 파일의 [내 Disqus Shortname] 위치에 넣어준다.

8. 완료

아래와 같은 댓글 기능 추가 완료!
여기까지 했는데 댓글이 안보인다면 우려되는 점이 한가지 있으므로 Trouble Shooting을 보자

Tip

Universal Embed Code 재사용

포스트 마다 Universal Embed Code를 매번 삽입하지 말고 include 파일로 만들어 놓자. (예. /_includes/comment-disqus.html)
그다음 레이아웃에서 include 파일을 불러오도록 하면 반복 코딩을 없앨 수 있다.

Trouble Shooting

테스트에서 댓글이 보이지 않으며 오류 메시지가 나옴

개발자 도구의 console에 아래와 같은 에러 로그가 나오고 댓글이 작동하지 않을 수 있다.

embed.js:44 Uncaught TypeError: Cannot read property 'appendChild' of null
    at k (embed.js:44)
    at Object.l [as isSerif] (embed.js:44)
    at h.i.toJSON (embed.js:44)
    at Object.c.loadEmbed [as _loadEmbed] (embed.js:46)
    at embed.js:46
k @ embed.js:44
l @ embed.js:44
i.toJSON @ embed.js:44
c.loadEmbed @ embed.js:46
(anonymous) @ embed.js:46

테스트에서 댓글 기능을 작동 시키려면 아래처럼 환경 변수를 하나 설정해서 Jekyll을 실행시켜야 한다.

JEKYLL_ENV=production bundle exec jekyll serve

이제 댓글 기능이 제대로 삽입 되었는지 확인할 수 있다.
하지만 사이트 URL이 다르기 때문에 댓글을 작성할 순 없다.