Astro2.0のCollections

Astro 2.0 Collections
tsconfig.json
の compilerOptions に以下を追記する。
Markdown の要求されている frontmatter がちゃんと書かれているかのチェックが行われるようになる。
"strictNullChecks": true
src/content
フォルダを作成し Astro2.0 の Collection の定義は src/content/config.ts
に記述する。
---// `astro:content`から z defineCollection を読み込むimport { z, defineCollection } from "astro:content";
// Collection の定義const blogCollection = defineCollection({ schema: z.object({ layout: z.string(), title: z.string(), date: z.string().transform((str) => new Date(str)), description: z.string().optional(), tags: z.array(z.string()).optional(), featured: z.string().optional(), heroImage: z.string().optional(), author: z.string().optional(), isDraft: z.boolean().optional(), updatedDate: z .string() .transform((str) => new Date(str)) .optional(), }),});// 以下で Collection を割り当てる Collection を読み込む場合は// getcollection(以下の文字列) で可能export const collections = { blog: blogCollection, note: blogCollection,};
上記のように Collection が定義されていると Markdown ファイルが src/content
以下に作成・更新されるたびに /.astro/types.d.ts
に自動的に型が生成されていく。
(npm run dev してあれば常に /src/content を監視して生成してくれる)
---// 以下は自動生成された types.d.ts の一部 const entryMap: { "blog": {"2011/2011-01-02.md": { id: "2011/2011-01-02.md", slug: "2011/2011-01-02", body: string, collection: "blog", data: InferEntrySchema<"blog">},"2011/2011-01-13.md": { id: "2011/2011-01-13.md", slug: "2011/2011-01-13", body: string, collection: "blog", data: InferEntrySchema<"blog">},
Collection を読み込む
以前は glob
で行っていたブログのオブジェクト読み出しは以下のようにできる
以前の方法
---const posts = await Astro.glob("../pages/posts/**/*.md");
Astro2.0 の方法
読み込みたい Collection を文字列で指定できる。
---const posts = await getCollection("blog");
サブディレクトリの処理
[slug].astro は […slug].astro とすればサブディレクトリも読み込む
逆にそうしないとサブディレクトリのコンテンツを生成しない
src/content
の中のフォルダと Collection 名は一致させることが必要
“blog” をクラスとして読み込んでいるため 文字列 blog を直接書き込んでいるファイルがある
---export const collections = { blog: blogCollection,};
---post: CollectionEntry<"blog">;
<CardList> {page.data.map((post: CollectionEntry<"blog">) => <Card post={post} />)} </CardList>
それ以外は src/config.ts で定義した BLOG_NAME を使用している
---// Place any global data in this file.// You can import this data from anywhere in your site by using the `import` keyword.
export const SITE_TITLE = "へび右曲がり";export const SITE_DESCRIPTION = "へび右曲がりはubanisによるふたなりサイトです";export const SITE_LANG = "ja";export const SITE_DATE_LANG = "ja-JP";export const SITE_DOUJIN_BASE_URL = "/doujin/";export const BLOG_NAME = "blog";export const BLOG_BLOG_PAGE_SIZE = 10;