Astro 4.14 Content Layer API
Astro4.14になってContents Collectionに替わる予定のContent Layer APIが実装（実験的）されたので自分のサ イトに設定してみた。
参考
ブログ用markdownファイルの移動
今までの/src/content/から/src/data/へブログ用markdownファイルを移動する。
Content Layerでは/src/content/の中にあるmarkdownファイルを処理しないのでエラーになる。
/src/content/config.tsは動かしてはいけない。
astro.config.mjs に追記
まだ実験的なので以下のように追記する
// astro.config.mjs/src/content/config.ts の修正
astro/loadersからglobをインポートする
///src/content/config.ts // loadersのインポートエラーがでていたが// tsconfig.jsonを修正して直った//// "moduleResolution": "node",// ↓// "moduleResolution": "Bundle",;Collectionにloaderを追加
slug を id にする
Content Layerではslugは存在しないので各所のslugをidにする
ファイル名も変える[...slug].astro -> [...id].astro// slug: entry.slug のようなところも id にexport async function getStaticPaths() { const blogEntries = await getCollection(BLOG_NAME); const numberOfPosts= blogEntries.length; return blogEntries.sort(sortByDate).map((entry, i) => ({ params: { id: entry.id},// 元は slug: entry.slug props: { entry, prevPost: i + 1 === numberOfPosts ? "" : blogEntries[i + 1],nextPost: i === 0 ? "" : blogEntries[i - 1], }, })); } // urlを作るときに参照するのも id const url =post.data.baseUrl ? post.data.baseUrl + post.id : "/" + post.id + "/";その他各所slugをidに変更した。（RSSのURLなど）
renderの変更
---const { Content, headings } = await entry.render();// ↑これを以下のようにする// インポートしたrenderを使うimport { render } from "astro:content";const { Content, headings } = await render(entry);---サイトの画像
Astro 4.14とは関係ないがサイトの画像変換のAstro Remark Eleventy ImageがVercelでよく画像生成を失敗し たりするので画像変換をAstroに任せることにした。
それに伴い各画像ファイルはpublicから/src/assets/images/へ移動した。
markdown内の画像にclassをつけることもEleventyがやっていたのでBridgy Fedに必要なu-photoクラスがつけ られなくなってしまった。
rehype-add-classなどでclassを付与することもやってみたがpages内のmarkdownファイルだとclassが正しく付 与されるがContent Layerのmarkdownファイルには<img className="u-photo">とつけられてしまう。
現在対処方法がないので画像にu-photoをつける場合はmdxファイルにするしかない。
