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">
&copy; 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>

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. 

Post a Comment

Mới hơn Cũ hơn