Q. 개발 블로그에 댓글창으로 많이 쓰는 utteranc.es 추가 방법은?

어렵지 않으니 천천히 따라하면 쉽게 추가할 수 있습니다.

1. github에 blog-comments 등의 이름으로 저장소 추가

2. https://github.com/apps/utterances 가서 install 클릭

3. 추가한 저장소를 utterances와 연결

 

4. script 만들기

utterances install guide 를 보면 자동으로 script를 생성해 줍니다.

 

앞에서 만든 저장소 owner/repo 이름을 입력해야 합니다.

이 예제에서는 taptorestart/blog-comments로 했습니다.

 

그리고 원하는 issue-term을 선택하면 됩니다. title로 선택했습니다.

url로 하게 되면 문자 주소를 쓰는 경우 한글이라 url encoding되어 읽을 수 없게 되기 때문입니다.

 

 

생성된 코드

<script src="https://utteranc.es/client.js"
        repo="taptorestart/blog-comments"
        issue-term="title"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

5. script를 블로그에 추가

블로그 관리 - 스킨 편집 - html 편집을 누릅니다.

어렵지 않으니 천천히 따라하면 쉽게 추가할 수 있습니다.

1. github에 blog-comments 등의 이름으로 저장소 추가

2. https://github.com/apps/utterances 가서 install 클릭

3. 추가한 저장소를 utterances와 연결

 

4. script 만들기

utterances install guide 를 보면 자동으로 script를 생성해 줍니다.

 

앞에서 만든 저장소 owner/repo 이름을 입력해야 합니다.

이 예제에서는 taptorestart/blog-comments로 했습니다.

 

그리고 원하는 issue-term을 선택하면 됩니다. title로 선택했습니다.

url로 하게 되면 문자 주소를 쓰는 경우 한글이라 url encoding되어 읽을 수 없게 되기 때문입니다.

 

 

생성된 코드

<script src="https://utteranc.es/client.js"
        repo="taptorestart/blog-comments"
        issue-term="title"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>

5. script를 블로그에 추가

블로그 관리 - 스킨 편집 - html 편집을 누릅니다.

찾아서 그 밑에 script를 추가합니다.

글 밑에 추가

6. 끝! 잘 나오는지 확인

블로그 아무 글이나 눌러서 확인해 봅니다.

깃허브 로그인한 뒤 테스트로 입력해 봅니다.

잘 입력되는 것을 확인할 수 있습니다!

깃허브 저장소에 가보면 issues가 추가되어 있고, 아까 title로 설정했기 때문에 블로그글 제목으로 issue가 추가된 것을 확인할 수 있습니다.

실제 이슈를 눌러보면 감사합니다! 라고 적힌 것을 볼 수 있습니다.

테스트가 끝났으니 삭제하면 해당 댓글도 안 보이게 됩니다. 깃허브 상에서 이슈는 남아 있게 됩니다.

찾아서 그 밑에 script를 추가합니다.

글 밑에 추가

6. 끝! 잘 나오는지 확인

블로그 아무 글이나 눌러서 확인해 봅니다.

깃허브 로그인한 뒤 테스트로 입력해 봅니다.

잘 입력되는 것을 확인할 수 있습니다!

깃허브 저장소에 가보면 issues가 추가되어 있고, 아까 title로 설정했기 때문에 블로그글 제목으로 issue가 추가된 것을 확인할 수 있습니다.

실제 이슈를 눌러보면 감사합니다! 라고 적힌 것을 볼 수 있습니다.

테스트가 끝났으니 삭제하면 해당 댓글도 안 보이게 됩니다. 깃허브 상에서 이슈는 남아 있게 됩니다.