ウェブ系Nuxtブログ

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

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

Disqusの作成

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

Disqus-create

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

Disqus-select-plan

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

Disqus-manually

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

Disqus-code

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

Disqus-configure

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

Disqus-complete

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

Disqus--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等は書き換えてください -->

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

ではまた。


コメント欄 ご意見、ご感想お気軽に!間違いなどあれば、ご指摘お願いいたします!