More than 1 year has passed since last update.

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

Last updated at 2023-03-12Posted at 2020-05-23

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up