このブログで使っているGatsbyプラグインの紹介

2021-01-20

最近このブログをGatsbyで構築しました。
ブログ作るにあたっていい感じだったGatsbyプラグインを紹介します。

gatsby-remark-vscode

https://www.gatsbyjs.com/plugins/gatsby-remark-vscode/

本文中のコードハイライトをいい感じにやってくれるプラグインです。

gatsby-transformer-remark と一緒に設定すると、コードブロック(バッククオート3つで囲んだ部分)がコードハイライトされるようになります。

こんな感じです。

const foo = 'foo';
const bar = {
  b: 'b',
  a: 'a',
  r: 'r'
};
const baz = () => {
  return 'hi';
}

色のテーマはVisual Studio Codeで使えるものと対応していて、gatsby-config.jsのオプションで指定します。
指定するテーマ名はVisual Studio Codeのテーマ設定の中から選べば良いです。

フォントや文字間隔はお好みでCSSで調整しましょう。

gatsby-remark-images

https://www.gatsbyjs.com/plugins/gatsby-remark-images/

Markdownで記述した記事内に簡単に画像を挿入できるプラグインです。

gatsby-transformer-remark と一緒に使用します。

使い方としては、Markdownファイルと同じ階層に画像ファイルを配置した状態で、

![altを記載](image.jpg)

というように書くと、いい感じにimgタグが生成されます。

gatsby-remark-related-posts

https://www.gatsbyjs.com/plugins/gatsby-remark-related-posts/

Markdownで記述した記事同士の関連度から、関連する記事を選んでくれるプラグインです。

MarkdownRemarkのfieldsにrelatedFileAbsolutePathsというプロパティができて、その中に関連記事のMarkdownファイルの絶対パスが配列として入ります。
個別記事ページ生成時のcontextとしてその値を渡してやれば、記事内で関連記事を取得することができます。

だいたいこんな感じです。

// gatsby-node.js

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const articleTemplate = path.resolve("src/templates/article.js");

  // 個別記事ページの作成
  articles.forEach(({ node }) => {
    createPage({
      path: node.fields.slug,
      component: articleTemplate,
      context: {
        slug: node.fields.slug,
        relatedFilePaths: node.fields.relatedFileAbsolutePaths.slice(0, 4)
      }
    })
  });
};

// src/templates/article.js

export const query = graphql`
  query($relatedFilePaths: [String]) {
    relatedArticles: allMarkdownRemark(
      filter: { fileAbsolutePath: { in: $relatedFilePaths } }
    ) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            title
            date
          }
        }
      }
    }
  }
`