Open2022/04/11にコメント追加7

Gatsbyでサイトを制作したのでその時のメモ

Gatsby.js

ke1ta

SEO周りの設定

head要素周りの設定

1. react-helmetの導入

npm install gatsby-plugin-react-helmet react-helmet
gatsby-config.jsのpluginsに追加も忘れず。

2. Helmetのコンポーネントを作成する。

gatsby-starter-blog とか参考になりそう。

3. Layout.jsに追加

import SEO from '{path}/SEO';
const Layout = (props) => {
  return (
    <>
      <SEO />
      ...
    </>
)

ke1ta

titleとdescriptionのページによる出し分け

参考サイト
詳細ページでは「${記事タイトル} | ${サイト名}」の表示にした。

const { defaultTitle, defaultDescription } = site.siteMetadata;

  const seo = {
    title: title ? `${title} | ${defaultTitle}` : defaultTitle,
    description: description || defaultDescription,
  };

export const query = graphql`
  query {
    site {
      siteMetadata {
        defaultTitle: title
        defaultDescription: description
      }
    }
  }
`;

本文をdescription要素に入れる

~~一度htmlに置換してからtextだけを取得する。~~
~~別途sliceメソッドなどで適切文字数に切り出す。~~

  let div = document.createElement('div');
  div.innerHTML = contents;
  const seoDescription = div.innerText;

ke1ta

本文をdescription要素に入れる
一度htmlに置換してからtextだけを取得する。
別途sliceメソッドなどで適切文字数に切り出す。

build時にはブラウザのオブジェクトには接続できないので利用できないというオチでした。
useEffectなどを用いればできるという話みたいなのですが、それだとおそらくbuild時にはdescriptionにはうまく入らないのでボツです😢

ke1ta

結局正規表現でタグ部分を取り除くようにしました。
contents.replace(/(<([^>]+)>)/gi, '');

ke1ta

headerなどでアクティブなページのリンクは色を変えるなどをしたい場合は、activeClassNameもしくはactiveStyleを使う。
activeClassName="page-active"
ただし、Link要素にしか使えないっぽいので注意。

ke1ta

マークダウンの記事を種類別に分けていく

(Wordpressでいうカスタムポストのような？投稿とカスタムポストの記事のように...)

下記記事を参考にさせていただき、MarkdownRemarkで指定したnameを各記事のノードに新たに追加し、それをもとにふるい分けを行う。
Gatsbyで2種類のマークダウンファイルの区別する方法

gatsby-node.jsにて、

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNode, createNodeField } = actions;

  if (node && node.internal && node.internal.type === 'MarkdownRemark') {
    const parent = getNode(node.parent);

    createNodeField({
      node,
      name: 'collection',
      value: parent.sourceInstanceName,
    });
  }
};

これでfield.collectionが登場する。

ke1ta

URLのクエリパラメータを取得する

queryStringライブラリを使うのも大丈夫そうです。
microCMSさんのを参考にさせてもらいました。
microCMSとGatsbyでプレビュー画面を作成する
npm i query-string

import queryString from 'query-string';

const DemoPage = ({ location }) => {
  const { hoge, fuga } = queryString.parse(location.search);
  ...