0
0
Lập trình
Admin Team
Admin Teamtechmely

Hướng dẫn sử dụng hình ảnh bài viết nổi bật để tạo Slider cho Blog xây dựng

Đăng vào 2 tháng trước

• 5 phút đọc

Chủ đề:

@ezyplatform

Hướng dẫn sử dụng hình ảnh bài viết nổi bật để tạo Slider cho Blog xây dựng

Sử dụng các slider trên trang web là một phương pháp hiệu quả để làm nổi bật các bài viết hot. Bài viết này sẽ hướng dẫn bạn từng bước về cách sử dụng hình ảnh từ các bài viết nổi bật để tạo hình ảnh cho banner slider trong dự án blog của bạn.

Các bước cài đặt

Bước 1: Tạo Interface WebBlogPostRepository

Tạo một interface WebBlogPostRepository để truy vấn dữ liệu bài viết theo id và sắp xếp theo thứ tự ưu tiên giảm dần. Dưới đây là mẫu mã:

java Copy
@EzyRepository
public interface WebBlogPostRepository extends EzyDatabaseRepository<Long, Post> {
    @EzyQuery(
        "SELECT e FROM Post e WHERE e.id IN ?0 ORDER BY e.priority DESC"
    )
    List<Post> findByIdInOrderByPriorityDesc(List<Long> ids);
}

Bước 2: Tạo Class WebBlogPostService

Tiếp theo, tạo Class WebBlogPostService để quản lý việc truy vấn dữ liệu bài viết:

java Copy
@Service
@AllArgsConstructor
public class WebBlogPostService {
    private final WebBlogPostRepository blogPostRepository;
    private final WebPostTermRepository postTermRepository;
    private final WebTermRepository termRepository;
    private final WebEzyArticleEntityToModelConverter ezyArticleEntityToModelConverter;

    public List<PostModel> getHighlightPostsOrderByPriorityDesc() {
        Term term = termRepository.findByTermTypeAndSlug(
            TermType.CATEGORY.toString(),
            TERM_HIGHLIGHT
        );
        List<Long> postIds = Collections.emptyList();
        if (term != null) {
            postIds = newArrayList(
                postTermRepository
                    .findListByField("termId", term.getId()),
                PostTerm::getPostId
            );
        }
        if (postIds.isEmpty()) {
            return Collections.emptyList();
        }
        return newArrayList(
            blogPostRepository.findByIdInOrderByPriorityDesc(postIds),
            ezyArticleEntityToModelConverter::toModel
        );
    }
}

Bước 3: Tạo Class WebHighlightPostResponse

Tạo class để lưu trữ thông tin bài viết nổi bật:

java Copy
@Getter
@Builder
public class WebHighlightPostResponse {
    private final String postSlug;
    private final MediaNameModel image;
}

Bước 4: Tạo Converter để chuyển đổi dữ liệu

Tạo một Converter để chuyển đổi dữ liệu từ response:

java Copy
@EzySingleton
public class WebBlogModelToResponseConverter {
    public WebHighlightPostResponse toHighlightPostResponse(
        String slug,
        MediaNameModel image
    ) {
        return WebHighlightPostResponse.builder()
            .postSlug(slug)
            .image(image)
            .build();
    }
}

Bước 5: Tạo Decorator WebBlogPostModelDecorator

Tạo một Decorator để trang trí dữ liệu bài viết:

java Copy
@EzySingleton
@AllArgsConstructor
public class WebBlogPostModelDecorator {
    private final WebMediaService mediaService;
    private final WebPostSlugService postSlugService;
    private final WebBlogModelToResponseConverter blogModelToResponseConverter;

    public List<WebHighlightPostResponse> decorate(List<PostModel> models) {
        List<Long> postIds = newArrayList(models, PostModel::getId);
        Map<Long, String> slugByPostId = postSlugService.getLatestSlugMapByPostIds(postIds);
        Set<Long> imageIds = newHashSet(models, PostModel::getFeaturedImageId);
        Map<Long, MediaNameModel> imageById = mediaService.getMediaNameMapByIds(imageIds);
        return newArrayList(models, it -> blogModelToResponseConverter.toHighlightPostResponse(slugByPostId.get(it.getId()), imageById.get(it.getFeaturedImageId())));
    }
}

Bước 6: Tạo WebBlogPostControllerService

Tạo một service để xử lý yêu cầu từ controller:

java Copy
@Service
@AllArgsConstructor
public class WebBlogPostControllerService {
    private final WebBlogPostService blogPostService;
    private final WebBlogPostModelDecorator blogPostModelDecorator;

    public List<WebHighlightPostResponse> getHighlightPostsOrderByPriorityDesc() {
        List<PostModel> posts = blogPostService.getHighlightPostsOrderByPriorityDesc();
        return blogPostModelDecorator.decorate(posts);
    }
}

Bước 7: Cập nhật HomeController

Cuối cùng, cập nhật HomeController để thêm biến highlightPosts:

java Copy
@Controller
@AllArgsConstructor
public class HomeController {
    private final WebBlogMenuItemService blogMenuItemService;
    private final WebBlogPostControllerService blogPostControllerService;

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

Thêm thông tin cho Admin

Bước 1: Tạo term với tên 'highlight'

Bước 2: Tạo bài viết và thêm thông tin hình ảnh, chọn term highlight và đặt tên.

Bước 3: Hiển thị thông tin trên giao diện bằng Thymeleaf

Sử dụng đoạn mã sau để hiển thị slider bài viết nổi bật:

html Copy
<div th:each="highlightPost : ${highlightPosts}" class="carousel-item active">
    <img th:src="${highlightPost.image != null ? highlightPost.image.getUrlOrNull() : '' }" class="d-block w-100" alt="..." style="height: 500px">
</div>

Cách thức hoạt động của hệ thống

  1. Khi HomeController khởi động, nó sẽ gọi hàm getHighlightPostsOrderByPriorityDesc() trong WebBlogPostControllerService để lấy dữ liệu.
  2. WebBlogPostControllerService lại gọi đến WebBlogPostService để tìm kiếm danh sách bài viết.
  3. Hệ thống sẽ tìm kiếm term dựa trên loại và slug, sau đó lấy danh sách id bài viết dựa trên PostTermRepository và tìm bài viết theo id với thứ tự ưu tiên giảm dần.
  4. Dữ liệu sau khi được lọc và chuyển đổi sẽ được gửi về WebBlogPostControllerService.
  5. Cuối cùng, dữ liệu sẽ được truyền vào biến highlightPosts và hiển thị trên giao diện một cách trực quan.

Thông qua hướng dẫn này, bạn đã có thể dễ dàng sử dụng hình ảnh của các bài viết nổi bật để tạo những slider hấp dẫn cho blog của mình.
source: viblo

Gợi ý câu hỏi phỏng vấn
Không có dữ liệu

Không có dữ liệu

Bài viết được đề xuất
Bài viết cùng tác giả

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào