1. Đặt tên file bài viết theo thứ tự
Ví dụ:
posts/
├── 01-gioi-thieu.html
├── 02-dark-mode.html
├── 03-code-highlight.html
├── 04-responsive.html
Tên file hoặc số đầu tiên sẽ giúp bạn biết thứ tự dễ dàng. Càng gọn, càng dễ làm.
2. Thêm block điều hướng cuối mỗi bài
Chèn thủ công phần này vào mỗi bài viết:
<nav class="post-nav">
<a class="prev" href="02-dark-mode.html">← Bài trước</a>
<a class="next" href="04-responsive.html">Bài tiếp →</a>
</nav>
Tuỳ bài mà bạn gắn đúng `prev/next`. Nếu là bài đầu tiên, chỉ để link “Next”. Nếu là bài cuối, chỉ để link “Previous”.
3. CSS đơn giản cho block điều hướng
.post-nav {
display: flex;
justify-content: space-between;
margin-top: 2rem;
font-size: 0.95rem;
}
.post-nav a {
text-decoration: none;
color: #0066cc;
}
4. Tùy chọn: tạo component dùng lại (nếu dùng layout engine)
Nếu bạn dùng Eleventy, có thể tạo macro/layout như:
{% include "nav.njk", prev="02-dark-mode.html", next="04-responsive.html" %}
5. Giải pháp thay thế (nâng cao – có JS)
Nếu bạn muốn “auto” mà vẫn HTML thuần, có thể dùng JS nhẹ lấy từ danh sách bài viết (JSON/static array), xác định vị trí và render prev/next – nhưng không khuyến khích nếu bạn theo hướng tối giản tuyệt đối.
Lý do nên làm tay?
- Không bị ràng buộc bởi framework / logic phức tạp
- Kiểm soát link chính xác, dễ SEO (anchor text rõ)
- Không lo JS bị block, lỗi trình duyệt cũ
Blog tĩnh không có nghĩa là “cứng nhắc”. Chỉ cần tổ chức hợp lý, bạn vẫn có thể tạo các chức năng “có vẻ động” như hệ thống điều hướng bài – mà không cần động gì cả 😄
Chúc bạn tạo được trải nghiệm mượt mà – liền mạch – dẫn người đọc xuyên suốt qua từng bài viết!
Bình luận