Gatsbyのブログで日本語記事の抜粋（excerpt）を正しく表示させる方法

TL;DR

GatsbyJS: Excerpts for non-latin languages

{
  markdownRemark {
    excerpt(truncate: true)
  }
}

きっかけ

Gatsbyでブログを作成しましたが、３投稿目にして記事の抜粋が表示されない問題が発生しました。

いろいろ試してみたところ、どうやら抜粋は大文字英単語で終わることがわかってきました。 なので、多分日本語由来の問題ではないかと思い調べてたところ解決策を見つけました。

解決策

GatsbyでMarkdownを扱うgatsby-transformer-remarkは、デフォルトでunderscore.string/pruneを用いて抜粋をつくっているそうです。 しかし、これは非ラテン文字を扱えないため、日本語を用いる場合は変更する必要があります。

gatsby-starter-blogを使っている場合は、src/pages/index.jsを次のように変更することで変更できます。

@@ -54,7 +54,7 @@ export const pageQuery = graphql`
     allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
       edges {
         node {
-          excerpt
+          excerpt(truncate: true)
           fields {
             slug
           }

吾輩はかちである。知識はまだない。