PageLayout
Page Layout (bố cục trang) đề cập đến việc xắp xếp văn bản, hình
ảnh và các đối tượng khác trên một trang, và nó là vấn đề được quan tâm lớn
nhất của những người thiết kế website.
Một website có thể có nhiều
trang, nhưng các trang có một cấu trúc tương tự nhau. Chẳng hạn, dưới đây là
một cấu trúc đơn giản:
Làm thế nào để tạo thành một trang
như trên? Có phải câu trả lời là sử dụng Fragment?
Fragment là gì?
Trong các template, ta thường có nhu cầu sử dụng các
phần tử từ những template khác, chẳng hạn như các footer, header, menu v.v. Để
làm được điều này, Thymeleaf cần chúng ta định nghĩa ra các phần đó và ta gọi
các phần định nghĩa đó là Fragment.
Giả sử chúng ta muốn thêm bản quyền của tác giả vào
footer trong tất cả các trang trên website, do vậy chúng ta cần tạo tệp
/WEB-INF/templates/footer.html chứa khối mã này:
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
© 2011 The Good Thymes Virtual Grocery
</div>
Khối lệnh trên định nghĩa một fragment tên là copy,
chúng ta có thể sử dụng nó ở trang home bằng cách sử dụng thuộc tính th:insert
hoặc th:replace như sau:
<body>
...
<div th:insert="footer :: copy"></div>
</body>
...
<div th:insert="footer :: copy"></div>
</body>
Một Fragment là một phần trong một Template.
Thymeleaf cho phép bạn import một fragment của một template nào đó, để làm được
việc này bạn cần phải mô tả vị trí của fragment bạn muốn import. Có 3 cách để
làm việc này:
Cách 1: "~{/path-to-template/template-name::selector}" chèn vào một Fragment có tên là selector
được định nghĩa trong template có tên là template-name thuộc đường dẫn là
path-to-template.
Cách 2: ~{::selector}" hoặc "~{this::selector}"
chèn một fragment từ cùng một
template. Nếu không tìm thấy template thì sẽ gọi đến template khác cho đến khi
tìm thấy selector trùng khớp.
Cách 3: "~{templatename}" chèn vào toàn bộ template có tên là
templatename. Tên của template sử dụng thuộc tính th:insert hoặc th:replate sẽ
được nhận biết bằng template resolver.
Đăng nhận xét