Frontend Development

Content Collections Astro: Quản lý blog chuyên nghiệp 2026

11/5/2026

Nếu bạn đang xây dựng blog bằng Astro và muốn quản lý nội dung theo cách chuyên nghiệp, dễ mở rộng và chuẩn SEO, thì Content Collections chính là tính năng bạn nên sử dụng.

Thay vì quản lý file Markdown rời rạc hoặc hard-code dữ liệu, Astro Content Collections giúp bạn:

✅ Quản lý bài viết có cấu trúc
✅ Kiểm tra lỗi dữ liệu bằng Schema Validation
✅ Hỗ trợ Markdown + MDX mạnh mẽ
✅ Tạo slug tự động
✅ Dễ dàng làm blog dynamic với pagination
✅ Tối ưu SEO metadata

Trong bài viết này, chúng ta sẽ tìm hiểu cách sử dụng astro content collections để xây dựng một blog chuyên nghiệp trong Astro năm 2026.

Content Collections trong Astro là gì?

Content Collections là hệ thống quản lý nội dung được tích hợp sẵn trong Astro giúp bạn tổ chức bài viết trong thư mục src/content.

Nó hoạt động như một mini CMS nội bộ, cho phép:

  • Quản lý bài viết Markdown/MDX

  • Validate dữ liệu bằng schema

  • Query nội dung an toàn với TypeScript

  • Tự động generate route

  • Tối ưu hiệu suất build

Ví dụ cấu trúc:

src/  
├── content/  
│   └── blog/  
│       ├── astro-seo.mdx  
│       ├── astro-performance.md  
│       └── astro-vs-nextjs.mdx

1. Cài đặt Content Collections trong Astro

Thông thường Astro đã hỗ trợ sẵn. Bạn chỉ cần tạo thư mục:

src/content

Tiếp theo tạo file config:

src/content.config.ts

Ví dụ:

import { defineCollection, z } from"astro:content";  
  
constblog=defineCollection({  
  schema: z.object({  
    title: z.string(),  
    description: z.string(),  
    publishDate: z.date(),  
    author: z.string(),  
    image: z.string().optional(),  
    category: z.string(),  
    tags: z.array(z.string()),  
    draft: z.boolean().default(false),  
    seoTitle: z.string().optional(),  
    seoDescription: z.string().optional(),  
  }),  
});  
  
exportconstcollections= {  
  blog,  
};

Ở đây chúng ta đang tạo một collection tên là blog.

2. Schema Validation – Tránh lỗi dữ liệu

Điểm mạnh nhất của astro content collections là khả năng kiểm tra dữ liệu bằng schema.

Ví dụ file bài viết:

---  
title: "Content Collections Astro"  
description: "Hướng dẫn dùng Astro Content Collections"  
publishDate: 2026-05-09  
author: "Luong Web"  
category: "Frontend"  
tags: ["astro", "seo", "blog"]  
draft: false  
seoTitle: "Content Collections Astro 2026"  
seoDescription: "Quản lý blog Astro chuyên nghiệp"  
---  
  
# Nội dung bài viết

Nếu bạn quên field bắt buộc như title hoặc nhập sai kiểu dữ liệu, Astro sẽ báo lỗi ngay khi build.

Ví dụ lỗi:

publishDate: "hello"

Build sẽ fail vì Astro yêu cầu kiểu date().

Điều này giúp tránh rất nhiều bug khi website có nhiều bài viết.

3. Markdown + MDX trong Astro

Astro hỗ trợ cả:

  • .md

  • .mdx

Markdown

Dùng khi bạn chỉ viết bài cơ bản:

# Hello Astro

MDX

Dùng khi muốn chèn React/Vue/Svelte component vào bài viết.

Ví dụ:

---  
title: "Astro MDX Example"  
---  
  
import Alert from "../../components/Alert.astro";  
  
# Astro MDX  
  
<Alert text="Đây là component trong bài viết" />

Để dùng MDX bạn cần cài:

npx astro add mdx

Sau đó Astro sẽ tự cấu hình.

MDX đặc biệt hữu ích khi xây dựng:

  • Blog kỹ thuật

  • Documentation

  • Landing page động

  • Tutorial có component tương tác

Đây là lý do nhiều người tìm kiếm từ khóa astro mdx khi làm blog nâng cao.

4. Lấy dữ liệu bài viết từ Content Collections

Sử dụng getCollection():

import { getCollection } from"astro:content";  
  
constposts=awaitgetCollection("blog");

Lọc bài chưa publish:

constposts=awaitgetCollection("blog", ({ data }) => {  
returndata.draft ===false;  
});

Sort theo ngày:

TypeScript

constsortedPosts=posts.sort(
(a, b) =>
newDate(b.data.publishDate).getTime() -
newDate(a.data.publishDate).getTime()
);


Nhờ TypeScript support nên bạn sẽ được autocomplete đầy đủ.

---

## 5\. Dynamic Routes cho Blog

Tạo file:

src/pages/blog/[slug].astro


Ví dụ:

import { getCollection, render } from "astro:content";

export async function getStaticPaths() {
const posts = await getCollection("blog");

return posts.map((post) => ({
params: {
slug: post.slug,
},
props: post,
}));
}

const post = Astro.props;

const { Content } = await render(post);

Astro sẽ tự động tạo route:

/blog/astro-seo  
/blog/astro-performance  
/blog/astro-vs-nextjs

Không cần tự viết router thủ công.

6. Generate Slug tự động

Astro tự tạo slug từ tên file.

Ví dụ:

astro-content-collections.mdx

Tự động thành:

/blog/astro-content-collections

Bạn có thể custom slug:

Markdown

title: "My Article"
slug: "astro-seo-2026"


Và update schema:

slug: z.string().optional()


Khi đó URL sẽ là:

/blog/astro-seo-2026


Điều này cực kỳ tốt cho SEO.

---

## 7\. Pagination Blog trong Astro

Khi blog có nhiều bài viết, bạn nên phân trang.

Tạo:

src/pages/blog/[page].astro


Ví dụ:

import { getCollection } from "astro:content";

const posts = await getCollection("blog");

export async function getStaticPaths({
paginate,
}) {
return paginate(posts, {
pageSize: 6,
});
}

const { page } = Astro.props;

{
page.data.map((post) => (
<a href={/blog/${post.slug}}>
{post.data.title}

))
}


Kết quả:

/blog/1
/blog/2
/blog/3


Pagination giúp:

-   Website load nhanh hơn
    
-   UX tốt hơn
    
-   Crawl SEO hiệu quả hơn
    

---

## 8\. SEO Metadata cho từng bài viết

Một blog chuyên nghiệp không thể thiếu SEO metadata.

Ví dụ trong layout:

const {
title,
description,
image,
} = Astro.props;

Sau đó truyền data từ Content Collection:

<BlogLayout  
  title={post.data.seoTitle}  
  description={post.data.seoDescription}  
  image={post.data.image}  
>  
  <Content />  
</BlogLayout>

Điều này giúp:

  • Tăng CTR trên Google

  • Preview đẹp khi share Facebook/Zalo

  • Tối ưu Open Graph SEO

Ví dụ cấu trúc blog chuyên nghiệp

src/  
├── content/  
│   └── blog/  
│       ├── astro-seo.mdx  
│       ├── astro-mdx.mdx  
│       └── content-collections.mdx  
│  
├── layouts/  
│   └── BlogLayout.astro  
│  
├── pages/  
│   └── blog/  
│       ├── [slug].astro  
│       └── [page].astro  
│  
└── content.config.ts

Đây là cấu trúc được nhiều developer sử dụng khi làm astro blog markdown chuyên nghiệp.

Kết luận

Content Collections trong Astro là cách tốt nhất để quản lý blog hiện đại vào năm 2026. Với schema validation, Markdown/MDX, dynamic routes, pagination và SEO metadata, bạn có thể xây dựng một hệ thống blog mạnh mẽ mà không cần CMS phức tạp.

Nếu bạn đang làm blog bằng Astro, hãy bắt đầu với astro content collections ngay từ đầu để code sạch hơn, dễ maintain hơn và tối ưu SEO tốt hơn.

Tags

#Astro.js #Tối ưu hiệu năng web #TypeScript

Góp ý nội dung