Vuepress に DISQUS でコメント欄をつける

K33GさんのAdd Disqus support to VuePress pages で紹介されていた方法を試してみましたのでご紹介いたします

一言でいうと 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 に詳しくない(私もそうでした)の方の参考になればと思い、補足させていただきました次第です

アカウントの取得

こちら からサインインすることができます

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 が表示されます


こちらでは赤線で消してありますが、shortname が漏洩すると無関係なサイトに埋め込まれてタンパーを受ける可能性がありますので、管理に注意しましょう

Vuepress 関連のポスト一覧


2019.09.04 posted.
---------- updated.