Astro Content Collections: ยกระดับเว็บไซต์ของคุณด้วยการจัดการเนื้อหาที่ปลอดภัยต่อประเภท (Type-Safe)

Astro ซึ่งเป็น static site generator ที่ได้รับความนิยม มีฟีเจอร์ที่ทรงพลังที่เรียกว่า Content Collections ระบบนี้มอบวิธีการจัดการเนื้อหาของเว็บไซต์ที่มีโครงสร้างและปลอดภัยต่อประเภท (type-safe) ช่วยให้มั่นใจในความสอดคล้อง ลดข้อผิดพลาด และปรับปรุงประสบการณ์การพัฒนาโดยรวม ไม่ว่าคุณจะสร้างบล็อกส่วนตัว เว็บไซต์เอกสาร หรือแพลตฟอร์มอีคอมเมิร์ซที่ซับซ้อน Content Collections สามารถปรับปรุงขั้นตอนการทำงานของคุณได้อย่างมาก

Astro Content Collections คืออะไร?

Content Collections คือไดเรกทอรีเฉพาะภายในโปรเจกต์ Astro ของคุณ ที่ซึ่งคุณจัดระเบียบไฟล์เนื้อหา (โดยทั่วไปคือ Markdown หรือ MDX) แต่ละคอลเลกชันจะถูกกำหนดโดย schema ซึ่งระบุโครงสร้างและชนิดข้อมูลที่คาดหวังของ frontmatter (ข้อมูลเมตาดาต้าที่อยู่ตอนต้นของแต่ละไฟล์) ของเนื้อหาของคุณ สกีมานี้ช่วยให้แน่ใจว่าเนื้อหาทั้งหมดภายในคอลเลกชันเป็นไปตามรูปแบบที่สอดคล้องกัน ป้องกันความไม่สอดคล้องและข้อผิดพลาดที่อาจเกิดขึ้นจากการป้อนข้อมูลด้วยตนเอง

ลองนึกภาพว่ามันคือฐานข้อมูล แต่สำหรับไฟล์เนื้อหาของคุณ แทนที่จะจัดเก็บเนื้อหาในเซิร์ฟเวอร์ฐานข้อมูล เนื้อหาจะถูกเก็บไว้ในไฟล์ข้อความธรรมดา ซึ่งมีประโยชน์ด้านการควบคุมเวอร์ชันและช่วยให้คุณเก็บเนื้อหาไว้ใกล้กับโค้ด อย่างไรก็ตาม Content Collections แตกต่างจากการมีแค่โฟลเดอร์ของไฟล์ Markdown ทั่วไปตรงที่มันบังคับใช้โครงสร้างและความปลอดภัยของประเภทข้อมูลผ่านสกีมา

ทำไมต้องใช้ Content Collections?

• ความปลอดภัยของประเภทข้อมูล (Type Safety): การผสานรวมกับ TypeScript ช่วยให้มั่นใจว่าข้อมูลเนื้อหาของคุณได้รับการตรวจสอบประเภทระหว่างการพัฒนา ทำให้ตรวจจับข้อผิดพลาดได้เร็วและป้องกันปัญหาระหว่างการทำงานจริง สิ่งนี้มีประโยชน์อย่างยิ่งในโปรเจกต์ขนาดใหญ่ที่มีผู้ร่วมพัฒนาหลายคน
• การตรวจสอบสกีมา (Schema Validation): สกีมาที่กำหนดไว้จะตรวจสอบ frontmatter ของแต่ละไฟล์เนื้อหา เพื่อให้แน่ใจว่ามีฟิลด์ที่จำเป็นครบถ้วนและมีชนิดข้อมูลที่ถูกต้อง
• ปรับปรุงความสอดคล้องของเนื้อหา: การบังคับใช้โครงสร้างที่สอดคล้องกันช่วยให้ Content Collections สามารถรักษารูปลักษณ์และความรู้สึกที่สม่ำเสมอทั่วทั้งเว็บไซต์ของคุณ
• ประสบการณ์นักพัฒนาที่ดียิ่งขึ้น: API ที่ปลอดภัยต่อประเภทให้การเติมโค้ดอัตโนมัติและการตรวจจับข้อผิดพลาดที่ยอดเยี่ยมใน IDE ของคุณ ทำให้การจัดการเนื้อหาง่ายและมีประสิทธิภาพมากขึ้น
• การเข้าถึงข้อมูลที่ง่ายขึ้น: Astro มี API ที่สะดวกสำหรับการสืบค้นและเข้าถึงเนื้อหาจากคอลเลกชันของคุณ ทำให้การดึงข้อมูลในคอมโพเนนต์ของคุณง่ายขึ้น
• การจัดระเบียบเนื้อหา: คอลเลกชันให้โครงสร้างที่ชัดเจนและมีเหตุผลสำหรับการจัดระเบียบเนื้อหาของคุณ ทำให้ง่ายต่อการค้นหาและจัดการ ตัวอย่างเช่น เว็บไซต์เอกสารอาจมีคอลเลกชันสำหรับ "guides", "api-reference" และ "changelog"

เริ่มต้นใช้งาน Content Collections

นี่คือคำแนะนำทีละขั้นตอนในการนำ Content Collections ไปใช้ในโปรเจกต์ Astro ของคุณ:

1. เปิดใช้งาน Content Collections

ขั้นแรก เปิดใช้งาน integration @astrojs/content ในไฟล์ astro.config.mjs (หรือ astro.config.js) ของคุณ:

            // astro.config.mjs
import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';
import { contentIntegration } from '@astrojs/content'

export default defineConfig({
  integrations: [
    mdx(),
    contentIntegration()
  ],
});

            

              
                Copy
              
            
          

2. สร้างไดเรกทอรี Content Collection

สร้างไดเรกทอรีชื่อ src/content/[collection-name] โดยที่ [collection-name] คือชื่อคอลเลกชันของคุณ (เช่น src/content/blog) Astro จะจดจำไดเรกทอรีนี้เป็น content collection โดยอัตโนมัติ

ตัวอย่างเช่น หากต้องการสร้างคอลเลกชัน 'blog' โครงสร้างโปรเจกต์ของคุณควรมีลักษณะดังนี้:

  src/
    content/
      blog/
        my-first-post.md
        my-second-post.md
        ...
    pages/
    ...

3. กำหนดสกีมาของคอลเลกชัน

สร้างไฟล์ src/content/config.ts (หรือ src/content/config.js) เพื่อกำหนดสกีมาสำหรับคอลเลกชันของคุณ ไฟล์นี้จะ export อ็อบเจกต์ config ที่ระบุสกีมาสำหรับแต่ละคอลเลกชัน

นี่คือตัวอย่างสกีมาสำหรับคอลเลกชัน 'blog':

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

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z
      .string()
      .or(z.date())
      .transform((val) => new Date(val)),
    updatedDate: z
      .string()
      .optional()
      .transform((str) => (str ? new Date(str) : undefined)),
    heroImage: z.string().optional(),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = {
  blog,
};

            

              
                Copy
              
            
          

คำอธิบาย:

• defineCollection: ฟังก์ชันนี้ใช้เพื่อกำหนด content collection
• schema: property นี้กำหนดสกีมาสำหรับ frontmatter ของคอลเลกชัน
• z.object: สิ่งนี้กำหนดสกีมาเป็นอ็อบเจกต์ JavaScript เราใช้ Zod สำหรับการตรวจสอบสกีมา ซึ่งเป็นไลบรารีการประกาศและตรวจสอบสกีมาที่เน้น TypeScript และได้รับความนิยม
• z.string(), z.date(), z.array(): เหล่านี้คือประเภทสกีมาของ Zod ที่ระบุชนิดข้อมูลที่คาดหวังสำหรับแต่ละฟิลด์
• z.optional(): ทำให้ฟิลด์เป็นทางเลือก (optional)
• transform: ใช้เพื่อแปลงข้อมูล frontmatter ในกรณีนี้ เรากำลังทำให้แน่ใจว่า `pubDate` และ `updatedDate` เป็นอ็อบเจกต์ `Date`

4. สร้างไฟล์เนื้อหา

สร้างไฟล์ Markdown หรือ MDX ภายในไดเรกทอรีคอลเลกชันของคุณ (เช่น src/content/blog/my-first-post.md) แต่ละไฟล์ควรมี frontmatter ที่สอดคล้องกับสกีมาที่คุณกำหนด

นี่คือตัวอย่างไฟล์ Markdown พร้อม frontmatter:

            ---
title: My First Blog Post
description: This is a short description of my first blog post.
pubDate: 2023-10-27
heroImage: /images/my-first-post.jpg
tags:
  - astro
  - blog
  - javascript
---

# My First Blog Post

This is the content of my first blog post.

            

              
                Copy
              
            
          

5. เข้าถึงเนื้อหาในคอมโพเนนต์ของคุณ

ใช้ฟังก์ชัน getCollection() จาก astro:content เพื่อดึงเนื้อหาจากคอลเลกชันของคุณในคอมโพเนนต์ Astro ฟังก์ชันนี้จะส่งคืนอาร์เรย์ของรายการ ซึ่งแต่ละรายการแทนไฟล์เนื้อหาหนึ่งไฟล์

            // src/pages/blog.astro
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');

<ul>
  {posts.map((post) => (
    <li>
      <a href={`/blog/${post.slug}`}>{post.data.title}</a>
      <p>{post.data.description}</p>
    </li>
  ))}
</ul>

            

              
                Copy
              
            
          

คำอธิบาย:

• getCollection('blog'): ดึงรายการทั้งหมดจากคอลเลกชัน 'blog'
• post.slug: 'slug' คือตัวระบุที่ไม่ซ้ำกันสำหรับแต่ละไฟล์เนื้อหา ซึ่งสร้างขึ้นโดยอัตโนมัติจากชื่อไฟล์ (เช่น 'my-first-post' สำหรับ 'my-first-post.md')
• post.data: มีข้อมูล frontmatter สำหรับแต่ละรายการ ซึ่งได้รับการตรวจสอบประเภทตามสกีมา

คุณสมบัติขั้นสูงและการปรับแต่ง

Content Collections มีคุณสมบัติขั้นสูงและตัวเลือกการปรับแต่งหลายอย่างเพื่อปรับระบบให้เข้ากับความต้องการเฉพาะของคุณ:

1. การรองรับ MDX

Content Collections ทำงานร่วมกับ MDX ได้อย่างราบรื่น ช่วยให้คุณสามารถฝังคอมโพเนนต์ JSX ได้โดยตรงภายในเนื้อหา Markdown ของคุณ ซึ่งมีประโยชน์สำหรับการสร้างเนื้อหาเชิงโต้ตอบและไดนามิก

หากต้องการใช้ MDX ให้ติดตั้ง integration @astrojs/mdx และกำหนดค่าในไฟล์ astro.config.mjs ของคุณ (ดังที่แสดงในขั้นตอนที่ 1) จากนั้นสร้างไฟล์ MDX (เช่น my-post.mdx) และใช้ синтаксис JSX ภายในเนื้อหาของคุณ

            ---
title: My MDX Post
description: This post uses MDX.
---

# My MDX Post

<MyComponent prop1="value1" prop2={2} />

This is some regular Markdown content.

            

              
                Copy
              
            
          

2. ประเภทสกีมาที่กำหนดเอง

Zod มีประเภทสกีมาในตัวที่หลากหลาย รวมถึง string, number, boolean, date, array และ object คุณยังสามารถกำหนดประเภทสกีมาที่กำหนดเองได้โดยใช้วิธี .refine() ของ Zod เพื่อบังคับใช้กฎการตรวจสอบที่เฉพาะเจาะจงมากขึ้น

ตัวอย่างเช่น คุณสามารถตรวจสอบว่าสตริงเป็น URL ที่ถูกต้องหรือไม่:

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

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    url: z.string().url(), // Validates that the string is a URL
  }),
});

export const collections = {
  blog,
};

            

              
                Copy
              
            
          

3. การสร้าง Slug แบบกำหนดเอง

โดยค่าเริ่มต้น Astro จะสร้าง slug สำหรับแต่ละไฟล์เนื้อหาจากชื่อไฟล์ คุณสามารถปรับแต่งลักษณะการทำงานนี้ได้โดยการให้ property slug ใน frontmatter หรือโดยการใช้ property entry.id เพื่อสร้าง slug ที่กำหนดเองตามเส้นทางของไฟล์

ตัวอย่างเช่น การใช้เส้นทางไฟล์เพื่อสร้าง slug:

            // src/pages/blog/[...slug].astro
import { getCollection, type CollectionEntry } from 'astro:content';

export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug }, // Use the default slug
    props: {
      post,
    },
  }));
}

type Props = {
  post: CollectionEntry<'blog'>;
};

const { post } = Astro.props as Props;

            

              
                Copy
              
            
          

4. การกรองและการเรียงลำดับเนื้อหา

คุณสามารถใช้วิธีของอาร์เรย์ใน JavaScript (filter, sort, ฯลฯ) เพื่อปรับแต่งเนื้อหาที่ดึงมาจากคอลเลกชันของคุณเพิ่มเติม ตัวอย่างเช่น คุณสามารถกรองโพสต์ตามแท็กหรือเรียงลำดับตามวันที่เผยแพร่

            // src/pages/blog.astro
import { getCollection } from 'astro:content';

const posts = await getCollection('blog');

const featuredPosts = posts.filter((post) => post.data.tags?.includes('featured'));
const sortedPosts = posts.sort((a, b) => new Date(b.data.pubDate).getTime() - new Date(a.data.pubDate).getTime());

            

              
                Copy
              
            
          

5. การรองรับหลายภาษา (Internationalization - i18n)

แม้ว่า Content Collections จะไม่มีฟีเจอร์ i18n โดยตรง แต่คุณสามารถนำการรองรับหลายภาษาไปใช้ได้โดยการสร้าง content collections แยกสำหรับแต่ละภาษา หรือโดยการใช้ฟิลด์ใน frontmatter เพื่อระบุภาษาของแต่ละไฟล์เนื้อหา

ตัวอย่างการใช้คอลเลกชันแยก:

  src/
    content/
      blog-en/
        my-first-post.md
      blog-es/
        mi-primer-articulo.md

จากนั้นคุณจะต้องมีคำจำกัดความของคอลเลกชันสองชุด: blog-en และ blog-es ซึ่งแต่ละชุดจะมีเนื้อหาของตนเอง

ตัวอย่างการใช้ฟิลด์ `lang` ใน frontmatter:

            ---
title: My First Blog Post
lang: en
---

# My First Blog Post

            

              
                Copy
              
            
          

จากนั้น คุณจะต้องกรองคอลเลกชันตามฟิลด์ lang เพื่อดึงเนื้อหาที่ถูกต้องสำหรับแต่ละภาษา

แนวทางปฏิบัติที่ดีที่สุดสำหรับการใช้ Content Collections

• วางแผนสกีมาของคุณอย่างรอบคอบ: คิดถึงโครงสร้างและชนิดข้อมูลของเนื้อหาของคุณก่อนที่จะกำหนดสกีมา สกีมาที่ออกแบบมาอย่างดีจะทำให้การจัดการเนื้อหาของคุณง่ายและมีประสิทธิภาพมากขึ้นในระยะยาว
• ใช้ชื่อฟิลด์ที่สื่อความหมาย: เลือกชื่อฟิลด์ที่ชัดเจนและอธิบายตัวเองได้ ซึ่งจะช่วยปรับปรุงความสามารถในการอ่านและบำรุงรักษาโค้ด
• ให้คำอธิบายที่ชัดเจนสำหรับแต่ละฟิลด์: ใช้ property `description` ในสกีมาของ Zod เพื่อให้คำอธิบายที่เป็นประโยชน์สำหรับแต่ละฟิลด์ สิ่งนี้จะช่วยนักพัฒนาคนอื่น (และตัวคุณเองในอนาคต) ในการทำความเข้าใจวัตถุประสงค์ของแต่ละฟิลด์
• บังคับใช้ฟิลด์ที่จำเป็น: ใช้วิธี `required()` ของ Zod เพื่อให้แน่ใจว่ามีฟิลด์ที่จำเป็นทั้งหมดอยู่ใน frontmatter
• ใช้ฟิลด์ทางเลือกอย่างจำกัด: ใช้ฟิลด์ทางเลือกเฉพาะเมื่อจำเป็นจริงๆ เท่านั้น การบังคับใช้ฟิลด์ที่จำเป็นช่วยรักษาความสอดคล้องและป้องกันข้อผิดพลาด
• จัดทำเอกสารสำหรับคอลเลกชันของคุณ: สร้างเอกสารสำหรับ content collections ของคุณ อธิบายวัตถุประสงค์ของแต่ละคอลเลกชัน โครงสร้างของสกีมา และกฎการตรวจสอบที่เฉพาะเจาะจงใดๆ
• จัดระเบียบเนื้อหาของคุณ: ใช้แบบแผนการตั้งชื่อที่สอดคล้องกันสำหรับไฟล์เนื้อหาของคุณและจัดระเบียบไฟล์เหล่านั้นลงในไดเรกทอรีที่มีเหตุผลภายในคอลเลกชันของคุณ
• ทดสอบคอลเลกชันของคุณอย่างละเอียด: เขียนการทดสอบเพื่อให้แน่ใจว่า content collections ของคุณทำงานอย่างถูกต้องและสกีมาของคุณกำลังตรวจสอบ frontmatter ตามที่คาดไว้
• พิจารณาใช้ CMS สำหรับผู้สร้างเนื้อหา: สำหรับเว็บไซต์ที่มีเนื้อหาจำนวนมาก ให้พิจารณาจับคู่ Astro กับ Headless CMS ซึ่งจะให้อินเทอร์เฟซที่ใช้งานง่ายสำหรับผู้สร้างเนื้อหาที่ไม่จำเป็นต้องโต้ตอบกับโค้ด ตัวอย่างเช่น Contentful, Strapi และ Sanity

ตัวอย่างกรณีการใช้งาน: จากบล็อกส่วนตัวสู่อีคอมเมิร์ซระดับโลก

ความสามารถรอบด้านของ Astro Content Collections ทำให้เหมาะสำหรับโปรเจกต์ที่หลากหลาย:

• บล็อกส่วนตัว: จัดการโพสต์บล็อกด้วยฟิลด์สำหรับชื่อเรื่อง วันที่เผยแพร่ ผู้เขียน เนื้อหา และแท็ก ช่วยให้สามารถอัปเดตเนื้อหา สร้างรายการบล็อก และแสดงรายการตามหมวดหมู่ได้อย่างง่ายดาย
• เว็บไซต์เอกสาร: จัดโครงสร้างหน้าเอกสารด้วยฟิลด์สำหรับชื่อเรื่อง เวอร์ชัน หมวดหมู่ และเนื้อหา ทำให้ได้โครงสร้างเอกสารที่สอดคล้องกันและง่ายต่อการนำทางข้ามเวอร์ชันต่างๆ ลองนึกถึงโปรเจกต์โอเพนซอร์สขนาดใหญ่อย่าง Kubernetes ซึ่งเอกสารมีความสำคัญอย่างยิ่ง
• เว็บไซต์การตลาด: กำหนดหน้าต่างๆ ด้วยฟิลด์สำหรับชื่อเรื่อง คำอธิบาย คีย์เวิร์ด และเนื้อหา เพิ่มประสิทธิภาพเนื้อหาสำหรับ SEO และรักษาความสอดคล้องของแบรนด์ในทุกหน้า
• แพลตฟอร์มอีคอมเมิร์ซ: จัดทำแคตตาล็อกสินค้าด้วยฟิลด์สำหรับชื่อ ราคา คำอธิบาย รูปภาพ และหมวดหมู่ ทำให้สามารถสร้างรายการสินค้าแบบไดนามิกและอำนวยความสะดวกในการอัปเดตผลิตภัณฑ์ได้ง่าย สำหรับตัวอย่างอีคอมเมิร์ซระดับโลก ลองพิจารณาการมีคอลเลกชันที่แตกต่างกันตามภูมิภาคเพื่อตอบสนองตลาดท้องถิ่นและข้อกำหนดทางกฎหมาย ซึ่งจะอนุญาตให้มีฟิลด์ที่แตกต่างกัน เช่น ข้อมูลภาษีหรือข้อจำกัดความรับผิดชอบตามกฎระเบียบของประเทศนั้นๆ
• ฐานความรู้ (Knowledge Base): จัดระเบียบบทความด้วยฟิลด์สำหรับชื่อเรื่อง หัวข้อ ผู้เขียน และเนื้อหา ช่วยให้ผู้ใช้สามารถค้นหาและเรียกดูบทความตามหัวข้อได้อย่างง่ายดาย

สรุป

Astro Content Collections มอบวิธีการจัดการเนื้อหาของเว็บไซต์ที่ทรงพลังและปลอดภัยต่อประเภท (type-safe) ด้วยการกำหนดสกีมา การตรวจสอบ frontmatter และการมี API ที่สะดวกสำหรับการเข้าถึงข้อมูล Content Collections ช่วยให้มั่นใจในความสอดคล้องของเนื้อหา ลดข้อผิดพลาด และปรับปรุงประสบการณ์การพัฒนาโดยรวม ไม่ว่าคุณจะสร้างเว็บไซต์ส่วนตัวขนาดเล็กหรือแอปพลิเคชันขนาดใหญ่ที่ซับซ้อน Content Collections สามารถปรับปรุงขั้นตอนการทำงานของคุณได้อย่างมากและช่วยให้คุณสร้างเว็บไซต์ที่แข็งแกร่งและดูแลรักษาง่ายขึ้น