Cấu trúc Một Trang Web Trong Dự Án EzyPlatform
Một trang web trong dự án EzyPlatform bao gồm nhiều thành phần (fragments) được kết hợp lại, tạo thành một trang web hoàn chỉnh. Khái niệm này giúp ứng dụng trở nên modular, dễ tái sử dụng và bảo trì hơn. Cấu trúc cơ bản của một trang web đã được xác định trong tệp page.html của dự án, với ba thành phần chính: header, content, và footer.
Khái niệm Fragment:
Fragment là tên gọi của một mảnh thành phần trong trang web. Ví dụ, header là một thành phần chính và có thể được gọi là một fragment. Để sử dụng một fragment trong trang web, chúng ta cần thêm fragment đó vào cấu trúc đã định nghĩa sẵn của trang web.
Hướng Dẫn Tạo Fragment Và Trang Web Mới
1. Tạo Một Fragment
Để tạo một fragment, hãy thực hiện theo các bước sau:
- Tạo một tệp HTML mới, trong đó sử dụng thuộc tính để định nghĩa thành phần đó là một fragment. Ví dụ: .
- Trang web được tạo ra sẽ có cấu trúc khung giống như trang page.html, mà bạn đã định nghĩa bằng cú pháp: layout:decorate="~{ezytheme}". Điều này giúp đảm bảo rằng trang web mới sẽ có cấu trúc giống với trang mẫu.
- Để sử dụng các thành phần (fragment) đã được xác định, bạn cần thêm chúng vào ba phần của trang page.html (header, content, footer) bằng cú pháp: <div th:replace="~{<đường_dẫn_đến_fragment> :: <tên_fragment>}"
2. Tạo Một Trang Web Mới
Khi tạo mới một trang web, hãy thêm cú pháp: layout:decorate="~{ezytheme}" vào thẻ HTML tương ứng, tương tự như cách làm trong trang home.html đã có sẵn trong dự án.
Cách Thêm Tệp SCSS Mới Vào Dự Án
Để thêm tệp SCSS:
- Trong thư mục view → scss → components, tạo một tệp SCSS mới (ví dụ: _main-navbar.scss).
- Sử dụng ký tự "_" trước tên tệp để đảm bảo rằng không tạo ra các tệp CSS không cần thiết.
- Trong thư mục view → scss → vendor → main.scss, thêm đường dẫn đến tệp SCSS vừa tạo. Ví dụ: @import “components/_main-navbar“.
Hướng Dẫn Sử Dụng Nhiều Ngôn Ngữ Trong Dự Án
Các Bước Thực Hiện:
- Truy cập trang Admin → settings → websites và tạo ngôn ngữ mới.
- Trong thư mục: …/resources/message/Resource Bundle ‘messages’, tạo một tệp properties cho ngôn ngữ mới: messages_
.properties. - Mỗi lần chỉnh sửa tệp message, cần phải khởi động lại ứng dụng để trình duyệt nhận diện được các thay đổi.
Tóm Tắt
Phần hướng dẫn này đã giới thiệu về cách hoạt động của fragment trong dự án EzyPlatform, cách tạo fragment mới, cách thêm tệp SCSS, và cách sử dụng nhiều ngôn ngữ trong dự án. Những thông tin này sẽ hỗ trợ bạn trong việc xây dựng và quản lý website hiệu quả hơn.
source: viblo
