Gatsby

ReactのフレームワークGatsbyでブログの更新時間を記事に載せる方法【lumens】

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

⇨ Laravel 記事の目次はこちら

React のフレームワーク Gatsby(Lumen)でブログの更新時間を記事に載せる方法を書いていきます。Gatsby のテンプレートをカスタマイズしていきます。

post のテンプレートを修正していく

src/types/index.js

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

export type Node = {
  frontmatter: {
    date: string,
    rewritedAt?: string,
    description?: string,
    category?: string,
    tags?: string[],
    title: string,
    socialImage?: {
      publicURL: string
    }
  }

src/templates/post-template.js

GraphQL の記載のところに rewritedAt を追記します。

export const query = graphql`
  query PostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      htmlAst
      fields {
        slug
        tagSlugs
      }
      frontmatter {
        date
        //追記
        rewritedAt
        description
        tags
        title
        socialImage {
          publicURL
        }
      }
    }
  }
`;

src/components/Post/Post.js

Meta コンポーネントに rewritedAt の props を渡す。

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


    //propsに渡す
    <Meta date={date} rewritedAt={rewritedAt} />
  )
});

src/components/Post/Meta/Meta.js

公開日の表示はもともとあるので、更新日時用の表示を追加します。

type Props = {
  date: string,
  rewritedAt: String,
};

const Meta = ({ date, rewritedAt }: Props) => {
  const d = new Date(date).toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
  const r = new Date(rewritedAt).toLocaleDateString("en-US", {
    year: "numeric",
    month: "short",
    day: "numeric",
  });
  return (
    <div className={styles["meta"]}>
      <p className={styles["meta__date"]}>
        Published{" "}
        <time dateTime={d} itemProp="datepublished">
          {d}
        </time>
      </p>
      // 更新時間の表示を追加する
      <p className={styles["meta__date"]}>
        Rewrited{" "}
        <time dateTime={r} itemProp="modified">
          {r}
        </time>
      </p>
    </div>
  );
};
export default Meta;

マークダウンに追記する

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

項目を追加しなければ表示されない。

---
title: Gatsbyでブログの更新時間を記事に載せる方法【lumens】
date: '2021-08-15T04:10:00Z'
rewritedAt: '2021-08-15T04:10:00Z'

以上です

SEO を考えるなら Time タグを使う

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

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

まとめ

いかがだったでしょうか?

Gatsby のブログ(Lumens)に更新時間を表示するようにカスタマイズしてみました。

人気記事

PHP7.4 + Laravel6 のプロジェクトを AWS EC2 にデプロイする

関連記事

【ReactNative+CloudVision】「怒り顔採点アプリ」を作った