【Astro】 総記事数と最終更新日を取得してみる

はじめに

今回実装してみるものは、下記の画像の黄枠の部分です。

なんかかっこいいかなって。

実装してみる

総記事数の取得

Astroでは、下記のコードで全ての記事を取得する事が出来ます。
記事が保管されているディレクトリは相対パスで、テーマや、スクリプトの場所によって異なると思います。

// Astroのフロントマター（JavaScript領域）
import type { MarkdownInstance } from 'astro';

// フロントマターのインターフェース定義
interface IFrontmatter {
  // ここにフロントマターのプロパティを定義
  title: string;
  // その他のプロパティ...
}

// './posts/*.md'から全ての記事を読み込む
const allPosts = await Astro.glob<MarkdownInstance<IFrontmatter>>('./posts/*.md');

取得した記事の配列の長さを調べる事で、総記事数が判ります。

const totalPosts = allPosts.length;

最終更新日の取得

※ この方法は、記事を連番管理している人にしか参考になりません。例えば、1.md, 2.md, 3.md のような感じです。 また、この方法を利用するために、連番管理にするというのは、以下の理由からオススメ出来ません。

• SEO

URLに具体的なキーワードを含める事は、SEOに有利とされています。
その理由は、検索エンジンがURL内のキーワードを、ページの内容の関連性を判断する指標にしているためです。

連番管理は、番号で記事を保管する手法なので、具体的なキーワードが含まれないため、相対的に不利です。

• ユーザビリティ

連番管理は、そのURLからページの内容が何であるかをユーザーが把握する事が出来ません。

etc…

• 記事に更新日を入力

---
layout: '@/templates/BasePost.astro'
title: 【Astro】 総記事数と最終更新日を取得してみる
description: 
+ pubDate: 2024-01-13T00:00:00Z
imgSrc: '/assets/images/15/15.avif'
imgAlt: '15'
categories: [IT]
tags: [Astro]
---

• 最新の記事を特定

// ファイル名から数値を抽出し、数値に変換
const postNumbers = allPosts.map(post => {
  const match = post.file.split('/').pop()?.match(/(\d+)\.md$/);
  return match ? parseInt(match[1], 10) : 0;
});

// 最大の数値を見つける
const latestPostNumber = Math.max(...postNumbers);

// 最新の記事を特定する
const latestPost = allPosts.find(post => {
  const filename = post.file.split('/').pop();
  return filename === `${latestPostNumber}.md`;
});

• 好みのフォーマットに日付を整形

function formatDate(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月は0から始まるため、1を加える
  const day = String(date.getDate()).padStart(2, '0');

  return `${year}年${month}月${day}日`;
}

• 出力

<p>当サイトには現在、合計{totalPostsLength}件の記事が掲載されています。<br /></p>
<p>最終更新: {formatDate(latestPost.frontmatter.pubDate)}</p>