깃허브 블로그에 댓글 기능 추가하기 (feat. Utterances, Disqus) (+ react, vue)

깃허브 블로그에 댓글 기능 추가하기 | 기원's Study(ing)

(위의 사이트에서 보시면 더 쾌적하게 보실 수 있습니다.)

 

깃허브 블로그와 같은 개인 블로그를 사용하시는 분들은 utterances나 disqus를 많이 사용할 것입니다.

이번엔 Github Discussions 기반으로 작동하는 giscus라는 댓글 플랫폼에 대해 작성하려고 합니다.

 

Utterances vs Disqus vs Giscus

Disqus

구글링을 하며 블로그나 여러 사이트들을 들어가보면 위와 같은 댓글을 본 적이 있을 것입니다.

Disqus의 특징은 SNS로 댓글을 달 수 있다는건데, 개발 블로그엔 어울리지 않아서 저는 사용하지 않았습니다.

게다가 댓글 기능을 적용한지 시간이 좀 지나면 광고가 달려요....ㅎ

 

Utterances

 

제가 처음으로 이용한 댓글 플랫폼입니다

SNS가 아닌 Github 기반으로 로그인하여 댓글을 달 수 있으며,

댓글들은 내가 지정해놓은 레포지토리의 **issue를 통해 관리**된다.

 

댓글 UI는 깃허브의 댓글을 그대로 사용한것으로 보이는데, 그래서인지 마크다운을 지원한다.

 

Giscus

 

현재 사용하고 있는 댓글 플랫폼인 giscus입니다.

댓글은 `Github Discussions`를 통해 관리되며 외관은 utterances와 거의 동일합니다.

Discussions 기반이다보니 리액션도 표현할 수 있고 대댓글도 달 수 있습니다.

 

또한 React, Vue, Svelte와 같은 프레임워크를 위한 라이브러리 또한 지원하기 때문에

VuePress와 같은 프레임워크 사용자들에게 최고라고 생각합니다 ㅎ

utterances와 마찬가지로 마크다운을 지원합니다.

 

 

giscus 사용법

1. 댓글을 저장할 레포지토리를 public으로 전환하기

애초에 이 글을 보는 사람들이 Github를 안할리가 없다고 생각합니다.

Github 유저라면 모를리가 없겠...죠? 생략하겠습니다 ㅎㅎ

 

 

2. Github 계정에 giscus 앱 설치하기

https://github.com/apps/giscus

위의 링크를 클릭하면 어디에 앱을 설치할건지 선택할 수 있습니다. 

본인의 계정 자체에 앱을 설치해도 되고, 특정 레포지토리에만 설치해도 상관없습니다.

 

 

3. 댓글을 저장할 레포지토리의 Discussions 기능 활성화하기

레포지토리의 Settings에 들어가서 Features 항목에 있는 Discussion을 체크해주면 됩니다.

 

 

4. giscus 댓글 커스텀하기

https://giscus.app/ko

 

위의 링크를 타고 들어가면 자신이 원하는대로 댓글 기능을 커스터마이징 할 수 있습니다.

커스텀을 끝내고 나면 페이지 하단에 아래와 같이 스크립트문이 출력됩니다.

본인 블로그에 해당 스크립트문을 붙여넣기 하면 됩니다!

 

 

 

React, Vue, Svelte와 같은 프레임워크를 이용중이라면?

https://github.com/giscus/giscus-component

gicus는 프레임워크에서도 사용할 수 있게 라이브러리를 지원합니다.

위에 링크된 저장소를 참고하여 본인의 프레임워크에 맞게 커스텀하면 됩니다.

 

 

VuePress에서 적용하기

VuePress **v2** 기준으로 작성하였습니다. 또한 `default-theme(기본테마)`를 기준으로 작성하였습니다.
VuePress v1과는 컴포넌트 작성 방법이 다르니 주의바랍니다. 

 

1. dependency 추가하기

yarn add @giscus/vue -D

 

2. .vuepress/theme/components/Comment.vue

`term` 이라는 속성이 있는데 그냥 description이라고 생각하면 됩니다.

<template>
  <Giscus
    repo=""
    repoId=""
    category=""
    categoryId=""
    mapping=""
    term=""
    reactionsEnabled=""
    emitMetadata=""
    inputPosition=""
    :theme=""
    lang=""
  />
</template>


<script setup>
import { Giscus } from '@giscus/vue';
</script>

 

 

3. .vuepress/theme/layouts/Layout.vue

https://v2.vuepress.vuejs.org/reference/default-theme/extending.html#layout-slots

위의 링크를 참고하여 원하는 위치에 댓글을 추가할 수 있습니다.

제 코드를 보면 `ParentLayout`에 template으로 `page-bottom`이 들어가 있는데, 이렇게 하면 페이지 하단에 댓글이 추가됩니다. 

<template>
  <ParentLayout>
    <template #page-bottom>
      <Comment />
    </template>
  </ParentLayout>
</template>


<script setup>
import ParentLayout from '@vuepress/theme-default/lib/client/layouts/Layout.vue';
import Comment from '../components/Comment.vue';
</script>

 

 

4. .vuepress/theme/index.js

const { path } = require('@vuepress/utils');


module.exports = {
  name: 'vuepress-theme-local',
  extends: '@vuepress/theme-default',
  layouts: {
    Layout: path.resolve(__dirname, 'layouts/Layout.vue'),
  },
  alias: {
    '@theme/HomeFooter.vue': path.resolve(__dirname, 'components/Comment.vue'),
  },
};

 

 

 

 

여기까지 잘 작성했다면 자신의 블로그에 댓글 창이 생긴 것을 볼 수 있을 것입니다! :)