Astro Paper vs Plain Astro - So sánh toàn diện

Astro Paper vs Plain Astro - So sánh toàn diện

Tổng quan

Astro Paper là một blog theme được xây dựng trên nền tảng Astro, tập trung vào SEO và trải nghiệm người dùng. Bài viết này phân tích sự khác biệt giữa Astro Paper và plain Astro, cũng như hướng dẫn cách tự xây dựng các tính năng tương tự.

Câu hỏi

1. Astro Paper có gì mà Plain Astro không có?

2. Có thể cấu hình Plain Astro để có đầy đủ tính năng như Astro Paper không?

---

Câu trả lời

Câu 1: Astro Paper có gì mà Plain Astro không có?

1.1. Content Collection với Schema

Astro Paper sử dụng Astro Content Collections với Zod schema để validate frontmatter:

src/content.config.ts

import { defineCollection, z } from "astro:content";
import { glob } from "astro/loaders";

const blog = defineCollection({
  loader: glob({ pattern: "**/[^_]*.md", base: "./src/data/blog" }),
  schema: ({ image }) => z.object({
    author: z.string().default("Tên Author"),
    pubDatetime: z.date(),
    modDatetime: z.date().optional().nullable(),
    title: z.string(),
    featured: z.boolean().optional(),
    draft: z.boolean().optional(),
    tags: z.array(z.string()).default(["others"]),
    ogImage: image().or(z.string()).optional(),
    description: z.string(),
    canonicalURL: z.string().optional(),
    hideEditPost: z.boolean().optional(),
  }),
});

export const collections = { blog };

Plain Astro (mặc định): Không có content collection, chỉ sử dụng markdown/MDX files trong src/pages/.

1.2. Cấu hình Site toàn diện

src/config.ts

export const SITE = {
  website: "https://domain.com",
  author: "Sat Naing",
  profile: "https://satnaing.dev/",
  desc: "Mô tả cho SEO",
  title: "Tên Site",
  ogImage: "astropaper-og.jpg",
  lightAndDarkMode: true,  // Dark/Light mode
  postPerIndex: 4,
  postPerPage: 4,
  dynamicOgImage: true,   // Tự tạo OG images
  showArchives: true,
  showBackButton: true,
  editPost: {
    enabled: true,
    text: "Edit page",
    url: "https://github.com/...",
  },
  dir: "ltr",
  lang: "en",
  timezone: "Asia/Bangkok",
} as const;

1.3. Components sẵn có

Component	Chức năng
Header.astro	Navigation với dark mode toggle
Footer.astro	Footer
Card.astro	Blog post card
Breadcrumb.astro	Breadcrumb navigation
Pagination.astro	Phân trang bài viết
ShareLinks.astro	Chia sẻ social media
Socials.astro	Social links
BackToTopButton.astro	Nút back to top
Search.astro	Tìm kiếm
Datetime.astro	Hiển thị ngày tháng
Tag.astro	Tag component

1.4. Pages tự động

Astro Paper tự động tạo các trang:

• /posts/ - Danh sách tất cả bài viết (có phân trang)
• /tags/ - Trang tags tổng
• /tags/[tag]/ - Bài viết theo từng tag
• /archives/ - Archive theo tháng/năm
• /rss.xml - RSS feed tự động
• /search - Tìm kiếm
• /og.png - Dynamic OG images

1.5. Utilities

src/utils/

├── getSortedPosts.ts      // Sắp xếp bài viết theo ngày
├── getUniqueTags.ts       // Lấy danh sách tags duy nhất
├── getPostsByTag.ts       // Lọc bài viết theo tag
├── getPostsByGroupCondition.ts  // Group bài viết
├── postFilter.ts          // Lọc draft posts
├── slugify.ts             // Chuyển đổi slug
├── generateOgImages.ts    // Tạo OG images
└── transformers/
    └── fileName.js        // Syntax highlighting

1.6. Integrations và Plugins

astro.config.ts

import tailwindcss from "@tailwindcss/vite";
import sitemap from "@astrojs/sitemap";
import remarkToc from "remark-toc";
import remarkCollapse from "remark-collapse";
import { transformerNotationDiff, transformerNotationHighlight } from "@shikijs/transformers";

export default defineConfig({
  site: "https://domain.com",
  integrations: [
    sitemap(), // Sitemap cho SEO
  ],
  markdown: {
    remarkPlugins: [
      remarkToc,
      [remarkCollapse, { test: "Table of contents" }]
    ],
    shikiConfig: {
      themes: { light: "min-light", dark: "night-owl" },
      defaultColor: false,
    },
  },
  vite: {
    plugins: [tailwindcss()],
  },
});

1.7. Tính năng SEO

• ✅ Dynamic OG images với custom templates
• ✅ Meta tags tự động
• ✅ JSON-LD structured data
• ✅ Sitemap tự động
• ✅ robots.txt
• ✅ RSS feed
• ✅ Dark/Light mode
• ✅ Edit post link

---

Câu 2: Có thể cấu hình Plain Astro để có đầy đủ tính năng như Astro Paper không?

CÓ - Hoàn toàn có thể!

Plain Astro có thể được cấu hình để có tất cả tính năng của Astro Paper bằng cách:

1. Thêm Content Collections với schema
2. Tạo các components cần thiết
3. Cấu hình SEO (meta tags, sitemap, RSS)
4. Xây dựng routing cho blog, tags, archives
5. Thêm utilities để xử lý posts

Kết luận

Khía cạnh	Astro Paper	Plain Astro
Setup	✅ Sẵn sàng	❌ Cần tự cấu hình
Content Collection	✅ Có schema	❌ Không có
SEO	✅ Đầy đủ	❌ Cần thêm
Components	✅ Nhiều	❌ Cần tạo
Routing	✅ Tự động	❌ Cần tạo
Tùy chỉnh	⚠️ Hạn chế	✅ Full control

Khuyến nghị:

• Nếu cần nhanh: Dùng Astro Paper template
• Nếu cần full control: Cấu hình Plain Astro như trên

Tham khảo

• Astro Paper GitHub
• Astro Paper Demo
• Astro Documentation