[blog] 블로그 댓글 utterances

github에 올린 페이지에 댓글달기 기능을 추가하고 싶다면, utterance를 사용하시면 됩니다. utterances는 github의 이슈를 만드는 방식으로 댓글을 생성합니다.

사용법

먼저 utterances git 페이지 로 이동해주세요.

1. utterances 연동

이 단계에서 github의 issue를 만들 수 있도록 연동을 하고 권한부여를 해줍니다.

install 버튼을 클릭하고 연동해줄 자신의 레포지토리를 선택합니다.

전 블로그만 연동할거라 bellasimi.github.io만 선택했습니다. 다시 install 버튼을 클릭하면 비번입력창이 뜨고 비번 확인 후 스크립트 생성페이지로 이동합니다.

2. 스크립트 생성

생성된 github 이슈를 화면에 표시하기 위해 utterances 스크립트를 생성해야 되는데요.

연동후 위와 같은 페이지가 나타나지 않았다면 여기로 들어가서 작업해주세요.

repo 하단 입력창에 권한을 부여한 레포지토리를 [user name]/[레포지토리명] 형식으로 입력하고,

하단 Blog Post <-> Issue Mapping 메뉴에서 이슈에 작성된 내용중 해당 페이지에 관한 댓글만 표시하기 위한 방법을 원하는 대로 선택합니다.

Issue Label은 이슈가 생성될 때 다른 이슈와 구별하기 위해 해당 이슈에 라벨링을 할지 선택하는 옵션입니다. 설정을 굳이 할 필요 없어서 skip했습니다.

원하는 Theme이 있다면 선택하고

위 속성값 선택으로 최종 완성된 스크립트를 복사해주세요.

3. 사이트에 적용

<script src="https://utteranc.es/client.js"
        repo="bellasimi/bellasimi.github.io"
        issue-term="url"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

❗ jekyll minimal-mistakes 사용시

위 복사한 내용을 쓰지 않고, 위내용을 바탕으로 config.yml에 다음과 같이 입력해줍니다.

❗ 다른 테마 사용시

해당 스크립트를 posts.html의 댓글 div에 넣어줍니다.

❗ 티스토리 등 블로그 스킨 사용시

티스토리 관리로 이동해서 스킨 편집을 클릭, html 편집을 누른 뒤 댓글 영역 태그인 를 검색해서 그 안의 기존 댓글 영역을 삭제하고

안에 위 스크립트를 넣어줍니다.