directus + astroのチュートリアルをやってみた #2

Directusを使って動的なページを作る！！

astroでは[hoge].astroでgetStaticPaths()でparamsから取得して内容を返してコネコネする感じ。

await directus.request(readItems("pages"))でpagesに設定したコンテンツをフェッチできるっぽい

code:slug.astro

export async function getStaticPaths() {

const pages = await directus.request(readItems("pages"));

return pages.map((page) => ({

params: { slug: page.slug },

props: page,

}));

}

const page = Astro.props;

Directusの設定を追加する。シングルトンはpagesの中にコンテンツが複数必要なので選択しない。titleはinput,contentはWYSIWUYFG

https://scrapbox.io/files/68c8e362baad7f52cf6d1318.png

もちろん権限に追加することもお忘れなく

こんな感じに編集できる！

https://scrapbox.io/files/68c8e53add2020fe4f3ca8ad.png

ビルドし直すと

https://scrapbox.io/files/68c8f1fc0694ea4878920bb5.png

ちゃんとcontentでh1画像も入れれる！神

そろそろ自分でもヘッドレスcmsとastroつなぎこみできそう