最近Fumadocsにハマっています。元々の機能でもかなり完成度が高いですが、利便性を求めていくつかカスタマイズをしてみました。使い方の改善などになればよいかと。
Youtube動画のコンポーネント
<YouTubeEmbed> コンポーネントを使用して、安全にYouTube動画を埋め込むことができます。
<YouTubeEmbed videoId="LX6A3OmY4uk" title="動画のタイトル" />このコンポーネントは以下の特徴があります：
- レスポンシブ対応（アスペクト比16:9を維持）
- セキュリティ属性を適切に設定
- パフォーマンス最適化（遅延読み込み）
UIパス表示コンポーネント
<UiPath> コンポーネントを使用して、UI操作の手順を視覚的に表示できます。
<UiPath>Email activity > Has a hard bounced delivery > Yes</UiPath>このコンポーネントは以下の特徴があります：
>で区切られたパスを自動的にパース- 各ステップをチップとして表示
- 最後のステップがアクティブなスタイル（青背景）で強調表示
- ステップ間は矢印（›）で区切られる
スタイルは app/globals.css で定義されており、以下のクラスを使用しています：
.ui-chip: 通常のチップスタイル（グレー背景）.ui-chip.is-active: アクティブなチップスタイル（青背景）.ui-sep: 区切り文字（›）のスタイル
記事の日付表示と古い記事の警告
MDXファイルのフロントマターで created と updated を指定すると、記事ページに作成日・更新日が自動的に表示されます。
---
title: 記事のタイトル
created: 2021-04-18
updated: 2024-02-28
---created: 記事の作成日updated: 記事の最終更新日（作成日と同じ場合は表示されません）
また、更新日から1年以上経過している記事には、自動的に以下の警告メッセージが表示されます：
この記事は更新から1年以上経過しています。情報が正しくないかも、、、
この機能は components/article-dates.tsx で実装されており、記事ページのタイトル直下に表示されます。
関連記事の表示
<RelatedArticles> コンポーネントを使用して、記事内に関連記事を表示できます。
<RelatedArticles related="blog-japanese,css,embed-html" />特徴：
- ファイル名スラッグ（例：
blog-japanese）をカンマ区切りで指定 - 括弧付きフォルダ（
(pagecreate)/blog-japanese.mdx）も通常のフォルダ（payment/cant-free-trial.mdx）も対応 - 各記事のタイトルとカテゴリーバッジを表示
- コードブロック風の白背景カードデザイン
- タイトル左に
Zapアイコン、各記事左にNotebookTextアイコンを表示 - リンクの下線なし、ホバー時に色が変わる
使用例：
---
title: ブログの作成
---
## 本文
関連する記事は以下の通りです。
<RelatedArticles related="blog-japanese,css,embed-html" />カンマの前後にスペースがあっても動作します：
<RelatedArticles related="blog-japanese, css, embed-html" />実装ファイル：
components/related-articles.tsx: 関連記事表示コンポーネントlib/getPageBySlug.ts: スラッグからページを取得するヘルパー関数getPageBySlug(slug): 単一のスラッグからページを取得getPagesBySlugs(slugs): 複数のスラッグからページを取得getCategoryTitleFromPage(page): ページからカテゴリータイトルを取得
技術的な詳細：
- スラッグからページへのマップをキャッシュしてパフォーマンスを最適化
- ファイルパスからカテゴリーを自動判定（括弧付きフォルダにも対応）
- カテゴリー情報は
meta.jsonまたはindex.mdxから取得し、メモリキャッシュを使用
トップページ機能
トップページ（content/docs/index.mdx）では、以下の機能が実装されています。
最近追加された記事・最近更新された記事
フロントマターにcreatedまたはupdatedが設定されている記事を、日付順で表示します。
import { RecentCreatedPosts, RecentUpdatedPosts } from '@/components/recent-posts';
## 最近追加された記事
<RecentCreatedPosts limit={10} />
## 最近更新された記事
<RecentUpdatedPosts limit={10} />特徴：
- 各記事はカード形式で表示され、ホバー時にエフェクトが適用されます
- 記事タイトルの前に
FileTextアイコンが表示されます - カテゴリーバッジが表示されます（支払い・請求、Products/レッスンなど）
- 日付は表示されません（シンプルなリスト形式）
実装ファイル：
components/recent-posts.tsx: 記事リスト表示コンポーネントlib/recent-posts.ts: 記事取得関数（getRecentCreatedPosts,getRecentUpdatedPosts）
注目のトピック＆記事（カテゴリー別記事表示）
各カテゴリーの記事を5件まで表示するショートコードコンポーネントです。
import { CategoryPosts } from '@/components/category-posts';
## 注目のトピック＆記事
<CategoryPosts category="payment" limit={5} />
<CategoryPosts category="product" limit={5} />
<CategoryPosts category="students" limit={5} />特徴：
- カテゴリー名がリンクとして表示され、クリックでカテゴリーページに遷移します
- 各記事の前に
BookTextアイコンが表示されます - 記事は更新日が新しい順（更新日がない場合は作成日）で表示されます
- 順番はMDXファイル内で
<CategoryPosts />の順序を変更することで調整できます
フッター
サイト全体に共通フッターが表示されます。フッターはcomponents/footer.tsxで実装されています。
レイアウト：
- 2カラムレスポンシブデザイン（大画面では横並び、スマートフォンでは縦並び）
- 左カラム：サイトロゴ、説明文、ソーシャルメディアアイコン、ログインユーザー情報
- 右カラム：サイトの注意書き（利用規約、更新情報など）
左カラムの構成：
- サイトタイトル（
/docsへのリンク） - サイトの説明文
- ソーシャルメディアアイコン（GitHub、Discord、YouTube、Twitter/X）
- ログインユーザー情報（プレースホルダー）
- 「ログイン中」ステータス
- ユーザー名表示
- ログアウト・パスワード変更ボタン
右カラムの構成：
- サイトの説明と注意書き
- 情報の更新について
- 記事の追加について
実装ファイル：
components/footer.tsx: フッターコンポーネントapp/layout.tsx: ルートレイアウトにフッターを追加
フッターは全ページに自動的に表示され、fumadocsのテーマ変数を使用してスタイリングされています。
