华夏吉祥 发表于 2023-8-1 19:13:33

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

个人博客-首页排版优化

优化计划


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


新置顶图


可以看到下方多了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提供的组件使用起来方便

[*]data-bs-ride: 设置为carousel,表示启用自动播放幻灯片。
[*]data-bs-interval: 设置自动切换幻灯片之间的时间间隔,单位为毫秒。
将外层div的id设置为myCarousel,然后将切换按钮的data-bs-target设置为#myCarousel就能与之绑定,data-bs-slide这个属性用于指定按钮的行为,即指定要切换到前一个或后一个幻灯片。它可以设置为prev表示切换到前一个幻灯片,或者设置为next表示切换到后一个幻灯片。
   
      @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"aria-label="Slide @item.Index + 1"></button>
      }
   
   
      @foreach (var item in Model.Select((value, index) => new { Value = value, Index = index }))
      {
            
               
                  
                        
                            @item.Value.Title
                            <p >@item.Value.Summary</p>
                            <p >
                              <aasp-controller="Blog" asp-action="Post" asp-route-id="@item.Value.Id">
                                    Continue reading...
                              </a>
                            </p>
                        
                  
                  
                        <img
                           src="https://www.cnblogs.com/@Url.Action("GetRandomImageTop", "PicLib", new { seed = item.Value.Id })" alt=""/>
                  
               
            
      }
   
    <buttontype="button" data-bs-target="#myCarousel" data-bs-slide="prev" >
      
      Previous
    </button>
    <buttontype="button" data-bs-target="#myCarousel" data-bs-slide="next" >
      
      Next
    </button>@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/

来源:https://www.cnblogs.com/ZYPLJ/archive/2023/08/01/17598937.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: .NET 个人博客-首页排版优化