[Vitepress]블로그에 Utterances로 댓글 기능 만들기

 (Vitepress, Vuepress) + Utterances 댓글 기능 만들기 Vitepress, Vuepress 두 개다 가능합니다.

이 포스팅은 필자가 댓글 기능을 추가할 당시 vitepress는 없고 vuepress만 검색되어서 눈물을 머금고 쓰는 글입니다.

 

Utterances

시작하기 앞서 간단히 설명하다면

Utterances는 GitHub Issue 기반으로 댓글을 작성할 수 있게 해줍니다.

 

장점

• 깃허브 계정만 있어도 댓글을 작성할 수 있다.
• Github issue 기반으로 작성되므로 관리도 쉽고 직관적이다.
• markdown문법을 이용하여 댓글을 작성할 수 있다.
• 다른 블로그 이전해도 기존 댓글들을 모두 그대로 가져갈 수 있다.
• 그리고 솔직하게 필자는 이게 멋져 보였다. 이 정도는 하는 사람이야! 느낌

사용방법

---

1. 깃허브 레포지터리 생성

그냥 깃허브 블로그 Repository에 해도 상관은 없지만 필자의 경우는 블로그 Repository와 댓글을 따로 관리하기 위해 분할해서 만들었다.

 

---

2. utterance를 Install 설치한다.

아래 링크로 접속하여 설치하면 된다. 설치를 할 때 옵션이 두 개 있는데

1. 댓글이 모든 저장소의 Issue 되게 할지
2. 특정 한 저장소의 Issue 되게 할지

모든 저장소에 올리거면 레포를 안 만들었지 Only Select Repositories를 통해, 댓글 Issue 가 올라올 저장소로 위에서 생성한 레포를 선택한 후 Install 하면 된다.

 

https://github.com/apps/utterances

GitHub: Let’s build from here

---

3.components생성

.vitepress/components/Comment.vue // vitepress경우
.vuepress/components/Comment.vue // vuepress경우

해당 경로에 Comment.vue 파일을 생성한다.

<template>
  <div ref="comment" style=" margin: 120px 0px 0px 0px;"></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"); // 1번 
    utterances.setAttribute("theme", "photon-dark");  
    utterances.setAttribute("repo", `아까 만들어둔 repo명 ex)kimjuneseo/blog_comment`);  // 2번

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

1. repo 위에서 선택한 래포를 적어준다.

 ex) kimjuneseo/blog_comment.

 

2. Blog Post - Issue Mapping

이슈를 블로그의 어떤 페이지와 매핑을 시킬지 Key를 결정한다.

체크한 부분들을 입력해준다. 필자는 고유하고 수정을 하지 않을 것 같은 pathname을 선택했다.

---

4. index.js수정

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

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

---

5. 적용하기

원하는 파일에서 <Comment />를 추가해주면 끝입니다!.

정상적으로 작동하시는 걸 보실 수 있습니다.!  아래링크로 들어가셔서 댓글 달아보세요.

https://kimjuneseo.github.io/Daily/comment.html