2.1 KiB
Workspace Rules
Creating New Thymeleaf Pages
When creating or scaffolding a new Thymeleaf template page in this project, you MUST use the layout:decorate mechanism to inherit the common layout, and you MUST pass the bodyClass variable to maintain consistent styling with the homepage.
Use the following exact structure as a template:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{fragments/layout(bodyClass='umass-platform-homepage path-frontpage page-node-type-homepage homepage transparent-header')}">
<head>
<title>Tiêu đề trang</title>
</head>
<body>
<div layout:fragment="content">
<!-- Content Top Banner -->
<div class="content-top">
<!-- Banner content here -->
</div>
<!-- Main Content Area -->
<div class="main-content-area">
<!-- Specific page content here -->
</div>
</div>
</body>
</html>
Dynamic Theme Component Inclusion
When writing or modifying Thymeleaf templates for the public frontend, NEVER hardcode paths for common layout components (such as header or footer) to a specific theme (e.g., themes/umass/header) or to the default fallback (e.g., fragments/footer) unless explicitly building an admin/manage page.
Instead, ALWAYS use the activeTheme variable to dynamically load the active theme's component.
Correct Usage:
<header th:replace="~{themes/__${activeTheme}__/header :: header}"></header>
<footer th:replace="~{themes/__${activeTheme}__/footer :: footer}"></footer>
Incorrect Usage:
<div th:replace="~{themes/umass/header}"></div>
<footer th:replace="~{fragments/footer :: footer}"></footer>
Admin Panel UI Pattern: Lists
When building admin panels to manage lists of items, DO NOT use inline <input> fields for all rows by default. Instead, use a read-only view for the list items, providing explicit "Edit" and "Delete" buttons for each row. Clicking "Edit" should open a modal or expand the row to allow editing the fields.