Hướng dẫn Cấu hình Menu và Đa ngôn ngữ cho Website bằng EzyPlatform

Hướng dẫn Cấu hình Menu cho Website bằng EzyPlatform

Bước 1: Tạo Class Service

Đầu tiên, bạn cần tạo một class Service để gọi đến WebMenuItemService và WebMenuRepository nhằm lấy dữ liệu menu từ Admin. Class này sẽ chứa các thông tin cần thiết như sau:

private final WebMenuItemService menuItemService;
private final WebMenuRepository menuRepository;

public List<MenuItemModel> getMainMenuItems() {
    // Tìm kiếm menu bằng tên
    Menu menu = menuRepository.findByField("name", "main");
    return menuItemService.getMenuItemsByMenuId(menu.getId());
}

Bước 2: Gửi Dữ liệu đến Giao diện

Sau khi đã tạo class Service, bước tiếp theo là gửi thông tin đến View trong Controller. Trong HomeController, bạn sẽ thêm thuộc tính vào View.builder() như sau:

.addVariable(
    "mainMenuItems",
    [tên Class Service vừa tạo].getMainMenuItems()
)

Ví dụ về HomeController:

@Controller
@AllArgsConstructor
public class HomeController {
    private final WebBlogMenuItemService blogMenuItemService;

    @DoGet("/")
    public View home() {
        return View.builder()
            .template("home")
            .addVariable(
                "mainMenuItems",
                blogMenuItemService.getMainMenuItems()
            )
            .addVariable(VIEW_VARIABLE_PAGE_TITLE, "home")
            .build();
    }
}

Bước 3: Tạo Menu trên Giao diện

Trong giao diện, bạn sử dụng Thymeleaf để lặp qua các menuItems:

<li th:each="mainMenuItem : ${mainMenuItems}" >
    [[${mainMenuItem.linkText}]]
</li>

Trong MenuItemModel, bạn sẽ có các thuộc tính sau:

private long id;
private String linkText;
private String linkType;
private String customLink;
private long linkId;
private int level;
private long orderValue;
private long parentId;

Bước 4: Khởi tạo Menu trong Admin

Sau khi hoàn tất các bước trên, bạn cần chạy server admin và thực hiện khởi tạo menu:

1. Chọn menu.
2. Đặt tên cho menu.
3. Lưu thông tin menu.

Sau khi tạo xong, bạn sẽ thêm các thông tin cho menu:

1. Chọn Customize Links.
2. Chọn Add New và điền thông tin bao gồm tên và URL.
3. Khi thông tin đã được thêm, chọn để thêm vào menu.

Sau khi hoàn tất tất cả các thao tác trên, chạy lại chương trình để kiểm tra, thông tin menu sẽ xuất hiện.

Hướng dẫn Cấu hình Web Đa ngôn ngữ với EzyPlatform

Bước 1: Tạo Class WebViewDecorator

Trong folder [project_name]_theme/src/main/java/view, bạn tạo Class Web[name]ViewDecorator kế thừa từ WebViewDecorator. Ví dụ:

@EzySingleton
public class WebBlogViewDecorator extends WebViewDecorator {}

Bước 2: Tạo Resource Bundle cho ngôn ngữ

Trong folder [project_name]_theme/src/main/resources/messages, tạo file message[ngôn ngữ].properties và điền các thông tin ngôn ngữ cần chuyển đổi. Ví dụ trong file message_vi.properties có thể có:

home= Trang chủ
posts= Danh sách bài viết
contact_me = Thông tin liên hệ
about_me = Giới thiệu

Bước 3: Chỉnh sửa Lỗi Hiển Thị Tiếng Việt

Để sửa lỗi hiển thị tiếng Việt, mở menu file, vào Settings, tìm kiếm File Encoding và chọn Transparent native-to-ascii conversion.

Với các bước hướng dẫn chi tiết trên, bạn có thể dễ dàng cấu hình menu và đa ngôn ngữ cho trang web của mình bằng EzyPlatform.
source: viblo