블로그 댓글, 반응 추가 (giscus)
작성일: 2023-10-19이번에는 블로그에 댓글을 추가해보겠습니다.
댓글 기능을 추가하기 위해 GitHub Discussions로 작동하는 댓글 시스템인 giscus 을 사용했습니다.
giscus 설정
giscus에서 제공하는 페이지에서 쉽게 설정할 수 있습니다.
저장소
블로그 저장소에 giscus를 추가하려면 다음 조건이 선행되어야 합니다.
- 공개 저장소여야 합니다. 그렇지 않으면 방문자들은 Discussion을 볼 수 없습니다.
- giscus 앱이 설치되어 있어야 합니다. 그렇지 않으면 방문자들은 댓글과 반응을 남길 수 없습니다.
- Discussions 기능이 해당 저장소에서 활성화되어 있어야 합니다.
페이지 ↔ Discussions 연결
Discussion 제목이 페이지
Discussion 카테고리
카테고리는 GitHub Discussions에서 구분할 카테고리로 General을 선택했습니다.
기능
댓글과 추가로 반응을 남길 수 있도록 메인 포스트에 반응 남기기 를 선택했습니다.
그리고 성능을 위해 댓글 느리게 불러오기도 선택했습니다.
테마
giscus 사용
위에서 선택한 설정이 스크립트 태그 형태로 만들어지고 이를 마크다운 파일을 html 파일로 만들어 주는 부분에 넣어줍니다.
저의 경우는 just-the-docs를 사용하고 있어 아래 경로에 있는 default.html 파일에 추가해 주었습니다.
_layouts/default.html
---
layout: table_wrappers
---
...
{ % if page.has_children == false % }
<script src="https://giscus.app/client.js"
data-repo="devshjeon/devshjeon.github.io"
data-repo-id="R_kgDOJ0EQOQ"
data-category="General"
data-category-id="DIC_kwDOJ0EQOc4CaQfX"
data-mapping="title"
data-strict="0"
data-reactions-enabled="1"
data-emit-metadata="0"
data-input-position="bottom"
data-theme="light"
data-lang="ko"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
{ % endif % }
댓글은 자식 글에만 남기고 싶어 page.has_children == false 조건을 추가했습니다.
테스트
테스트를 하면 글에 댓글이 잘 구성된 것을 확인할 수 있고, 댓글 입력 시 GitHub Discussions에 입력한 댓글을 확인할 수 있습니다.
