Nuxtで作ったブログにコメント欄を設置【Disqus】

個人ブログなのでコメントがつくことはあまりないかもしれませんが、Disqusのコメント欄を設置しました。
この記事では、"vue-disqus"を使ってDisqusを設置する手順を紹介します。

Disqusの作成

まず、Disqus でアカウントを作り、Create a new siteのページ を開きます。
入力事項を入力し、「Create Site」をクリック。

料金プランを選ぶ画面になるので、どれかを選択。(僕の場合はBasic)

すると様々なプラットフォームの一覧が表示されますが、一番下の「マニュアルインストール」ボタンをクリック。

ここに表示される埋め込みタグは今回は使用しないので読み飛ばして、一番右下の「Configure」をクリック

設定項目の入力欄が表示されるので、入力して「Complete Setup」をクリック

これでDisqusの設定は完了です。
しかし、コピーしておきたいものがあるので、「Configure your site's・・・」または上部メニューの「Setting」をクリックして設定画面を開きます

下の画像で赤く囲った場所に「Shortname」というキーがあるので、コピーしておきます。

vue-disqusの設定

ここからは"vue-disqus"の設定になります。
ktquez/vue-disqusの設置方法通りとなります。

まず"vue-disqus"をインストール

$ npm install vue-disqus

plugins/disqus.jsを作成。

import Vue from 'vue'
import VueDisqus from 'vue-disqus'

Vue.use(VueDisqus)

nuxt.config.jsのプラグインに追加

  plugins: [
    '~/plugins/contentful',
    '~/plugins/markdownit',
    '~/plugins/prism',
    '~/plugins/disqus' // 追加
  ],

コメント欄を設置したい箇所に↓を追加
pages/posts/_slug.vue

  <!-- post.fields.titleにContentfulから取得した記事のタイトルが入っている -->
  <div class="comments">
    <vue-disqus shortname="your_shortname_disqus" :identifier="'post/'+post.fields.title" :url="'http://example.com/path/'+post.fields.title"></vue-disqus>
  </div> <!-- shortname等は書き換えてください -->

ログインが必要なコメント欄なので若干ハードルは高いですが、ないよりはマシだと考えてます！
はたしてコメント欄が使われるときは来るのでしょうか

ではまた。