티스토리 댓글 스킨 Github 댓글(utterances)로 변경하기

기술 블로그를 운영하면서 댓글에도 Github 이슈처럼 마크다운 문법을 사용할 수 있었으면 좋겠다는 생각을 했다. 그래서 찾아보니 utterances라는 오픈소스 앱이 있길래 바로 적용해보았다!

 

utterances 적용해보기

1. 댓글 관리용 repository 만들기

먼저 github에 신규 repository를 생성한다. 보통 blog-comments라는 이름으로 많이 사용한다.

 

2. utterances.json 파일 생성하기

 

origins에 블로그 도메인 주소를 입력한다.

// utterances.json
{
  "origins": [
    "http://jjingho.tistory.com",
    "https://jjingho.tistory.com"
  ]
}

 

3. utterances app 추가하기

github.com/apps/utterances로 이동하여 utterances 앱을 추가해준다. 이때 방금 생성한 repository를 선택해 접근권한을 부여해야 한다.

 

4. utterances 스크립트 복사하기

utterances 앱을 인스톨하면 https://utteranc.es/로 이동된다. 입력 항목을 채우면 스크립트를 자동으로 만들어준다.

 

아니면 그냥 아래의 스크립트를 수정해서 사용해도 된다.

<script src="https://utteranc.es/client.js"
        repo="[ENTER REPO HERE]"
        issue-term="pathname"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

 

5. 블로그 HTML에 스크립트 추가하기

블로그 댓글(comments) 영역에 html 코드를 제거하고 복사한 스크립트 코드를 넣어주면 utterances 연동이 완료된다. 이를 위해 티스토리 HTML을 수정해보자.

티스토리 관리로 이동해서 스킨 편집을 클릭한다.

 

오른쪽 상단 html 편집 버튼을 클릭하자.

 

<s_rp>를 검색해서 티스토리 기본 댓글 영역을 찾는다.

 

먼저 <s_rp_container>을 삭제한다. <s_rp_container>는 기존의 댓글 리스트를 나타내는 영역이다.

 

다음은 댓글 입력창과 등록 버튼을 삭제한다.

 

아까 복사한 스크립트를 추가한다

 

적용, 새로고침으로 변경된 댓글 스킨을 확인해보자.

 

6. 댓글 테스트

실제로 댓글이 이슈로 잘 등록되는지 확인해보자.

 

정상적으로 잘 동작한다면 성공!