microCMS Content Loader for Astro Content Layer
npm install microcms-astro-loadermicroCMS Content Loader for the Astro Content Layer.
``sh`
npm install microcms-astro-loader
In your src/content.config.ts, define your collections with the microCMSContentLoader function. This function will fetch all the content from the specified microCMS endpoint and store it in the data store.
`ts
import { defineCollection, z } from "astro:content";
import { microCMSContentLoader } from "microcms-astro-loader";
const posts = defineCollection({
loader: microCMSContentLoader({
apiKey: "your-microcms-api-key",
serviceDomain: "your-microcms-service-domain",
endpoint: "your-microcms-endpoint", // e.g. "blog" or "posts"
}),
// Define the schema of your content
schema: z.object({
id: z.string(),
title: z.string(),
description: z.string(),
content: z.string(),
thumbnail: z.object({
url: z.string().url(),
height: z.number(),
width: z.number(),
}).optional(),
}),
});
export const collections = { posts };
`
You can then use the content in your Astro pages:
`astro
---
import { getCollection } from "astro:content";
const posts = await getCollection("posts");
---
There is also the
microCMSObjectLoader function, which is useful for loading a single object. You can use it in the same way as microCMSContentLoader, but it will return a single object instead of an array.Demo
You can find a demo project of this package on https://microcms-astro-loader-demo.vercel.app/. The source code for the demo is available in the
playground` directory.