Mục tiêu

  • Ghép dữ liệu động cho phần giới thiệu

1. Cập nhật HomeController

Chúng ta sẽ thay đổi HomeController để bổ sung thêm page fragment là một trong những tính năng quan trọng của EzyArticle plugin. Mã nguồn của HomeController sẽ thay đổi như sau: 

@Setter
@Controller
public class HomeController {

    @EzyAutoBind
    private WebPageFragmentManager pageFragmentManager;

    @EzyAutoBind
    private WebLanguageControllerService languageControllerService;

    @EzyAutoBind
    private WebSettingService settingService;

    @EzyAutoBind
    private WebPostControllerService postControllerService;

    @EzyAutoBind
    private WebTermControllerService termControllerService;

    @EzyAutoBind
    private WebCommonValidator commonValidator;

    @DoGet("/")
    public View home(
        HttpServletRequest request,
        @RequestParam(value = "sortOrder") String sortOrder,
        @RequestParam(value = "nextPageToken") String nextPageToken,
        @RequestParam(value = "prevPageToken") String prevPageToken,
        @RequestParam(value = "lastPage") boolean lastPage,
        @RequestParam(value = "limit", defaultValue = "12") int limit
    ) {
        commonValidator.validatePageSize(limit);
        DefaultPostFilter filter = DefaultPostFilter
            .builder()
            .postType(PostType.BLOG.toString())
            .postStatus(PostStatus.PUBLISHED.toString())
            .build();
        String language = languageControllerService
            .getLanguageCodeOrDefault(request);
        PaginationModel<WebPostItemResponse> pagination = postControllerService
            .getPostItemPagination(
                filter,
                language,
                sortOrder,
                nextPageToken,
                prevPageToken,
                lastPage,
                limit
            );
        List<WebTermResponse> topCategories = termControllerService
            .getActivatedTermsByTypeOrderByDisplayOrderDesc(
                TermType.CATEGORY.toString(),
                5
            );
        List<WebTermResponse> topTags = termControllerService
            .getActivatedTermsByTypeOrderByDisplayOrderDesc(
                TermType.TAG.toString(),
                50
            );
        return View.builder()
            .template("home")
            .addVariable("pagination", pagination)
            .addVariable("topCategories", topCategories)
            .addVariable("topTags", topTags)
            .addVariable(
                "headingFragments",
                pageFragmentManager.getPageFragmentMap(
                    "main_page_heading",
                    language
                )
            )
            .addVariable(
                "webBannerImageUrl",
                trimOrNull(
                    settingService.getTextValue(
                        SETTING_NAME_BANNER_IMAGE_URL
                    )
                )
            )
            .addVariable("pageTitle", "home")
            .build();
    }
}

Ở đây chúng ta đã bổ sung thêm headingFragments và lấy dữ liệu động từ phần trang main_page_heading.

  1. Cập nhật phần trang main_page_heading

Bạn có thể truy cập vào [http://localhost:9090/ezysupport/settings/web] và kéo xuống phần Tiêu đề trang chính và thay đổi, ví dụ:

Screenshot 2025-10-11 at 21.19.26.png

Hoặc bạn cũng có thể truy cập vào menu Các Phần Trang của EzyArticle và chọn Mô tả của tiêu đều trang chính để thay đổi.

  1. Cập nhật home template

Chúng ta có thể cập nhật mã nguồn cho phần giới thiệu ở home.html như sau: 

<div class="hero">
    <div class="container">
        <div class="left">
            <h1 class="h1">
                <th:block th:if="${headingFragments.get('description').title != 'description'}"
                          th:utext="${headingFragments.get('description').title}">
                </th:block>
            </h1>
            <p class="h3">
                <th:block th:if="${headingFragments.get('description').content != 'description'}"
                          th:utext="${headingFragments.get('description').content}">
                </th:block>
            </p>
            <div class="btn-group">
                <a href="/contact-us" class="btn btn-primary">[[#{contact}]]</a>
                <a href="/about-us" class="btn btn-secondary">[[#{about_me}]]</a>
            </div>
        </div>
        <div class="right">
            <div class="pattern-bg"></div>
            <div class="img-box">
                <img th:src="${!#strings.isEmpty(webBannerImageUrl) ? webBannerImageUrl : '/images/hero.png'}"
                     class="hero-img" th:alt="#{banner}"/>
                <div class="shape shape-1"></div>
                <div class="shape shape-2"></div>
            </div>

        </div>
    </div>
</div>

Trở lại và refresh trình duyệt, kết quả chúng ta nhận được có thể như sau:

Screenshot 2025-10-11 at 21.23.54.png

Tài liệu tham khảo