takakisan

このブログで使っている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で記述した記事同士の関連度から、関連する記事を選んでくれるプラグインです。

MarkdownRemarkfieldsrelatedFileAbsolutePathsというプロパティができて、その中に関連記事の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
          }
        }
      }
    }
  }
`

関連度の計算に tf-idfCosine similarity を利用している、とのことで、何だかよくわかりませんがいい感じにやってくれそうです。

自前で関連度の計算をやろうとしたら多分結構難しそうなので、プラグインでサクッとできると助かりますね。

gatsby-plugin-sitemap

https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/

サイトマップを生成してくれるプラグインです。
ビルドするとサイトの直下にsitemap.xmlが生成されるようになります。

必要に応じてディレクトリの除外などもできるようです。

gatsby-plugin-google-analytics

https://www.gatsbyjs.com/plugins/gatsby-plugin-google-analytics/

Google Analyticsの計測タグをサイトに入れてくれるプラグインです。
オプションでtrackingIdを入れてやればとりあえず動きます。


このサイトのソースコードは こちらです。
プラグインの使い方などの参考にしてみてください。

以上です。

スポンサーリンク