freks blog

about

GatsbyでMarkdown記法に更新日を追加して表示する

created: 2022-02-21
おすすめ記事: 出会ってよかったプログラマー本

markdown に updated を追記、更新日を手動で入れるようにしてみました

この記事だとこんな感じです

---
title: 'GatsbyでMarkdown記法に更新日を追加表示する'
date: '2022-02-21'
updated: ''
---

graphql で、markdownRemark のデータ取得に updatedを追記

export const query = graphql`
  query ($slug: String!) {
    site {
      siteMetadata {
        title
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      excerpt(pruneLength: 160)
      frontmatter {
        title
        date
        updated
      }
    }
  }
`

これで動かすとエラーになるので、全投稿のマークダウンファイルに updated を足します
マークダウンファイルは posts ディレクトリに入れていたので、sed 使って updated: "" を行追加

find posts -type f -name "*.md" | xargs sed -i -e 3a"updated: \"\""

あとはブログ記事内に更新日を表示するように jsx を変更

{
  post.frontmatter.updated && (
    <div style={{ fontSize: '.8rem' }}>updated: {post.frontmatter.updated}</div>
  )
}

を出したいところに足しました

型を付けたかったらこの辺が参考になりそうな気がします(未確認)
Customizing the GraphQL Schema | Gatsby

コードみたい方はこちらのコミット を参考にしてください


Amazonのアソシエイトとして、blog.freks.jp は適格販売により収入を得ています。
This site is managed by freks