온정완

AI/플랫폼 개발을 공부합니다.


개발 블로그에 댓글 기능을 추가해보려고 한다.
utterances를 사용하여 댓글 기능을 추가하려고 하는데, 인터넷에 나와있는 방법으로는 제대로 작동을 안해서 내가 삽질해서 얻은 노하우를 공유하고자 한다.
해당 내용은 minimal-mistakes 사용자 기준으로 작성되었습니다.


0. utterances 설치

image


댓글 플랫폼 중 utterances가 가볍고 괜찮다고 하길래 해당 댓글 플랫폼을 사용하기로 했다. 댓글을 달기 위해서는 깃허브 계정이 필요하다고 한다. 방문자분들은 개인 github 계정을 가지고 계실 것으로 예상되기 때문에 무리없이 사용해도 될 것 같다. 댓글에 마크다운도 사용 가능하다고 한다. 아래 링크를 클릭해서 먼저 utterances를 설치한다.

utterances설치


image


1. 댓글 이슈가 올라올 Repository 생성

나는 그냥 github.io Repository를 사용하였다. 댓글이 달리면 해당 Repository에 issue로 올라온다고 한다. 혹시 댓글 전용 Repository를 만들고 싶으면, 미리 생성하도록 하자.

Repository링크


2. config.yml 수정

minimal-mistakes를 사용한다면, install에서 설정한 값대로 config.yml 파일을 수정해주면 된다. 수정해야 할 것들은 다음과 같다.

image

  • repository
    • 위에서 댓글 Issue 가 올라올 곳으로 선택한 그 저장소의 permalink
  • provider
    • utterances 를 앞으로 사용할 것이므로 utterances 를 입력
  • theme
    • 위에서 설정한 테마 (본인은 gruvbox-dark를 이용)
  • issue_term
    • 맵핑키. 웬만하면 default값을 사용하자

단, 위에서 설정한 레파지토리는 private이 아니어야한다(private일 경우 댓글창 표시 안됨). 따라서 나는 github io는 private으로 전환하고 따로 public 댓글 repo만 만들어서 운용중이다.



중요!

만약 defaults의 comments가 true로 되어있지 않다면, 꼭 true로 바꾸어준다. 그렇지 않으면 댓글이 표시되지 않으니 꼭 true로 바꾸어준다.

image


3. 그래도 안 될 경우

위에서 설정한 세팅대로 _includes/comments-providers/utterances.html을 수정한다.

  <script>
    'use strict';

    (function() {
      var commentContainer = document.querySelector('#utterances-comments');

      if (!commentContainer) {
        return;
      }

      var script = document.createElement('script');
      script.setAttribute('src', 'https://utteranc.es/client.js');
      script.setAttribute('repo', 'On-JungWoan/On-JungWoan.github.io'); # 본인 Repository를 정확하게 적어준다.
      script.setAttribute('issue-term', 'pathname');
      script.setAttribute('theme', 'github-light');
      script.setAttribute('label', 'blog-comment')
      script.setAttribute('crossorigin', 'anonymous');

      commentContainer.appendChild(script);
    })();
  </script>

댓글남기기

참고