Chào mừng bạn đến với bài viết trình diễn tương tác trên blog của chúng tôi! Trong các nền tảng SaaS hiện đại, blog không chỉ là nơi chứa các khối văn bản tĩnh. Nó là một cỗ máy mạnh mẽ để thúc đẩy chuyển đổi, thu thập khách hàng tiềm năng (leads) và tương tác học tập.
Hôm nay, chúng tôi sẽ giới thiệu thực tế sức mạnh của các Custom MDX Components mới được phát triển.
1. Notion-Style Callouts (Khối hộp chú thích)
Cần nhấn mạnh một ý quan trọng hoặc cảnh báo người đọc? Thay vì viết chữ thường, hãy dùng component <Callout> được thiết kế đẹp mắt của chúng tôi. Nó hỗ trợ 3 mức độ cảnh báo: info, warning, và error.
Mẹo nhỏ: Đồng bộ giao diện cực mượt
Khối hộp Callout của chúng tôi tự động kế thừa màu sắc hệ thống và hiển thị sắc nét trên cả Chế độ sáng (Light) lẫn Tối (Dark Mode)!
Đây là cảnh báo mức độ Warning:
Nhắc nhở bảo mật
Hãy cấu hình chính xác Row Level Security (RLS) của Supabase trước khi đẩy dự án lên môi trường production.
Và đây là lỗi nghiêm trọng cần lưu tâm:
Cảnh báo quan trọng
Tuyệt đối không chạy script xoá cơ sở dữ liệu trên môi trường Production!
2. Hộp Thu Thập Email Khách Hàng (Lead Capture)
Thu thập email độc giả là cốt lõi cho mọi Founder. Thay vì ép độc giả chuyển trang, bạn có thể nhúng ngay một mẫu đăng ký bản tin cực sang trọng ngay giữa bài viết.
Subscribe to our newsletter
Get the latest updates, articles, and resources straight to your inbox.
3. Thẻ Nhúng Bán Hàng Trực Tiếp (Pricing Card)
Muốn thuyết phục độc giả mua hàng ngay khi họ vừa đọc xong lợi ích? Bạn có thể nhúng luôn một chiếc Thẻ giá (Pricing Card) cực kỳ xịn xò vào bài viết!
Component <PricingCard> được tích hợp trực tiếp với Lemon Squeezy và tự động kiểm tra trạng thái thanh toán hiện tại của User để đổi chữ trên nút bấm.
4. Tự Động Nén và Tối Ưu Hình Ảnh
Mọi bức ảnh dạng Markdown tiêu chuẩn sẽ tự động được biên dịch sang component Image của Next.js, ngăn ngừa Layout Shift và tối ưu dung lượng tải:
Hình ảnh này được tối ưu hóa tự động hoàn toàn bởi Custom MDX Image component.
Kết luận
Với các custom component MDX này, bạn có thể dễ dàng viết những bài blog cực kỳ tương tác, gia tăng leads và tăng doanh thu bán hàng mượt mà. Chúc các bạn code vui vẻ!