wnsdnn blog

Appearance

Return to top
On this page

17 Sep 2022

[Vitepress] 깃블로그에 댓글 기능 만들기 (+Utterances)






Utterances 소개

일단 댓글 기능을 만드는데 사용할 Utterances에 대해 소개해볼까한다.

Utterances가 뭘까?

Utterances는 Github의 Issues기능을 기반으로한 댓글을 사용하게 해주는 플러그인이다.

Utterances의 장점

  • 설치 및 관리가 간편하다
  • 깃허브 계정만 있어도 댓글을 작성할 수 있다.
  • 댓글 알람을 받을 수 있다.
  • markdown문법을 이용하여 댓글을 작성할 수 있다.

등 여러 장점들이 있다.





Utterances 설치

일단 Utterances를 설치 할려면 댓글을 등록할 Github Repository가 필요하다.

필자는 blog_comment라는 Github Repository를 만들었다.


Repository를 만든 다음 이 링크로 들어가서

install 버튼 클릭 후


Only select repositories 선택 후 방금 만든 Github Repository를 선택후 Install 해준다.





Vitepress 코드 수정

component 생성 

.vitepress/components/Comment.vue

해당경로로 파일 생성

<template>
  <div ref="comment"></div>
</template>
<script>
export default {
  mounted() {
    const utterances = document.createElement('script');
    utterances.type = 'text/javascript';
    utterances.async = true;
    utterances.crossorigin = 'anonymous';
    utterances.src = 'https://utteranc.es/client.js';
    
    utterances.setAttribute('issue-term', 'pathname'); // pathname | url | title | og:title 중 택 1
    utterances.setAttribute('theme','github-light');
    utterances.setAttribute('repo', "Github Name/Github Repository" );

    this.$refs.comment.appendChild(utterances);
  }
}
</script>

"Github Name/Github Repository"에 "자신의 깃허브이름/아까만든 Repository명" 삽입

ex) "wnsdnn/blog_comments"



index.js 수정 

.vitepress/theme/index.js

...
import Comment from '../components/Comment.vue'

export default {
    ... // 생략
    enhanceApp({ app }) {
      app.component('Comment', Comment)
    }
    ...
}

위에서 만든 component import후 export하는데 해당 함수 추가



잘 작동하는지 확인하기 

# Comment 태그확인하기

## 댓글
---

<Comment />

아무 .md 파일에서 Comment 태그 추가시 잘 작동하는 걸 볼 수 있다.




댓글