Github Blog 만들기 #2 - 댓글창 추가

27 Sep 2023 in Development Log / Blog Log on Blog

오늘은 게시글들에 기본적인 댓글창을 추가해보려고 합니다.
소통이 되지 않으면 고이고 부패합니다. 틀린 내용도 지적받을 수 없겠죠

hydejack에서 기본적으로 제공하는 댓글창은 Disqus입니다.
하지만 저는 Giscus를 사용하려고 합니다.
왜냐하면 저는 github를 사용하고 있고, Giscus는 github 계정으로 로그인이 가능하기 때문입니다.
또한, Giscus는 무료이고, 광고가 없습니다.
깃허브의 Discussion을 사용하여 글별 댓글창이 구성되는 점도 마음에 들었습니다. 그럼 시작해볼까요?

_config.yml 파일 수정

# file: `_config.yml`

  - scope:
      type:            posts
    values:
      comments:        true

가볍게 주석으로 되어있는 부분을 풀어주면 됩니다.(9.1.6버전)
주석이 해금되면 전체 Post에 Comments 영역이 활성화됩니다.

comment html 수정

이제 댓글창이 구현되는 부분을 수정해봐야겠죠?

<!-- file: `_includes/my-comments.html` -->

-------------------------

<% assign disqus = site.disqus | default:site.disqus_shortname %>
<% if disqus %>
<div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
<script>!function(w, d) {
  if (d.getElementById("disqus_thread")) {
    if (w.DISQUS) {
      w.DISQUS.reset({
        reload: true,
        config() {
          this.page.url = w.location.href;
          this.page.title = d.title;
        },
      });
    } else {
      w.disqus_config = function disqusConfig() {
        this.page.url = w.location.href;
        this.page.title = d.title;
      };
      w.loadJSDeferred(d.getElementById("_hrefDisqus").href + '/embed.js');
    }
  }
}(window, document);</script>
<% endif %>


-------------------------

잘은 모르지만 if disqus가 있는 걸로 봐서 _config.yml 의 disqus관련 설정이 활성화되면 동작할 것 같습니다.(추측입니다)
코멘트 그려주는 부분이 맞는지 아무렇게나 글자를 써봅니다.

빙고였습니다. 오늘은 운이 좋네요.
그려주는 html 파일을 찾았으니 이제 Giscus에서 만들어주는 코드를 붙여넣어주면 됩니다.

Giscus code 에서 관련된 내용 작성해주면 <script> 를 줍니다.

먼저 public repository를 선택합니다. 당연히 publish할 github.io repository를 선택합니다.

Giscus App 에서 giscus 앱을 설치합니다.
저는 Repository 단위로 github.io 레포지토리에만 설치했습니다.

마지막으로 Repository에 Discussion 기능 활성화 활성화 해주면 됩니다.

해당 Repository의 Settings -> Genenral -> Features -> Discussions -> Enable Discussions 체크

이후 스크롤을 내리면서 원하는 기능을 체크하다보면 사용 script를 완성시킨 소스코드를 줍니다.

바로 요것을 my-comments.html 처음에 붙여넣어주시면 됩니다.
저는 기존 내용은 모두 주석처리하고 giscus script를 붙여넣었습니다.

<!-- file: `_includes/my-comments.html` -->

<script src="https://giscus.app/client.js"
        data-repo="nomoreFt/nomoreFt.github.io"
        data-repo-id="샬라샬라"
        data-category="Announcements"
        data-category-id="샬라샬라"
        data-mapping="title"
        data-strict="0"
        data-reactions-enabled="1"
        data-emit-metadata="0"
        data-input-position="top"
        data-theme="light"
        data-lang="ko"
        crossorigin="anonymous"
        async>
</script>

이제 댓글창이 잘 나오는지 확인해보겠습니다.

감정표현도 있고 예쁘게 잘 달리네요. 댓글창이 맨 아래가 아닌 위에 나오는건 제가 Giscus code 여기서 체크박스 해줬기 때문입니다.

GitHub Discussions

실제 깃허브 Discussions에 생성되는 모습입니다. 재밌네요.

Templates (for web app):

Error