# Vuepress に DISQUS でコメント欄をつける
K33G (opens new window)さんのAdd Disqus support to VuePress pages (opens new window) で紹介されていた方法を試してみましたのでご紹介いたします
一言でいうと Vue の Disqus コンポーネントを作って Vuepress で使う という内容なので、本稿でご紹介する方法は Vuepress に限らず、Vue アプリ一般に適用できます
# 1. .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() {
var d = window.document, s = d.createElement('script');
s.src = 'https://SHORTNAME.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
}
}
</script>
14行明の SHORTNAME は、DISQUS の site の shortname です。詳細を後に補足します
# 2. コメント欄を表示したい場所に disqus タグを入れる
例えば本稿ではページの一番下に下記のように disqus タグをいれています
***
2019.09.04 posted.
---------- updated.
***
<disqus/>
これで、本稿のようなコメント欄が表示されます
# DISQUS の補足
DISQUS に詳しくない（私もそうでした）の方の参考になればと思い、補足させていただきました次第です
# アカウントの取得
こちら (opens new window) からサインインすることができます
# site の shortname の取得
DISQUS を自分のサイトに埋め込むには、まず埋め込む site を定義する必要があり、その定義の ID を shortname と呼びます
site の追加は設定メニューの Add Disqus to Site から行います
ここからの UI が少しわかりにくいのですが、新しく開いたページの一番下の Get Started ボタンを押して
** I want to install Disqus on my site ** を選択して site 登録ページに移動します
サイトを登録した後、設定メニューに戻って Admin を選択し
右上の Edit Settings を選択して
表示されたリストから追加したサイト（ここでは passe-de-mode) を選択すると
下記のような画面になり、こちらでshortname が表示されます
