Gatsbyサイトの動的ページにコメント欄機能を：Desqus設置

簡単ではあるが、少し手間取ったので備忘録。

Disqus登録

https://disqus.com/

サインアップしてログインするとこのページに。
I want install disqus on my siteをえらぶ。

サイト名を入力してカテゴリを選ぶだけで良いようだ。

Got it!...のボタンをクリック

管理者としてのホームコンソール

複数サイトを持ってる場合はメニューで目的のサイトをクリックし

右端のEdit Settingをクリックすると、設定ページに飛ぶ。

いちおう、言語をJapaneseにして保存。

Disqusインストールと設定・設置

gatsby-plugin-disqusとdisqus-reactとある。両方試したがdisqus-reactの方が安定して素直に設置できたのでそちらを。

インストール

$ yarn add disqus-react

global-config.js

いじらない。

記事表示ファイルarticle.jsの編集。

gatsby-plugin-disqusをインポート

// templates/article.js
import { DiscussionEmbed } from "disqus-react";

そして/* コメント欄機能Disqusの設定 */ のところを追加。

// templates/article.js

import React from "react"
import { graphql } from "gatsby"

import Layout from "../components/layout"
import SEO from "../components/seo"
import { Container, Row, Col, Breadcrumb} from 'react-bootstrap'

import { useLocation } from "@reach/router"
import { DiscussionEmbed } from "disqus-react";

const Articlearticle = props => {

 const article = props.data.microcmsArticles // ㊟allMicrocmsArticleでない

 /* コメント欄機能Disqusの設定 */
 const slug = useLocation()
 const title = article.title
 const disqusShortname = "bij-xxxx-x";
 const disqusConfig = {
  config: { identifier: slug, title },
}
・・・略・・・

slugはuseLocation()でURLパスを持ってきて格納。
titleはmicrocmsArticlesのGraphQLから持ってきて格納。
disqusShortnameはDisqusコンソールに表示されている。

DiscussionEmbed埋め込み

次のように、レンダーしたいところにshortnameとconfigのプロパティをつけて埋め込む。

<DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />

コード全容

いちおうarticle.jsのコード全文

// templates/article.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import SEO from "../components/seo"
import { Container, Row, Col, Breadcrumb} from 'react-bootstrap'
import { useLocation } from "@reach/router"
import { DiscussionEmbed } from "disqus-react";

const Articlearticle = props => {

 const article = props.data.microcmsArticles // ㊟allMicrocmsArticleでない


 /* コメント欄機能Disqusの設定 */
 const slug = useLocation()
 const title = article.title
 const disqusShortname = "bij-site-2";
 const disqusConfig = {
  config: { identifier: slug, title },
}


 return (
   <Layout>
     <Container fluid="md">
     <SEO title={article.title} 
        description={sumarrize(article.body)}
        image={article.pict.url}  
        lang="ja"
    />
     <div>
       <h1 style={{ fontSize: `1.25rem`}}>{article.title}</h1>
       <span style={{ fontSize: `1.1rem`}}
                dangerouslySetInnerHTML={{
                  __html: `${article.title_origin}`,
                }}
       >
       </span>
       <Row>
         <Col md={8}>
         <span style={{ fontSize: `0.9rem`, color: `gray` }}>著者：{article.writer.name}</span>
         </Col>
         <Col md={4}>
         <span style={{ fontSize: `0.9rem`, color: `gray` }}>投稿：{article.date}</span>
         </Col>
       </Row>     
       <br />
       <p
         dangerouslySetInnerHTML={{
           __html: `${article.body}`,
         }}
       ></p>
       <br />
       <span>著者：{article.writer.name}</span>
       <br />
       <img src={article.writer.image.url} width={160} alt={article.writer.name} />
       <p
         dangerouslySetInnerHTML={{
           __html: `${article.writer.profile}`,
         }}
       ></p>
     </div>
     <DiscussionEmbed shortname={disqusShortname} config={disqusConfig} />
     </Container>
   </Layout>
 )
}

export default Articlearticle

export const query = graphql`
 query($id: String!) {
   microcmsArticles(id: { eq: $id }) {
     title
     title_origin
     date
     body
     pict {
       url
     }
     body
     category {
       name
     }
     writer {
       name
       profile
       image {
         url
       }
     }
   }
 }
`

/* <SEO description= />用に記事本文を120字以内に収める関数 */
let striptags = require('striptags');
function sumarrize(html) {
  const metaDescription = striptags(html).replace(/\r?\n/g, '').trim();
  return metaDescription.length <= 120
    ? metaDescription
    : metaDescription.slice(0, 120) + '...';
}

できた。

ページネーションなどもできるようだがそれは追々。

Disqusコンソール

コメントはDisqusコンソールで確認して削除したりできる。

https://bij-xxxx.disqus.com/admin/moderate/approved

無料トライアル1か月が終了したら？

Nakamuさんにコメント欄で聞いたところ、そのまま使えてるようです。

本の宣伝

Gatsbyバージョン５>>>>改訂２版

前編の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と後編の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ https://yah-space.work

静的サイトジェネレーターGatsby最新バージョン５の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《Slicy API》《Script API》《Head API》を紹介、実装方法も。《Gatsby Functions》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！

Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト～基礎の基礎から応用、新機能の導入まで（書籍2,980円）

最新Gatsby５とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《サイト内検索機能》をGatsbyバージョン４からの新機能《Gatsby Functions》と《microCMSのqパラメータ》で実装。また、SEOコンポーネントをカスタマイズしてmicroCMS APIをツイッターカードに表示させるOGPタグ実装方法も解説。

Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）

##参考：
Adding Comments
Add Disqus comments to a Gatsby blog
Gatsby Plugin Disqus
What platform is your site on?
Universal Embed Code
GatsbyJSで構築したブログにDISQUSのコメントフォームを設置する方法