# vuePress 댓글 기능 Disqus로 추가하기
댓글을 가장 추가하기 쉬운 Disqus를 사용합니다.
Disqus 홈페이지에 접속하여, 현재 가지고 계신 블로그를 등록하면, https://~~~~~/embed.js라는 url를 Disqus에서 제공할 것입니다. 그 값을 꼭 복사하신 후 아래로 진행하시면 되겠습니다.
자세한 회원가입 과정은 생략하겠습니다.
# 댓글 컴포넌트
- 댓글을 가져오는 컴포넌트를 먼저 만들겠습니다.
<!-- .vuepress/components/Disqus.vue -->
<template>
<div id="disqus_thread"></div>
</template>
<script>
export default {
mounted() {
console.log("Hello!");
try {
let disqus_config = function() {
this.page.url = location.origin;
this.page.identifier = location.pathname;
};
(function() {
let d = document,
s = d.createElement("script");
s.src = "disqus에서 가져온 embed.js url를 넣어줍니다";
s.setAttribute("data-timestamp", +new Date());
(d.head || d.body).appendChild(s);
})();
} catch (e) {
// some error
}
}
};
</script>
# 사용
- 포스팅 작성하시는 README.md 내부에 원하시는 위치에
<Disqus />를 넣어주시면됩니다.
# 개선
- 위처럼 사용하면 모든 README.md에
<Disqus />를 넣어주셔야하는 단점이 있습니다. - 중복으로 컴포넌트를 부르는 것을 개선해 봅시다.
- @vuepress/theme-default 설치
- yarn add -D @vuepress/theme-default
- theme 컴포넌트 만들기
// .vuepress/theme/index.ks
module.exports = {
extend: "@vuepress/theme-default"
};
<!-- .vuepress/theme/Layout.vue -->
<template>
<ParentLayout>
<Disqus slot="page-bottom" class="content" />
</ParentLayout>
</template>
<style scoped>
.content {
width: 750px;
margin: 0 auto;
}
</style>
<script>
import ParentLayout from "@parent-theme/layouts/Layout.vue";
import Disqus from "../components/Disqus";
export default {
components: {
ParentLayout,
Disqus
}
};
</script>
- 위와 같이 추가하면
<Disqus />가 없는 README.md에도 자동으로 댓글기능이 활성화됩니다. - 단, READMD.md에
<Disqus />가 있으면, README에 있는<Disqus />컴포넌트가 우선 활성화 됩니다.
