Github Blog 만들기 - Utterances 댓글 기능 추가

게시 2024/07/15

By Choitaeyang

2 분읽는 시간

utterances 댓글기능 사용해보기

utterances : Github의 이슈를 이용해 댓글로 표시하는 기능

utterances.app 홈페이지에 접속하면 오른쪽에 install 탭이 있다. 버튼을 클릭하여 설치해준다.

필자는 이미 설치되어있어 Configure로 표시

설치 후에 github login 창이 뜬다면 login 후 진행

댓글기능을 적용할 하나의 레파지토리에 적용하기 위해 select 해준다.

정상적으로 설치가 됐다면 기존의 Utterances 페이지로 돌아온다.

Configuration

Utterances 페이지의 중간지점에 configuration tab에서 나의 레파지토리 주소를 입력해준다.
입력형식 저장소ID/저장소명
ex: sunny14578/sunny14578.github.io

Enable Utterances

입력 후 페이지를 내리다 보면 Enable Utterances tab 에서 script code를 확인할 수 있다.
두번째 줄의 repo= 부분에 전에 입력한 값이 나와있다면 설정 끝

html file에 적용하기

위 스크립트를 복사한 후 필자와 같이 Jekyll thema를 이용한 구조에서는 _layouts/post.html 파일의 맨 밑에 넣어주면 된다.

  
    <!-- .post-tail-bottom -->
  </div>
  <!-- div.post-tail-wrapper -->

  <!-- Utterances 댓글 스니핏 삽입 -->
  <script src="https://utteranc.es/client.js"
        repo="sunny14578/sunny14578.github.io"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
  </script>

테스트

위 진행사항까지 문제없이 적용됐다면 포스팅 화면 맨아래에 아래와 같이 댓글을 적을 수 있는 탭이 적용됐을것이다. 댓글을 적을 수 없다면 빨간박스 안의 버튼이 로그인 버튼으로 활성화 되어있을 것이다. 로그인 후 사용가능!

댓글을 추가했다면 utterances를 적용시킨 레파지토리 issues에 저장된다.

내가 겪은 문제

댓글을 적었으나 저장되지 않는 현상 필자는 fork 해와서 블로그를 적용했는데 이 때 issues tab이 생성되지 않는 경우가 있다. issues tab을 생성해주기 위해 해당 레파지토리의 setting 탭에서 Features의 Issues 체크박스를 활성화 해준다.

Github Blog

Utterances comments