[gitblog]Giscus 댓글 기능 추가

giscus로 댓글 기능 추가하기

1. giscus 앱 설치

giscus 설치 사이트에서 giscus를 설치한다.

설치하면 아래와 같은 화면이 보이는데 이 블로그에만 giscus 기능을 추가하고 싶어서 해당 레포만 추가했다.

2. 레포에 discussion 추가

Settings > General 탭에서 스크롤을 내리면 Features가 보이고, 여기서 Discussions을 체크한다.

이제 이 레포에 Discussions 탭이 생겼다.

3. giscus 설정 script 만들기

giscus 설정하는 사이트

이 사이트에서 아래 그림과 같이 설정하면 script가 만들어진다.

이 script는 깃블로그에서 그대로 활용하진 않고 여기에 있는 값들을 _config.yml 파일에 넣어주면 된다.

<script
  src="https://giscus.app/client.js"
  data-repo="chlwlstlf/chlwlstlf.github.io"
  data-repo-id="R_kgDOG8MDQA"
  data-category="Announcements"
  data-category-id="DIC_kwDOG8MDQM4CkeZa"
  data-mapping="pathname"
  data-strict="0"
  data-reactions-enabled="1"
  data-emit-metadata="0"
  data-input-position="top"
  data-theme="preferred_color_scheme"
  data-lang="ko"
  data-loading="lazy"
  crossorigin="anonymous"
  async
></script>

4. giscus.html 확인

_includes > comments-providers > giscus.html

아래는 giscus.html 파일이다. 위에서 만들어준 script 코드와 매우 유사하다.

giscus.html 파일은 _config.yml에 있는 값들을 그대로 사용하기 때문에 수정할 필요는 없다.

site.repository 이런 변수명들을 보면서 여기서 활용되는 _config.yml의 변수가 무엇인지 확인하고 변경한다.

giscus.html

5. config.yml 변경

1. comments: true 확인

# Defaults
defaults:
  # _posts
  - scope:
      path: ""
      type: posts
    values:
      layout: single
      author_profile: true
      read_time: true
      comments: true # true인지 확인!
      share: true
      related: true
      show_date: true
      toc: true
      toc_sticky: true
      sidebar_main: true
      sidebar:
        nav: "docs"

2. site.repository 부분 변경

변경 전

repository: # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"

변경 후

repository: "chlwlstlf/chlwlstlf.github.io"

3. site.comments.giscus 부분 변경

변경 전

comments:
  provider: false # false (default), "disqus", "discourse", "facebook", "staticman", "staticman_v2", "utterances", "giscus", "custom"
  giscus:
    repo_id: # Shown during giscus setup at https://giscus.app
    category_name: # Full text name of the category
    category_id: # Shown during giscus setup at https://giscus.app
    discussion_term: # "pathname" (default), "url", "title", "og:title"
    reactions_enabled: # '1' for enabled (default), '0' for disabled
    theme: # "light" (default), "dark", "dark_dimmed", "transparent_dark", "preferred_color_scheme"

변경 후

comments:
  provider: "giscus"
  giscus:
    repo_id: "R_kgDOG8MDQA"
    category_name: "Announcements"
    category_id: "DIC_kwDOG8MDQM4CkeZa"
    discussion_term: "pathname"
    reactions_enabled: "1"
    theme: "light"

6. 최종 결과

댓글 기능이 생겼다!