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

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

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

https://disqus.com/ 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/ba17c95f-714e-ca09-b7f3-59a2a1bd671a.png)

サインアップしてログインするとこのページに。
I want install disqus on my siteをえらぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/f87575cd-c804-c2e5-5d17-e8408c1f0836.png)

サイト名を入力してカテゴリを選ぶだけで良いようだ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/7852c8b1-f4dd-57ee-6bf2-4d90329765c6.png)

Got it!...のボタンをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/ac85e040-0622-2141-c9df-24466c1383f9.png)

管理者としてのホームコンソール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/bc44def2-44a7-6610-a1c3-9b29eb454381.png)

複数サイトを持ってる場合はメニューで目的のサイトをクリックし
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/ca6b96d8-0dc7-e48d-02b0-f02c77071310.png)

右端のEdit Settingをクリックすると、設定ページに飛ぶ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/21ff9280-1ed3-98b8-e8a6-325552f4b2b7.png)

いちおう、言語をJapaneseにして保存。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/5c85215d-efc1-671f-ec4e-2fbfee46c127.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/05556d56-5821-700b-5500-c212ad274153.png)




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

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

##### インストール
```bash
$ yarn add disqus-react
```


##### global-config.js
いじらない。



##### 記事表示ファイルarticle.jsの編集。
gatsby-plugin-disqusをインポート

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

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

```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-xxxx-x";
 const disqusConfig = {
  config: { identifier: slug, title },
}
・・・略・・・
```
- slugはuseLocation()でURLパスを持ってきて格納。
- titleはmicrocmsArticlesのGraphQLから持ってきて格納。
- disqusShortnameはDisqusコンソールに表示されている。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/633c4a00-3025-4f60-a0a4-67d0ec53d799.png)


##### DiscussionEmbed埋め込み

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

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

#### コード全容

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

```jsx
// 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) + '...';
}
```

<br />

できた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/19baae2d-1fa3-9206-b35c-a5264bf213c3.png)

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

### Disqusコンソール

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

https://bij-xxxx.disqus.com/admin/moderate/approved
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/3ffd04be-01fc-4093-48a0-b1725725e425.png)


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

[Nakamu](https://nakamu.life/)さんにコメント欄で聞いたところ、そのまま使えてるようです。

# 本の宣伝
### Gatsbyバージョン５>>>>改訂２版

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


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


<a href="https://www.amazon.co.jp/gp/product/B0BXNJTJMY?&linkCode=li3&tag=kokkahasan-22&linkId=93c5e3bf1f226141ddc807300e81b07a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXNJTJMY&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXNJTJMY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B0BXXBDJDJ?&linkCode=ll1&tag=kokkahasan-22&linkId=df7e600968c58c0090cd735681c6732c&language=ja_JP&ref_=as_li_ss_tl">Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）</a>

<br />
<br />

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

<a href="https://www.amazon.co.jp/gp/product/B0BXN99WSV?&linkCode=li3&tag=kokkahasan-22&linkId=68f1905bf915f6bd365559a0c65bcdd1&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXN99WSV&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXN99WSV" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/dp/B0BXN99WSV?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=kokkahasan-22&linkId=f02e2f9c50736e3f074b38b4cd73894a&language=ja_JP&ref_=as_li_ss_il">Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）</a>

<br />


<br />

##参考：
[Adding Comments](https://www.gatsbyjs.org/docs/adding-comments/)
[Add Disqus comments to a Gatsby blog](https://mk.gg/posts/add-disqus-comments-to-gatsby-blog/)
[Gatsby Plugin Disqus](https://www.gatsbyjs.org/packages/gatsby-plugin-disqus/)
[What platform is your site on?](https://bij-site-2.disqus.com/admin/install/)
[Universal Embed Code](https://help.disqus.com/en/articles/1717112-universal-embed-code)
[GatsbyJSで構築したブログにDISQUSのコメントフォームを設置する方法](https://blog.nakamu.life/posts/gatsbyjs-introduce-disqus)