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
@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
@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
@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
@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
@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
@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
@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
<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
- Khi
HomeController
khởi động, nó sẽ gọi hàmgetHighlightPostsOrderByPriorityDesc()
trongWebBlogPostControllerService
để lấy dữ liệu. WebBlogPostControllerService
lại gọi đếnWebBlogPostService
để tìm kiếm danh sách bài viết.- 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. - Dữ liệu sau khi được lọc và chuyển đổi sẽ được gửi về
WebBlogPostControllerService
. - 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