# vuepressにコメント機能を追加したい
disqusでコメントを実装する方法はネットで探せばあるのですが、 シンプルなものがなかったので、シンプルに実装してみました。 （前の記事で作成したブログを基にして作成しています。）
目次
# diqusにログイン
diqusにログインして、 セットアップを行います。 以下のサイトでセットアップするところまで、参考にしてください。 VuePressにDisqusでコメント機能を追加してみた (opens new window) 本サイトでは、このサイトよりコンポーネントの作成をシンプルに行います。
# コンポーネントを作成
.vuepress/components/disqus.vueを作成 書き加えます。
// .vuepress/components/disqus.vue
<template>
<div id="disqus_thread"></div>
</template>
<script>
export default {
mounted() {
var disqus_config = function () {
this.page.url = window.location.origin;
this.page.identifier = window.location.pathname;
};
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://設定した名前.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
}
}
</script>
ここの部分だけ注意してください。 設定したサイトの名前を入れます。
s.src = 'https://設定した名前.disqus.com/embed.js';
kamiblogと設定したなら
s.src = 'https://kamiblog.disqus.com/embed.js';
# コンポーネントを記事に貼り付け
投稿する記事(_posts/2021-06-05.md)の好きな場所に
<disqus/>
を書き加えます。
yarn dev で実行して確認できます。
備考
Moderationの項目でコメントの承認設定を変えることができます。
# まとめ
ほとんどコピペでいい感じのコメント機能を実装できて驚きでした。
テンプレートvuepress
コメントdisqus
お問い合わせフォームgoogleform
で最低限のブログの体裁になった気がします。
今思いつくのは、機能としてはリンクカードくらいか？
デザイン（色合いとか）もさらに少しいじりたいと思う。