AntfuStyle Theme — Astro Theme Cho Developer Và Creator • blog.dopana

Khi xây dựng blog cá nhân với Astro, việc chọn theme phù hợp quyết định cả trải nghiệm viết lẫn trải nghiệm đọc. Astro AntfuStyle Theme là một lựa chọn đáng chú ý — lấy cảm hứng từ phong cách tối giản của antfu.me ↗, nhưng mở rộng thành một theme đầy đủ tính năng cho developer và creator.

Tổng Quan#

AntfuStyle là Astro theme mã nguồn mở (MIT) bởi Stephanie Lin, chạy trên Astro 5 với zero UI framework — không React, không Vue, không Svelte. Mọi thứ đều là Astro component thuần, giúp output nhẹ và performance cao.

Tính Năng Nổi Bật#

Infrastructure#

Zero UI Framework — Không runtime JS nặng
SEO-Friendly — Meta tags, OG image động, sitemap
RSS Feed — Tự động sinh
Responsive Images — Tối ưu tự động
Subpath Deployment — Hỗ trợ deploy ở subpath

Content#

Markdown & MDX — Cả hai định dạng
Math Equations — KaTeX render
Callouts — GFM alerts (tip, warning, danger)
Code Highlighting — Shiki với annotations
Remark Directives — Custom directive có sẵn

UX#

Dark Mode — Toggle sáng/tối
View Transitions — Mượt mà khi chuyển trang
Search — Tích hợp sẵn
TOC — Mục lục trên mọi thiết bị
Tag Filtering — Lọc bài viết theo tag
Image Zoom — Click phóng to ảnh
Giscus Comments — Bình luận qua GitHub Discussions
Loading Progress — Thanh tiến trình khi load trang

Tính Năng Đặc Biệt#

Animated Background: Theme có 4 hiệu ứng nền động — plum, rose, dot, particle — tuỳ chỉnh qua config.

GitHub Integration: Có thể showcase GitHub releases và pull requests trực tiếp trên blog.

Gallery: Tính năng tạo thư viện ảnh cá nhân.

Short Notes: Viết ghi chú nhanh, không cần bài viết đầy đủ.

Cài Đặt#

Deploy một click qua Netlify hoặc Vercel:

↗

Hoặc clone repo:

git clone https://github.com/lin-stephanie/astro-antfustyle-theme
cd astro-antfustyle-theme
pnpm install
pnpm dev

bash

So Sánh Với astro-pure#

Blog này dùng astro-pure nên có vài điểm so sánh:

Tiêu chí	AntfuStyle	astro-pure (blog này)
UI Framework	Zero	Zero
Animated BG	4 hiệu ứng	Không
Gallery	Có	Không
GitHub Releases/PR	Có	Không
Short Notes	Có	Không
Search	Pagefind	Pagefind
Comments	Giscus	Waline
Deploy	Vercel/Netlify	Vercel/Cloudflare

AntfuStyle phù hợp nếu bạn muốn blog cá nhân với nhiều tính năng creative — gallery, notes, GitHub showcase — trong khi astro-pure thiên về blog thuần với cấu trúc đơn giản.

Cấu Trúc Thư Mục#

src/
├── components/    # UI components
├── content/       # Blog posts, pages, gallery
├── layouts/       # Page layouts
├── pages/         # Route pages
├── plugins/       # Astro plugins
├── styles/        # Global styles
└── utils/         # Helper functions

plaintext

Tự Document#

Điểm thú vị: live demo ↗ của theme tự nó là tài liệu hướng dẫn. Mỗi tính năng đều có bài viết chi tiết — từ cài đặt, cấu trúc, config cho đến hướng dẫn viết content.

Kết Luận#

AntfuStyle là theme Astro 5 giàu tính năng cho ai muốn blog cá nhân với phong cách tối giản nhưng không thiếu công cụ. Zero JS framework, đầy đủ SEO, search, comments, gallery, và animated background — tất cả trong một gói mã nguồn mở.

AntfuStyle Theme — Astro Theme Cho Developer Và Creator