Disqus

GatsbyサイトにDisqusのコメント機能を導入していく

gatsby-plugin-disqusの公式ドキュメントを読んだので概要を紹介する。

GatsbyサイトにDisqusのコメント機能を導入していく

1.まずはサイトをDisqusに登録してShortnameを入手する

手順はこんな感じ。(Disqusのアカウントは入手しておく。)

Disqus公式サイトにいって[GET STARTED]→[I want to install Disqus on my site]ボタンを押す。

          2020 09 24 21 44 34 2

          2020 09 24 21 56 46 2


・「Create a new site」というページに行くから必要事項を入力。

          2020 09 24 23 25 31 2

・「Select a plan」というページに行くからプランを選択。Basicは無料。

・「What platform is your site on?」というページに行くけど無視して[Settings]ボタンを押す。

・このページの「Shortname」(「abcdef-1」みたいなの)が必要。

2.インストール

Gatsbyサイトにプラグインを導入。方法は使っているパッケージマネージャーに応じて、ターミナルで次のコマンドのどちらかを実行するだけ。

$ yarn add gatsby-plugin-disqus
$ npm install -S gatsby-plugin-disqus

3.ソースコード変更

プラグインを導入できたらソースコードを編集。 やることは2つ。

A.gatsby-config.jsに設定を追加 B.Disqusのコンポーネントを配置

A.まずはgatsby-config.jsに設定を追加

プロジェクトのgatsby-config.jsファイルを次のように編集。

module.exports = {
//siteMetadataとか色々書いてる。
  plugins: [
    {
      resolve: `gatsby-plugin-disqus`,
      options: {
        shortname: `abcdef-1(ここは自分のshortname書く)`
      }
    },
//他のpluginとか色々書いてる    
  ]
}

B.次にDisqusコンポーネントを配置

gatsby-plugin-disqusをインポートして、コンポーネントを配置。 例えばこんな感じ。

import { Disqus, CommentCount } from 'gatsby-plugin-disqus'

const PostTemplate = () => {
  let disqusConfig = {
    url: `${config.siteUrl+location.pathname}`,
    identifier: post.id,
    title: post.title,
  }
  return (
    <>
      <h1>{post.title}</h1>
      <CommentCount config={disqusConfig} placeholder={'...'} />
      /* Post Contents */
      <Disqus config={disqusConfig} />
    </>
  )
}

export default PostTemplate

オプションだけど、プロパティとしてurlとidentifierとtitleを与えることが公式ドキュメントでは推奨されている。 なぜかというと、ドメインが変わることによってスレッドがなくなるのを防げるからだ。

それから、他のパラメーターも使いたかったらwikiを見るといい。

4.最後に

このサイトにコメント機能をつけたときのことを記事にしてみた。 必要最低限のことだけを書いたので詳しく知りたい人は公式ドキュメントを見るといい。

最後まで読んでいただきましてありがとうございました。

Subscribe to テクマガ

Get the latest posts delivered right to your inbox

入力されたアドレス宛に案内のメールが届きます。