All Articles

Gatsbyjsにコメント機能を追加する

コメント機能

はじめに

せっかく作成したブログなのでコメント機能を追加しようと思います。 調べたところ以下のページで紹介されている Just Comments を使えば簡単に実装できるようです。 Add comments to your GatsbyJS blog within two minutes

Just Comments のアカウントを作成する

まず以下のページに行き好きなsign up方法でアカウントを作ります。 Just Comments

ログイン後にアカウントidが得られるのでそれをメモっておきます。 just_comments_account_id

コードの追加

以下のファイルに JustComments のクラスと、 コメント機能を追加したい場所に <JustComments /> を追加して終わりです。 かなり簡単にできるので驚きました・・・

src/templates/post-template.js

...
class JustComments extends React.Component {
  constructor(...args) {
    super(...args)
    this.ref = React.createRef()
  }
  render() {
    return (
      <div
        ref={this.ref}
        className="just-comments"
        data-apikey="YOUR_API_KEY"
      />
    )
  }
  componentDidMount() {
    const s = document.createElement('script')
    s.src = '//just-comments.com/w.js'
    s.setAttribute('data-timestamp', +new Date())
    this.ref.current.appendChild(s)
  }
}
...
return (
        <Layout title={`${postTitle} - ${siteTitle}`} description={metaDescription}>
            <Post post={data.markdownRemark}/>
            <JustComments />
        </Layout>
    );
...