Gatsby
ReactのフレームワークGatsbyでブログの更新時間を記事に載せる方法【lumens】
いつもご利用ありがとうございます。このブログは、広告費によって運営されています。
オススメ本
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 にデプロイする
関連記事