Astro의 콘텐츠 컬렉션을 시작합니다

Astro Content Collection의 초보자 : 강력한 컨텐츠 모델 구축 이 기사는 itepoint 프리미엄에서 현재 출시 된 책 "Astro Of Astro 잠금 해제"에서 발췌 한 것입니다. Astro의 컨텐츠 수집 기능을 사용하여 유연하고 확장 가능한 컨텐츠 모델을 구축하는 방법을 배웁니다.

Astro는 특수

폴더를 사용하여 컨텐츠 컬렉션을 관리합니다. 서브 폴더를 만들어 및 와 같은 다양한 컨텐츠 모음을 구성 할 수 있습니다.

각 컨텐츠 수집은 구성 파일 (예 : 또는 )에서 구성 할 수 있으며 ZOD를 사용하여 수집 패턴을 정의합니다. ZOD는 ASTRO에 통합 된 "정적 유형 추론이있는 TypeScript 기반 스키마 검증 도구"입니다. src/content 다음은 구성 예입니다 src/content/dev-blog 코드는 "개발자 블로그"와 "엔터프라이즈 블로그"라는 두 가지 컨텐츠 컬렉션을 정의합니다. src/content/corporate-blog 메소드를 사용하면 각 컬렉션에 대한 패턴을 만들 수 있습니다.

마크 다운 파일 및 프론트 엔드 컨텐츠 이 튜토리얼의 컨텐츠 수집 예제는 파일에 구성 파일에 지정된 패턴과 일치하는 프론트 엔드 컨텐츠가 포함된다고 가정합니다. 예를 들어, "회사 블로그"기사는 다음과 같습니다.

슬러그 생성 Astro는 파일 이름에 따라 기사에 대한 슬러그를 자동으로 생성합니다. 예를 들어, 의 슬러그는 입니다. 프론트 엔드 컨텐츠에 필드가 제공되면 Astro는 사용자 정의 슬러그를 사용합니다.

객체에 지정된 속성은 컨텐츠가 위치한 폴더 이름과 일치하고 (사례에 민감해야 함) 주목하십시오.

데이터 쿼리 Markdown 파일 ( 및 에 위치)을 준비 할 때 컬렉션에서 데이터 쿼리를 시작할 수 있습니다. /src/content/config.js .ts 메소드는 주어진 세트의 모든 항목을 검색하는 데 사용될 수 있습니다. "Developer Blog"() 및 "Company Blog"()의 모든 기사가 예제에서 검색됩니다. 템플릿에서

를 사용하여 원래 데이터를 반환하십시오.

프론트 엔드 컨텐츠 데이터 외에도 반환 된 데이터에는 ,

및

// 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,
};

속성이 포함됩니다 (

속성에는 기사 내용이 포함되어 있음). defineCollection 당신은 또한 모든 기사를 반복하여 초안이나 언어 별 기사를 필터링 할 수 있습니다.

모든 게시물을 반환하지만

를 사용하여 컬렉션에서 단일 항목을 반환 할 수도 있습니다.

vs

.md 컬렉션에서 여러 기사를 반환하는 두 가지 방법이 있지만 둘 사이에는 약간의 차이가 있습니다. 컬렉션 이름을 기반으로 컨텐츠 수집 항목 목록을 검색하고

는 동일한 컬렉션에서 여러 컬렉션 항목을 검색합니다. getCollection() 내용을 검색하려면 의 예는 참조 엔티티 (예 : 관련 기사 목록)가 사용되는 getEntries()에 나와 있습니다.

컨텐츠 디스플레이 이제 데이터를 쿼리하는 방법을 알고 있습니다. 데이터를 형식으로 표시하는 방법에 대해 논의 해 봅시다. ASTRO는 getEntries()라는 편리한 방법을 제공합니다. 콘텐츠를 빌드하고 표시하는 방식은 정적 사이트 생성 또는 서버 측 렌더링 모드를 사용하는지 여부에 따라 다릅니다.

사전 렌더링의 경우

메소드 : 를 사용할 수 있습니다

는

코드에 사용됩니다. 그런 다음 입력에 대한 메타 데이터, , render() 및 메소드가 포함 된 객체가 될 항목을 캡처하기 위해 에 의존합니다. 이 방법은 Astro Template에서 HTML로 Markdown 항목을 렌더링하는 데 책임이 있으며, 이는 <content></content> 구성 요소를 생성하여 구현됩니다. 놀랍게도, 이제

구성 요소를 템플릿에 추가하여 마크 다운 컨텐츠를 HTML로 렌더링하는 것을 확인하면됩니다.

위 내용은 Astro의 콘텐츠 컬렉션을 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!