Giscus Comment 설정

Giscus

GitHub Discussions 로 작동하는 댓글 시스템

사용 방법

1. 댓글창을 사용할 _Repository_에 [Settings] - [General] - [Features] - Discussions 확인
2. 해당 _Repository_에 giscus App 설치
3. giscus Guide 에서 자신이 사용할 Repository, Discussion 카테고리, 기능 확인
   • 댓글 위에 댓글 상자 배치
     • [댓글 입력 창 - 댓글 창 상단 배치 여부] 를 나타내는 부분입니다.
   • 댓글 느리게 불러오기
     • Scroll 이 어느정도 진행되었을 때 댓글을 로딩 하는 기능입니다.
4. 채워진 [giscus 사용] 의 <script> 태그를 웹 사이트 템플릿에 추가

giscus 적용

얻게 된 <script>를 활용해 다음 방법들을 적용

<script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="ko"
        crossorigin="anonymous"
        async>
</script>

방법 [ 1 ] : _config.yml 수정

comments:
  # Global switch for the post comment system. Keeping it empty means disabled.
  provider: giscus # [disqus | utterances | giscus]
  # The provider options are as follows:
  # disqus:
  #   shortname: # fill with the Disqus shortname. › https://help.disqus.com/en/articles/1717111-what-s-a-shortname
  # # utterances settings › https://utteranc.es/
  # utterances:
  #   repo: # <gh-username>/<repo>
  #   issue_term: # < url | pathname | title | ...>
  # Giscus options › https://giscus.app
  giscus:
    repo: # <gh-username>/<repo>
    repo_id: # <repo_id>
    category: # <category>
    category_id: # <category_id>
    mapping: # optional, default to 'pathname'
    input_position: # optional, default to 'bottom'
    lang: # optional, default to the value of `site.lang`
    reactions_enabled: # optional, default to the value of `1`

• 해당하는 변수들의 값을 설정
  • _Chirpy_를 사용하고 있는 경우 lang 부분에서 `ko` 를 명시적으로 설정해줘야 오류가 안 생긴다고 합니다.
• [includes] - [comments] - [giscus.html] 부분에 _giscus 관련 설정이 있습니다.

방법 [ 2 ] : post.html 수정

  ---
  </div>
  <!-- div.post-tail-wrapper -->

    <script src="https://giscus.app/client.js"
        data-repo="[ENTER REPO HERE]"
        data-repo-id="[ENTER REPO ID HERE]"
        data-category="[ENTER CATEGORY NAME HERE]"
        data-category-id="[ENTER CATEGORY ID HERE]"
        data-mapping="pathname"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="bottom"
        data-theme="preferred_color_scheme"
        data-lang="ko"
        crossorigin="anonymous"
        async>
    </script>
</article>

• Chirpy 기준 [_layouts] - [post.html] 하단 부분에 <script> 부분을 그대로 때려박습니다.

적용 후

설정이 되어 있는 부분들은 설정 그대로 쓰고 싶기도 하고 색상 반전 시 theme 설정을 사용하고 싶어 [방법 1] 을 적용하려 했습니다. 다만 버전의 문제인지 제대로 적용되지 않아 [방법 2] 에서 data-theme 을 고르고 골라 transparent_dark 를 적용하는 것으로 타협을 봤습니다. 혹시라도 해당 이유를 아시는 분이 계신다면 댓글을 남겨주시길 바랍니다.

Reference

✔ giscus Repository | giscus repository
✔ giscus App | giscus App
✔ giscus Guide | giscus Guide