ブログの改良：ディレクトリ構造の整理と投稿ナビゲーションの追加

今日はこのブログの改良に取り組み、いくつかの重要な変更を加えました。見た目だけでなく、メンテナンス性とユーザーエクスペリエンスを向上させるための変更です。

プロジェクト構造の再編成

まず、プロジェクトの構造を見直し、すべてのコンテンツ、レイアウト、アセットを src ディレクトリに移動しました。これにより、ソースファイルとビルド出力の間に明確な分離が生まれ、プロジェクト全体が整理されました。

具体的には以下のような構造になりました：

• src/posts/ - ブログ投稿
• src/_includes/ - レイアウトファイル
• src/css/ - スタイルシート
• src/assets/ - 画像などのアセット

CSSの単純化

長すぎたCSSファイル名 catppuccin-overrides.css を styles.css に変更し、シンプルで覚えやすい名前にしました。また、レイアウトファイルもこの新しいCSSパスを参照するように更新しました。

投稿ナビゲーションの追加

一番大きな改良点は、ブログ投稿間のナビゲーション機能を追加したことです。各投稿ページに「前の記事」「次の記事」「ホーム」へのリンクが表示されるようになりました。

これはLumeの search 機能を活用して実現しており、日付に基づいて自動的に投稿間のナビゲーションが生成されます。新しい投稿を追加しても、マニュアルで何かを更新する必要はありません。

// 投稿日に基づいて前後の記事を自動的に取得
const allPosts = search?.pages ? search.pages("type=post", "date=asc") : [];
const currentIndex = allPosts.findIndex(post => post.url === url);
const prevPost = currentIndex > 0 ? allPosts[currentIndex - 1] : null;
const nextPost = currentIndex < allPosts.length - 1 ? allPosts[currentIndex + 1] : null;

投稿表示の修正

投稿の表示に関するいくつかの問題も修正しました：

• インデックスページでの投稿の正しい表示
• 日付フォーマットの修正
• 投稿コンテンツが適切なレイアウトを使用するように設定

設定の改善

_config.ts を更新して、srcディレクトリ構造を適切に処理するようにしました。また、投稿タイプの識別のための改善も行い、すべてのファイルが適切に処理されるようにサイト生成を修正しました。

今後の投稿追加方法

新しい投稿を追加するには、単に以下の手順に従うだけです：

1. src/posts/ に新しいMarkdownファイルを作成（ファイル名は YYYY-MM-DD.md のような形式）
2. 以下のようなフロントマターを含める：

   ---
   author: 名前
   title: 投稿タイトル
   url: /posts/YYYY-MM-DD/
   layout: post.ts
   date: YYYY-MM-DD
   type: post
   ---
   

3. フロントマターの後にコンテンツを追加

これだけで、ナビゲーションは自動的に更新され、新しい投稿が正しい時系列順で含まれるようになります。

まとめ

今回の改良により、ブログはより整理され、メンテナンスしやすく、ユーザーフレンドリーになりました。投稿間のナビゲーションも自動化されたので、新しい記事を書くときに余計な手間がかからなくなりました。

Lumeの柔軟さと、TypeScriptの型安全性を活かして、より良いブログ体験を構築できたと思います。