
記事の公開日とは別に最終更新日を表示する方法です。

## 実現したいこと

- 記事の公開日とは別に更新日を表示する

## 記事のMarkdownファイルに最終更新日のフィールドを追加する

`modifieddate` の部分は好きな文字列に変えても問題ありません。

```json
/** post.md */

date: "2019-06-02"
modifieddate: "2019-10-02" /* 追加 */
```

## 表示させたいページのテンプレートのGraphQLに追加する

Markdownファイルに追加した `modifieddate` をGraphQLで取得します。

```jsx
query {
  markdownRemark {
    edges {
      node {
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          modifieddate(formatString: "MMMM DD, YYYY") /* 追加 */
        }
      }
    }
  }
}
```

`(formatString: "MMMM DD, YYYY")` の部分は日付の形式のフォーマット用の記述です。  
通常 `2019-10-02` と表示されるところを下記の場合、 `October 02, 2019` と表示されます。

## 表示させたいページのテンプレート（コンポーネント）で読み込む

以下は当ブログの記事詳細ページでの表示の例です。
日付表示以外の部分は省略しています。

```jsx
/** post.js（記事ページテンプレート） */

import React from "react";
import PostDetail from "../components/PostDetail";

const PostTemplate = (props) => {
  return <PostDetail {...props} />;
};
```

```jsx
/** PostDetail.js（記事詳細ページ） */

import React from "react";

const PostDetail = props => {
  const postNode = props.data.markdownRemark;
  const post = postNode.frontmatter;

  return (
    <p>公開日 : {post.date}</p>
    <p>最終更新日 : {post.modifieddate}</p>
  );
}

export default PostDetail;
```

## 参照

- How to get 'Last Update Date' of a blog post in GATSBY.js [https://stackoverflow.com/questions/56025679/how-to-get-last-update-date-of-a-blog-post-in-gatsby-js](https://stackoverflow.com/questions/56025679/how-to-get-last-update-date-of-a-blog-post-in-gatsby-js) （2021-1-5参照）


[GatsbyJS] 最終更新日を表示する

Tags