ホーム > Gatsby > Gatsby.jsでブログの更新時間を記事に載せる方法
Gatsby

Gatsby.jsでブログの更新時間を記事に載せる方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. GraphQL のスキーマに追加する
  2. 表示する
  3. time タグとは？
  4. まとめ
PR

Gatsby.js でブログの更新時間を記事に載せる方法についてまとめました

GraphQL のスキーマに追加する

gatsby-node.js

frontmatter の項目に、rewritedAt を追加します。

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  createTypes(`
  //略
    type Frontmatter {
      date: String,
      rewritedAt: String,
      category: String,
      title: String,
    }
  `)
}

追加したら、一度ローカルサーバーを停止し、再度ローカルサーバーを起動してビルドしなおします。

gatsby develop

追加されたか確認する

http://localhost:8000/___graphql

GraphQL で実際に Frontmatter の項目に rewritedAt が追加されたか確認します。

表示する

ページのクエリに追加 src/templates/post-template.js

frontmatter の項目に rewritedAt を追記します。

export const query = graphql`
  query PostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      htmlAst
      frontmatter {
        date
        rewritedAt //追加
        category
        title
      }
    }
  }
`

取得したデータを使って日付の表示

import React from "react"

const PostTemplate =  ({ data }) => {
  const post = data.post
  const { htmlAst } = post;
  const { tagSlugs, slug } = post.fields;
  //rewritedAtを追記する
  const { tags, title, date, rewritedAt } = post.frontmatter;

  //表示したい形に整形
  const formatDate = dateString => {
    const date = new Date(dateString)
    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, "0")
    const day = String(date.getDate()).padStart(2, "0")
    return `${year}-${month}-${day}`
  }
  const d = date ? formatDate(date) : null //公開日
  const r = rewritedAt ? formatDate(rewritedAt) : null //更新日

  return (
    <div className="flex flex-wrap text-md">
      {r ? (
        <p className="mr-4" style={{ marginTop: 0 }}>
          <time dateTime={rewritedAt} itemProp="dateModified">
            {r}
          </time>
        </p>
      ) : (
        ""
      )}
      <p style={{ marginTop: 0 }}>
        <time dateTime={date} itemProp="datePublished">
          {d}
        </time>
      </p>
    </div>
  )
});

export const query = graphql`
  query PostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      htmlAst
      frontmatter {
        date
        rewritedAt //追加
        category
        title
      }
    }
  }
`

export default PostTemplate

マークダウンに追記する

.md ファイルに rewritedAt の項目を追加します。

項目を追加しなければ表示されません。

---
title: タイトル
date: "2024-10-17T00:00:00Z"
rewritedAt: "2024-10-17T00:00:00Z"
---

以上です

time タグとは？

<time> は HTML の要素で、特定の時の区間を表します。datetime 属性を使用して、機械可読な形式の日付を記述することができ、検索エンジンの結果を改善したりリマインダーなどの独自機能に使用したりすることができます。

引用：<time>: （日付）時刻要素

このように time タグで dateTime と、itemProp で更新時間を伝えるようにします。

<time dateTime={rewritedAt} itemProp="modified">
  {r}
</time>

まとめ

以上、Gatsby.js でブログの更新時間を記事に載せる方法でした。

誰かの参考になれば幸いでございます。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。