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

  • .NET 个人博客-首页排版优化已关闭评论
  • 216 次浏览
  • A+
所属分类:.NET技术
摘要

本篇文章优化置顶可以看到下方多了3个按钮,可以通过按钮切换置顶,然后我设置了每3秒自动切换。


个人博客-首页排版优化

优化计划

本篇文章优化置顶

原先置顶如图

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

新置顶图

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

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

思路

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

代码实现

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

public async Task<IActionResult> Index() {     HomeViewModel homeView = new HomeViewModel()     {         FeaturedPhotos = _fPhotoService.GetFeaturePhotos(),         FeaturedCategories = _fCategoryService.GetFeaturedCategories(),         TopPost = _TopPostService.GetTopOnePost(),         FeaturedPosts = await _PostService.GetFeaturedPostsAsync(new QueryParameters                                                                  {                                                                      Page = 1,                                                                      PageSize = 8,                                                                  }),         Links = await _linkService.GetAll(),         Notices = await _noticeService.GetAllAsync(),         HomePost = await _articelsService.HomePostAsync(),         // MaxPost = await _articelsService.MaxPostAsync()     };     return View(homeView); } 

接口和服务

public interface ITopPostService { // Post GetTopOnePost(); Task<List<Post>> GetTopOnePostAsync(); }  public async Task<List<Post>> GetTopOnePostAsync() {     var topPosts = await _myDbContext.topPosts.Include(t => t.Post).ToListAsync();      if (topPosts.Count == 0)     {     return null;     }                     return topPosts.Select(tp => tp.Post).ToList(); } 

Rezor页面代码

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

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

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

<div id="myCarousel" class="carousel carousel-dark slide" data-bs-ride="carousel" data-bs-interval="3000">     <div class="carousel-indicators" style="bottom: 10px;">         @foreach (var item in Model.Select((value, index) => new { Value = value, Index = index }))         {             <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="@item.Index" class="@if (item.Index == 0) { <text>active</text> }" aria-label="Slide @item.Index + 1"></button>         }     </div>     <div class="carousel-inner">         @foreach (var item in Model.Select((value, index) => new { Value = value, Index = index }))         {             <div class="carousel-item @if (item.Index == 0) { <text>active</text> }">                 <div class="row rounded mb-4 shadow-sm box border" style="margin-left:3px;margin-right:3px">                     <div class="col-md-6">                         <div class="p-4 p-md-5 mb-4 text-black">                             <div class="display-6 fst-italic">@item.Value.Title</div>                             <p class="lead my-3">@item.Value.Summary</p>                             <p class="lead mb-0">                                 <a class="text-black fw-bold" asp-controller="Blog" asp-action="Post" asp-route-id="@item.Value.Id">                                     Continue reading...                                 </a>                             </p>                         </div>                     </div>                     <div class="col-md-6" style="padding-right:0">                         <img class="bd-placeholder-img img-fluid no-padding rounded" style="object-fit: cover; object-position: center;width:100%;height:500px"                              src="@Url.Action("GetRandomImageTop", "PicLib", new { seed = item.Value.Id })" alt=""/>                     </div>                 </div>             </div>         }     </div>     <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev" style="width:5%">         <span class="carousel-control-prev-icon" aria-hidden="true"></span>         <span class="visually-hidden">Previous</span>     </button>     <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next" style="width:5%">         <span class="carousel-control-next-icon" aria-hidden="true"></span>         <span class="visually-hidden">Next</span>     </button> </div> 
@await Html.PartialAsync("Widegets/HomeTopPostCard", Model.TopPost) 

查看完整代码

参考资料