Mục tiêu

Trong bài trước, chúng ta đã thực hiện việc ghép dữ liệu cho chi tiết bài blog.

Trong bài này, bạn sẽ học cách ghép dữ liệu cho logo và thanh điều hướng nằm ở phần đầu trang của theme blog trên EzyPlatform.

1. Liên kết với EzySupport plugin

Để ghép dữ liệu động cho logo và header, bạn sẽ cần liên kết theme Personal với EzySupport plugin bằng cách chạy lệnh sau trong terminal:

ezy.sh link EzySupport

Sau khi liên kết, EzyPlatform sẽ tự động nạp các thư viện, tài nguyên và gói được quét vào các file pom và Startup tương ứng.

2. Tạo lớp Decorator cho phần hiển thị

Tiếp theo, chúng ta sẽ cần tạo lớp WebPersonalViewDecorator trong gói org.youngmonkeys.personal.web.view của module personal-web-plugin với nội dung như sau:

@EzySingleton
@AllArgsConstructor
public class WebPersonalViewDecorator extends WebViewDecorator {

    private final WebSettingService settingService;

    @SuppressWarnings("MethodLength")
    @Override
    public void decorate(HttpServletRequest request, View view) {
        super.decorate(request, view);
        view.setVariable(
            "requestURI",
            request.getRequestURI()
        );
        view.setVariable(
            "siteLogoWithoutTextUrl",
            trimOrNull(
                settingService.getTextValue(
                    SETTING_NAME_LOGO_WITHOUT_TEXT_URL
                )
            )
        );
    }

    @Override
    protected boolean includeWebLanguages() {
        return true;
    }
}

Mục tiêu của lớp này là cung cấp các biến dùng chung cho toàn bộ các view ví dụ như requestURI, siteLogoWithoutTextUrl.

3. Cập nhật phần logo trong view

Tiếp theo chúng ta có thể cập nhật file header.html để sử dụng biến siteLogoUrl thay cho logo mặc định:

<img th:src="${siteLogoUrl != null ? siteLogoUrl : '/images/logo-light.svg'}"
           alt="Log" width="150" class="logo-light">
<img th:src="${siteLogoWithoutTextUrl != null ? siteLogoWithoutTextUrl : '/images/logo-dark.svg'}"
          alt="Logo" width="150" class="logo-dark">

4. Cập nhật thanh điều hướng

Vì EzySupport có cung cấp sẵn các controller cho các trang như /about-us, /contact-us nên chúng ta có thể dùng luôn các trang này và cập nhật url cho thanh điều hướng bằng cách cập nhật mã nguồn trong file header.html như sau:

<div class="flex-wrapper">
    <ul class="desktop-nav">
        <li>
            <a href="/" class="nav-link"
               th:classappend="${requestURI.length <= 1 ? 'active' : ''}">
                [[#{home}]]
            </a>
        </li>
        <li>
            <a href="/about-us" class="nav-link"
               th:classappend="${requestURI.startsWith('/about-us') ? 'active' : ''}">
                [[#{about_me}]]
            </a>
        </li>
        <li>
            <a href="/contact-us" class="nav-link"
               th:classappend="${requestURI.startsWith('/contact-us') ? 'active' : ''}">
                [[#{contact}]]
            </a>
        </li>
    </ul>
    <button class="theme-btn theme-btn-desktop light">
        <ion-icon name="moon" class="moon"></ion-icon>
        <ion-icon name="sunny" class="sun"></ion-icon>
    </button>
</div>

5. Cập nhật logo từ admin

Bạn có thể truy cập vào cài đặt web của EzySupport tại http://localhost:9090/ezysupport/settings/web và cập nhật logo, ví dụ:

Quay trở lại trình duyệt và refresh lại localhost:8080 chúng ta sẽ nhận được:

Đường dẫn tham khảo

• Bài trước.
• Dự án kết quả.