[Jekyll] 지킬(Jekyll)에 Disqus 추가하기

Adding Disqus To Jekyll

지킬(Jekyll)에 Disqus 추가하기

Disqus로 블로그 포스트에 댓글 기능을 추가해보자!

Disqus?

무료로! 간편하게! 블로그 댓글 기능을 추가할 수 있는 API입니다.

1. Disqus 계정 만들기

1.1 Disqus 접속

먼저 Disqus에 접속합니다.
(아래 이미지를 클릭하시면 바로 접속하실 수 있습니다.)

1.2 Disqus 가입

오른쪽 위 상단의 Get Started를 클릭합니다.

1.3 Disqus 로그인

회원가입 후 Log In 버튼을 통해 로그인을 합니다.

2. Disqus에 Jekyll 등록 및 설치

2.1 Disqus 유형 선택

로그인이 완료되었다면 아래와 같은 화면이 나타납니다.
우리는 Jekyll에 Disqus를 추가할 것이기 때문에 아래에 있는 I want to install Disqus on my site를 선택합니다.

2.2 Jekyll 정보 입력

아래 필드를 모두 입력합니다.
Website Name에는 Jekyll Github Blog 주소를 입력해주시면 됩니다.
(ex. infiduk.github.io)
입력이 완료되었다면 Create Site를 눌러 넘어갑니다.

2.3 Plan 선택

Plan을 선택하라고 나오는데.. 위에 있는 것들은 유료이기 때문에(ㅎㅎ) 밑에 있는 Basic을 선택합니다.

2.4 Platform 선택

다양한 플랫폼들 중, 우리는 Jekyll을 사용하고 있으니까 Jekyll을 선택합니다.

2.5 Disqus를 Jekyll에 적용하는 방법

Disqus에서 이제 어떻게 하면 Jekyll에 이걸 적용시킬 수 있는지에 대한 가이드 방법을 알려줍니다.
아래에서 다시 설명해드리도록 하겠습니다.

3. Jekyll 설정 바꾸기

테마에 따라 약간씩 다른 부분이 있을 수 있습니다.

Jekyll의 config 파일에서 comments 부분이 있는지 확인해주세요.

...
comments:
  // default가 false로 설정되어있을 수 있습니다.
  // disqus로 바꿔주세요.
  provider: disqus
  ...
disqus:
  // infiduk 부분에 본인의 것을 쓰시면 됩니다.
  shortname: https-infiduk-github-io

본인의 Jekyll 코드 안에 disqus.html파일이 있다면 아래 과정은 생략하셔도 됩니다.

comments 부분을 바꾸셨으면 위의 2번 방법에 있던 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');
  // infiduk 부분에 본인의 것을 쓰시면 됩니다.
  s.src = 'https://https-infiduk-github-io.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>

_include 폴더 안에 disqus.html라는 이름의 파일로 만들어주세요.

3.1 post별로 댓글 기능 추가하기

댓글 기능을 추가하고자 하는 post의 .md파일 상단 부분에 아래 코드를 추가해줍니다.
```
---
...
comments: true
...
---
```
맨 아래 부분에는 이 코드를 추가해주시면 됩니다.

3.2 전체 post에 댓글 기능 추가하기

post의 footer를 담당하는 html 파일에 아래의 코드를 추가해주시면 됩니다.

4. 발생할 수 있는 에러

Disqus를 로드할 수 없다는
- disqus.html 파일에서 s.src 경로가 제대로 지정되지 않았을 경우 발생할 수 있습니다.
```
// infiduk 부분에 본인의 것을 쓰시면 됩니다.
  s.src = 'https://https-infiduk-github-io.disqus.com/embed.js';
```
- Disqus의 Trusted Domain에 주소가 등록되지 않아 발생할 수 있습니다.
  - Admin을 선택해주세요.
  - 본인의 블로그 링크를 선택해줍니다.
  - Setting의 Advanced탭으로 넘어갑니다.
  - Trusted Domain에 아래 링크들을 추가해줍니다.
    (본인의 주소로 바꾸어 추가해주세요!!)

완료!

이전[Study] 블록체인 면접 공부

다음[Jekyll] 지킬(Jekyll)에 Google Analytics 추가하기