MENU

Gatsbyサイトにビルド時の日付を表示する

2020-12-19

Display the date of the build on the Gatsby.

このブログは高頻度で更新してますが、サイトのトップページは全然変更していません。トップページからアクセスしてくれた人にアクティブなページであることを伝えるために、ビルド時の日付を表示することにしました。

img1

追加したコード

gatsby-plugin-build-dateを使用しました。

プラグインをインストール

yarn add gatsby-plugin-build-date

gatsby-config.plugins.js

  {
    resolve: `gatsby-plugin-build-date`,
    options: {
      formatAsDateString: true,
      formatting: {
        format: 'YYYY-MM-DD',
        utc: false,
      },
      locale: 'ja',
    },
  },

日付表示用のコンポーネントを新規作成

src/components/PageLayout/Footer/index.jsx

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Typography from '@material-ui/core/Typography'
import Grid from '@material-ui/core/Grid'

const Footer = () => {
  const data = useStaticQuery(graphql`
  query {
    currentBuildDate {
      currentDate
    }
  }
`)

  const date = data.currentBuildDate.currentDate
  return (
    <div>
      <p/>
      <Grid container justify="flex-end">
        <Typography variant="caption" color='textPrimary'>Last update on {date}</Typography>
      </Grid>
    </div>
  )
};

export default Footer

作ったコンポーネントをトップページに追加

src/pages/index.jsx

import Footer from '../components/PageLayout/Fotter';
<Footer />

以上です。

この記事を共有