.NET 个人博客-首页排版优化

个人博客-首页排版优化

优化计划

• 置顶3个且可滚动或切换
  
• 推荐改为4个,然后新增历史文章，将推荐的加载更多放入历史文章，按文章发布时间降序排列。
  
• 标签功能，可以为文章贴上标签
  
• 推荐点赞功能
  

本篇文章优化置顶
原先置顶如图


新置顶图


可以看到下方多了3个按钮，可以通过按钮切换置顶，然后我设置了每3秒自动切换。
思路

用bootstrap5提供的Carousel组件去完成，首先需要将之前返回一条信息的文章置顶接口换成一个集合，然后放入组件就行了
代码实现

将HomeController中的Index方法的TopPost = _TopPostService.GetTopOnePost()换成集合就行了

1. public async Task<IActionResult> Index()
2. {
3.     HomeViewModel homeView = new HomeViewModel()
4.     {
5.         FeaturedPhotos = _fPhotoService.GetFeaturePhotos(),
6.         FeaturedCategories = _fCategoryService.GetFeaturedCategories(),
7.         TopPost = _TopPostService.GetTopOnePost(),
8.         FeaturedPosts = await _PostService.GetFeaturedPostsAsync(new QueryParameters
9.                                                                  {
10.                                                                      Page = 1,
11.                                                                      PageSize = 8,
12.                                                                  }),
13.         Links = await _linkService.GetAll(),
14.         Notices = await _noticeService.GetAllAsync(),
15.         HomePost = await _articelsService.HomePostAsync(),
16.         // MaxPost = await _articelsService.MaxPostAsync()
17.     };
18.     return View(homeView);
19. }

复制代码

接口和服务

1. public interface ITopPostService
2. {
3. // Post GetTopOnePost();
4. Task<List<Post>> GetTopOnePostAsync();
5. }
7. public async Task<List<Post>> GetTopOnePostAsync()
8. {
9.     var topPosts = await _myDbContext.topPosts.Include(t => t.Post).ToListAsync();
11.     if (topPosts.Count == 0)
12.     {
13.     return null;
14.     }               
15.     return topPosts.Select(tp => tp.Post).ToList();
16. }

复制代码

Rezor页面代码

bootstrap5提供的组件使用起来方便

• data-bs-ride: 设置为carousel，表示启用自动播放幻灯片。
  
• data-bs-interval: 设置自动切换幻灯片之间的时间间隔，单位为毫秒。
  

将外层div的id设置为myCarousel，然后将切换按钮的data-bs-target设置为#myCarousel就能与之绑定，data-bs-slide这个属性用于指定按钮的行为，即指定要切换到前一个或后一个幻灯片。它可以设置为prev表示切换到前一个幻灯片，或者设置为next表示切换到后一个幻灯片。

1.    
2.         @foreach (var item in Model.Select((value, index) => new { Value = value, Index = index }))
3.         {
4.             <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="@item.Index"  aria-label="Slide @item.Index + 1"></button>
5.         }
6.    
7.    
8.         @foreach (var item in Model.Select((value, index) => new { Value = value, Index = index }))
9.         {
10.             
11.                
12.                     
13.                         
14.                             @item.Value.Title
15.                             <p >@item.Value.Summary</p>
16.                             <p >
17.                                 <a  asp-controller="Blog" asp-action="Post" asp-route-id="@item.Value.Id">
18.                                     Continue reading...
19.                                 </a>
20.                             </p>
21.                         
22.                     
23.                     
24.                         <img  
25.                              src="https://www.cnblogs.com/@Url.Action("GetRandomImageTop", "PicLib", new { seed = item.Value.Id })" alt=""/>
26.                     
27.                
28.             
29.         }
30.    
31.     <button  type="button" data-bs-target="#myCarousel" data-bs-slide="prev" >
32.         
33.         Previous
34.     </button>
35.     <button  type="button" data-bs-target="#myCarousel" data-bs-slide="next" >
36.         
37.         Next
38.     </button>

复制代码

1. @await Html.PartialAsync("Widegets/HomeTopPostCard", Model.TopPost)

复制代码

查看完整代码

• https://github.com/ZyPLJ/personalblog/blob/master/Personalblog/Controllers/HomeController.cs
  
• https://github.com/ZyPLJ/personalblog/blob/master/PersonalblogServices/FtopPost/TopPostService.cs
  

参考资料

• Carousel · Bootstrap v5 中文文档 v5.3 | Bootstrap 中文网 (bootcss.com) https://v5.bootcss.com/docs/components/carousel/
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！