Table of Contents

tips_javascript

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

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

実現したいこと

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

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

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

post.md
date: "2019-06-02"
modifieddate: "2019-10-02" /* 追加 */

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

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

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 と表示されます。

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

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

post.js(記事ページテンプレート)
import React from "react";
import PostDetail from "../components/PostDetail";

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

export default PostTemplate;

query {
  markdownRemark {
    edges {
      node {
        frontmatter {
          date(formatString: "MMMM DD, YYYY")
          modifieddate(formatString: "MMMM DD, YYYY") /* 追加 */
        }
      }
    }
  }
}
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;

参照

© 2019 chocolat All Rights Reserved.