Một ngày vá blog: CSS, RSS và mấy thứ lặt vặt mà mình suýt bỏ qua
Ghi chép một buổi sửa blog: đoạn văn dính nhau vì một dòng CSS, đổi format ngày, thêm RSS feed, dọn footer. Bốn thay đổi nhỏ mà lẽ ra nên làm từ đầu.
Sáng nay mình mở blog ra đọc lại trên điện thoại, thấy bài viết nhìn như một bức tường chữ. Các đoạn văn dính sát nhau, không có khoảng trống. Đọc trên desktop thì còn tạm, chứ trên Safari iOS thì… ngợp thật sự.
Mình nghĩ chắc do markdown thiếu dòng trống. Kiểm tra lại file .md thì không phải, các đoạn đã tách đúng, trình duyệt cũng render ra từng thẻ <p> riêng biệt rồi. Vấn đề nằm ở CSS.
Đoạn văn dính nhau vì một dòng CSS
Mò vào blog.css, mình thấy dòng này: .prose p { margin:0; }. Ý tưởng ban đầu là reset margin cho gọn, nhưng nó lại đè mất khoảng cách giữa các đoạn. Cái “owl selector” .prose > * + * đáng lẽ lo việc này, nhưng .prose p có độ ưu tiên cao hơn nên thắng.
Giống kiểu bạn thuê hai người dọn nhà, một người bày biện đẹp đẽ, người kia đi sau xếp lại hết về chỗ cũ. Kết quả là nhà vẫn y nguyên.
Sửa bằng một dòng duy nhất: .prose p + p { margin-top: var(--space-6); }. Đoạn nào đứng sau đoạn khác thì cách ra 24px. Đoạn đầu tiên giữ nguyên, heading và code block không bị ảnh hưởng. Gọn.
Đổi định dạng ngày tháng
Tiện tay mình đổi luôn cách hiển thị ngày. Trước là 07/06/2026, kiểu số thuần thì đọc nhanh nhưng dễ nhầm tháng với ngày, nhất là ai quen định dạng Mỹ. Giờ đổi thành 07 tháng 6, 2026, nhìn rõ ràng hơn, không cần đoán.
Chỉ sửa hàm formatDate() trong file hiển thị bài, một chỗ duy nhất.
Thêm RSS feed
Mình kiểm tra lại blog xem đã thân thiện với máy tìm kiếm và AI agent chưa. Sitemap có, JSON-LD có, llms.txt có, meta tags đầy đủ. Nhưng thiếu một thứ khá cơ bản: RSS feed.
Nút RSS ở footer lâu nay đang trỏ vào… sitemap.xml. Ai bấm vào chắc cũng hoang mang ^^
Mình thêm endpoint /rss.xml, chuẩn RSS 2.0 có Atom self-link. Gắn thêm thẻ <link rel="alternate"> vào <head> để trình duyệt và reader tự phát hiện feed. Sửa nút ở trang chủ trỏ đúng /rss.xml. Vậy là xong, giờ ai muốn theo dõi blog bằng Feedly hay bất kỳ RSS reader nào đều được.
Dọn footer
Bỏ link Style Guide khỏi footer. Trang đó hữu ích lúc build, nhưng người đọc bình thường khum cần thấy.
Túm gọn
Bốn thay đổi nhỏ, không cái nào quá 5 dòng code. Nhưng gộp lại thì blog dễ đọc hơn trên mobile, ngày tháng rõ hơn, và cuối cùng cũng có RSS feed tử tế. Mấy thứ lặt vặt kiểu này dễ bị bỏ qua vì “chưa hỏng”, nhưng sửa xong mới thấy lẽ ra nên làm từ đầu.