Một bài viết đẹp không cần kéo theo cả ứng dụng React. Bố cục, hình ảnh, nội dung và liên kết có thể được xuất trực tiếp từ WordPress; hiệu ứng chỉ tăng cường khi thực sự cần.
Từ giao diện đẹp đến hệ thống dùng lại được
Trang tham khảo dùng một nhịp đọc rất rõ: tiêu đề lớn, ảnh chủ đạo, cột nội dung rộng và sidebar gọn. Trong Bricks, những phần này có thể ghép từ Section, Container, Image, Post Content và Post TOC. Lớp BEM chung giữ kiểu dáng nhất quán khi thêm bài mới.
- Nội dung trước: tiêu đề, đoạn văn và liên kết nằm sẵn trong HTML.
- Thiết kế dùng lại: sửa global class một lần để cập nhật mọi bài.
- Hiệu ứng có chọn lọc: chỉ tải JavaScript cho tương tác không thể làm bằng CSS.
Bricks native trước, component sau
Box, card, CTA và danh sách cơ bản nên bắt đầu bằng element có sẵn. Khi một cụm lặp lại nhiều nơi, chuyển cụm đó thành Bricks component với Properties cho nội dung và Variants cho trạng thái thiết kế. Custom PHP element chỉ cần thiết nếu native control không biểu diễn được dữ liệu hoặc hành vi.
Giữ phần nội dung trong HTML server; dùng JavaScript để bổ sung trải nghiệm, không dùng nó làm nguồn nội dung duy nhất.
Một bài viết, nhiều kích thước màn hình
Ở desktop, sidebar hỗ trợ điều hướng nhưng không giành sự chú ý khỏi bài viết. Ở mobile, nội dung trở về một cột, ảnh có tỷ lệ rõ ràng và mục lục được đặt sau phần mở đầu. Các thành phần trang trí không nên gây dịch chuyển bố cục.
Bricks native → BEM global classes → component dùng lại → JS khi cầnKết luận
Template thử nghiệm này lấy cảm hứng từ cấu trúc biên tập của Magic UI Blog và được dựng cho WeGreat bằng Bricks native. Bài viết là nội dung mẫu riêng để kiểm tra cách template hiển thị, không sao chép bài gốc.
