アストロコンテンツコレクションの初心者：強(qiáng)力なコンテンツモデルの構(gòu)築

この記事は、SitePoint Premiumの「AstroのPowerのロックを解除する」という現(xiàn)在にリリースされた本から抜粋されています。 Astroのコンテンツコレクション機(jī)能を使用して、柔軟でスケーラブルなコンテンツモデルを構(gòu)築する方法を?qū)Wびます。

Astroは、特別なsrc/contentフォルダーを使用してコンテンツコレクションを管理します。サブフォルダーを作成して、src/content/dev-blogやsrc/content/corporate-blogなどのさまざまなコンテンツコレクションを整理できます。

各コンテンツコレクションは、構(gòu)成ファイル（たとえば、/src/content/config.jsまたは.ts）で構(gòu)成し、ZODを使用してコレクションパターンを定義できます。 Zodは、Astroに統(tǒng)合されている「タイプスクリプトベースのスキーマ検証ツール」です。

以下は構(gòu)成の例です。

// src/content/config.js
import { z, defineCollection } from 'astro:content';

const devBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string().default('The Dev Team'),
    tags: z.array(z.string()),
    date: z.date(),
    draft: z.boolean().default(true),
    description: z.string(),
  }),
});

const corporateBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    date: z.date(),
    featured: z.boolean(),
    language: z.enum(['en', 'es']),
  }),
});

export const collections = {
  devblog: devBlogCollection,
  corporateblog: corporateBlogCollection,
};

コードは、「開発者ブログ」と「エンタープライズブログ」の2つのコンテンツコレクションを定義しています。 defineCollectionメソッドを使用すると、各コレクションのパターンを作成できます。

マークダウンファイルとフロントエンドコンテンツ

このチュートリアルのコンテンツコレクションの例では、

ファイルには、構(gòu)成ファイルで指定されたパターンに一致するフロントエンドコンテンツが含まれていると想定しています。たとえば、「會社のブログ」の記事は次のようになるかもしれません：.md

---
title: 'Buy!!'
author: 'Jack from Marketing'
date: 2023-07-19
featured: true
language: 'en'
---

# Some Marketing Promo

This is the best product!

スラッグ生成

Astroは、ファイル名に基づいて記事のスラッグを自動的に生成します。たとえば、

のナメクジはfirst-post.mdです。フロントエンドコンテンツでfirst-postフィールドが提供されている場合、Astroはカスタムスラグを使用します。 slug

オブジェクトで指定されているプロパティは、コンテンツが配置されているフォルダー名と一致する（およびケースに敏感である）必要があることに注意してください。 export const collections

データquery

マークダウンファイル（

およびsrc/content/devblogにあります）およびsrc/content/corporateblogファイルを準(zhǔn)備すると、コレクションのデータのクエリを開始できます。 config.js

---
import { getCollection } from 'astro:content';
const allDevPosts = await getCollection('devblog');
const allCorporatePosts = await getCollection('corporateblog');
---
{JSON.stringify(allDevPosts)}
{JSON.stringify(allCorporatePosts)}

メソッドを使用して、特定のセットのすべてのエントリを取得できます。 「Developer Blog」（

）および「Company Blog」（>）のすべての記事は、この例で取得されています。テンプレートでgetCollectionを使用して、元のデータを返します。 devblog corporateblogフロントエンドのコンテンツデータに加えて、返されたデータにはJSON.stringify()、

、

屬性も含まれます（id屬性には記事のコンテンツが含まれています）。 slug bodyすべての記事を反復(fù)することにより、ドラフトや言語固有の記事をフィルタリングすることもできます。 body

すべての投稿を返しますが、コレクションの単一のエントリを返すために

を使用することもできます。

import { getCollection } from 'astro:content';

const spanishEntries = await getCollection('corporateblog', ({ data }) => {
  return data.language === 'es';
});

getCollectionvs getEntry

コレクションから複數(shù)の記事を返す方法は2つありますが、2つの間にわずかな違いがあります。 getCollection()コレクション名に基づいてコンテンツコレクションエントリのリストを取得し、同じコレクションから複數(shù)のコレクションエントリを取得します。 getEntries() コンテンツを取得するための

の例は、參照エンティティが使用されている

に示されています（たとえば、関連記事リスト）。 getEntries()

コンテンツディスプレイ

データを照會する方法がわかりました。フォーマットされた方法でデータを表示する方法について説明しましょう。 Astroは、Markdownのコンテンツ全體を組み込みのAstroコンポーネントにレンダリングするための便利な方法を提供します。コンテンツの構(gòu)築と表示方法は、靜的サイトの生成モードを使用しているか、サーバー側(cè)のレンダリングモードを使用しているかによっても異なります。

render()プレレンダリングの場合、<content></content>メソッド：

を使用できます

getStaticPaths()は

コードで使用されます。次に、エントリをキャプチャするために

// src/content/config.js
import { z, defineCollection } from 'astro:content';

const devBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string().default('The Dev Team'),
    tags: z.array(z.string()),
    date: z.date(),
    draft: z.boolean().default(true),
    description: z.string(),
  }),
});

const corporateBlogCollection = defineCollection({
  schema: z.object({
    title: z.string(),
    author: z.string(),
    date: z.date(),
    featured: z.boolean(),
    language: z.enum(['en', 'es']),
  }),
});

export const collections = {
  devblog: devBlogCollection,
  corporateblog: corporateBlogCollection,
};

に依存します。これは、メタデータ、

、getStaticPaths()、およびAstro.propsメソッドを含むオブジェクトになります。この方法は、ASTROテンプレートのHTMLへのマークダウンエントリをレンダリングする責(zé)任があります。これは、idコンポーネントを作成することによって実裝されています。驚くべきことに、これで、slugコンポーネントをテンプレートに追加して、HTMLにレンダリングされたマークダウンコンテンツを確認(rèn)する必要があります。 render()

以上がアストロのコンテンツコレクションを始めましょうの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。