LoginSignup
5

More than 3 years have passed since last update.

posted at

updated at

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

TL;DR

GatsbyJS: Excerpts for non-latin languages

{
  markdownRemark {
    excerpt(truncate: true)
  }
}

きっかけ

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

Screenshot.png

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

解決策

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
           }

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5