Thực hiện chức năng chuyển hướng bài viết ngẫu nhiên bằng cách sử dụng template trong Halo CMS
HowieHz
Ngày 30 tháng 3 năm 2025
Chuyên mục: Khám phá công nghệ > Kỹ thuật frontend > Engine template
Phần mềm: HaloCMS
Số lượt xem: 133
Bài viết này sẽ trình bày một ví dụ ứng dụng từ bài “Thymeleaf chi tiết về việc tạo và định dạng số ngẫu nhiên (số nguyên, số thập phân, số thực)”.
1
2
3
4
5
6
|
<a
th:with="allPostList=${postFinder.listAll()},
randomIndex=${T(java.lang.Math).floor(T(java.lang.Math).random()*#lists.size(allPostList))},
postPermalink=${allPostList[randomIndex].status.permalink}"
th:href="${postPermalink}"
>Đọc bài viết ngẫu nhiên</a>
|
Kết hợp với JavaScript
Chèn đoạn mã sau vào trang web của bạn. Sau đó, chỉ cần gọi hàm toRandomPost() để chuyển đến bài viết ngẫu nhiên.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<script
th:inline="javascript"
th:with="allPostList=${postFinder.listAll()},
randomIndex=${T(java.lang.Math).floor(T(java.lang.Math).random()*#lists.size(allPostList))},
postPermalink=${allPostList[randomIndex].status.permalink}"
>
function toRandomPost() {
let permalink = /*[[${postPermalink}]]*/ "/";
// Chọn bất kỳ phương thức nào để chuyển hướng
// window.open(permalink);
// pjax.loadUrl(permalink);
window.location.href = permalink;
}
</script>
|
Bạn cũng có thể bỏ qua các biến trung gian nếu muốn:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<script
th:inline="javascript"
th:with="allPostList=${postFinder.listAll()},
randomIndex=${T(java.lang.Math).floor(T(java.lang.Math).random()*#lists.size(allPostList))},
postPermalink=${allPostList[randomIndex].status.permalink}"
>
function toRandomPost() {
// Chọn bất kỳ phương thức nào để chuyển hướng
// window.location.href = /*[[${postPermalink}]]*/ "/";
// pjax.loadUrl(/*[[${postPermalink}]]*/ "/");
window.open(/*[[${postPermalink}]]*/ "/");
}
</script>
|
Mở rộng tính năng
Trong đoạn mã trên, allPostList[randomIndex] trả về một biến kiểu ListedPostVo. Nhờ đó, bạn có thể truy cập thêm nhiều thông tin liên quan đến bài viết như tiêu đề, thời gian tạo, thời gian xuất bản, trạng thái nổi bật hay nội dung tóm tắt, v.v. Dưới đây là hai ví dụ minh họa cách lấy tiêu đề bài viết.
1
2
3
4
5
6
7
8
|
<a
th:with="allPostList=${postFinder.listAll()},
randomIndex=${T(java.lang.Math).floor(T(java.lang.Math).random()*#lists.size(allPostList))},
postPermalink=${allPostList[randomIndex].status.permalink},
postTitle=${allPostList[randomIndex].spec.title}"
th:href="${postPermalink}"
th:text="${postTitle}"
></a>
|
Với JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<script
th:inline="javascript"
th:with="allPostList=${postFinder.listAll()},
randomIndex=${T(java.lang.Math).floor(T(java.lang.Math).random()*#lists.size(allPostList))},
postPermalink=${allPostList[randomIndex].status.permalink},
postTitle=${allPostList[randomIndex].spec.title}"
>
<!--/* Mẹo nhỏ: Các chú thích được viết tại đây sẽ bị loại bỏ sau khi render template, giúp giảm kích thước trang */-->
function toRandomPost() {
// <!--/* Hiển thị hộp thoại với tiêu đề bài viết */-->
alert(/*[[${postTitle}]]*/ "");
// <!--/* Chọn bất kỳ phương thức nào để mở bài viết
// window.open(/*[[${postPermalink}]]*/ "/");
// pjax.loadUrl(/*[[${postPermalink}]]*/ "/");
window.location.href = /*[[${postPermalink}]]*/ "/";
}
</script>
|
Ví dụ thực tế
- feat: Hỗ trợ chuyển hướng bài viết ngẫu nhiên bởi HowieHz · Pull Request #173 · HowieHz/halo-theme-higan-hz
- feat: Mở rộng phạm vi chuyển hướng bài viết ngẫu nhiên cho tất cả bài viết bởi HowieHz · Pull Request #866 · chengzhongxue/halo-theme-hao
Hy vọng bài viết này sẽ giúp bạn hiểu rõ hơn về cách áp dụng template engine trong các dự án thực tế!