Hướng dẫn sử dụng thuộc tính ezy:msrc và ezy:mhref
Back to ezyarticleezy:mhref và ezy:msrc là hai attribute mở rộng của EzyArticle dùng trong template Thymeleaf để tự động gắn version cho file media, giúp trình duyệt tải lại CSS hoặc JavaScript mới sau khi file được cập nhật.Khi nào nên dùng
Dùng
ezy:mhref cho thẻ <link> trỏ tới file CSS trong thư mục media:<link rel="stylesheet" ezy:mhref="/api/v1/media/style.css" />
Dùng
ezy:msrc cho thẻ <script> trỏ tới file JavaScript trong thư mục media:<script ezy:msrc="/api/v1/media/app.js"></script>
Khi template được render, EzyArticle sẽ chuyển các attribute này thành
href hoặc src thật, đồng thời tự động thêm tham số version:<link rel="stylesheet" href="/api/v1/media/style.css?v=1736483930" /> <script src="/api/v1/media/app.js?v=1736483930"></script>
Vì sao cần version cho media
Trình duyệt thường cache CSS và JavaScript để tăng tốc độ tải trang. Điều này tốt cho hiệu năng, nhưng có thể gây ra vấn đề sau khi bạn cập nhật file.
Ví dụ, bạn đã sửa
/api/v1/media/style.css, nhưng người dùng vẫn đang dùng bản cũ trong cache. Khi URL được thêm ?v=<latest_update_time>, trình duyệt sẽ xem đây là một URL mới và tải lại file mới nhất.Cách hoạt động
Khi gặp
ezy:mhref hoặc ezy:msrc, EzyArticle sẽ:- Lấy giá trị URL từ attribute.
- Xác định tên media từ phần cuối URL.
- Tìm thời gian cập nhật mới nhất của media đó.
- Gắn thêm
?v=<version>vào URL. - Xuất ra attribute HTML chuẩn là
hrefhoặcsrc.
Ví dụ:
<link rel="stylesheet" ezy:mhref="/api/v1/media/theme.css" />
Sau khi render:
<link rel="stylesheet" href="/api/v1/media/theme.css?v=1736483930" />
Sử dụng với Thymeleaf expression
Bạn có thể truyền giá trị động bằng Thymeleaf expression:
<link rel="stylesheet" ezy:mhref="" /> <script ezy:msrc=""></script>
Expression cần trả về một chuỗi URL hợp lệ.
Fallback version
Nếu EzyArticle không tìm thấy thời gian cập nhật của media, hệ thống vẫn sẽ tự gắn version dự phòng. Version này có thể lấy từ biến version của view hoặc từ thời điểm server khởi động.
Điều này đảm bảo URL luôn có dạng versioned, ngay cả khi media chưa có metadata cập nhật.
Lưu ý
Không nên tự thêm query string vào URL khi dùng
ezy:mhref hoặc ezy:msrc.Nên dùng:
<link rel="stylesheet" ezy:mhref="/api/v1/media/style.css" />
Không nên dùng:
<link rel="stylesheet" ezy:mhref="/api/v1/media/style.css?theme=dark" />
Vì hệ thống sẽ tự gắn thêm
?v=... vào cuối URL.Tên media nên dùng chữ cái tiếng Anh, số, dấu chấm, gạch ngang hoặc gạch dưới, ví dụ:
style.css app.min.js home-page.css
Tóm tắt
Dùng
ezy:mhref thay cho href khi link tới CSS trong media:<link rel="stylesheet" ezy:mhref="/api/v1/media/style.css" />
Dùng
ezy:msrc thay cho src khi link tới JavaScript trong media:<script ezy:msrc="/api/v1/media/app.js"></script>
Hai attribute này giúp EzyArticle tự động thêm version theo thời gian cập nhật media, hạn chế lỗi người dùng vẫn tải CSS hoặc JavaScript cũ từ cache.