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

个人博客-首页排版优化-2

原本这篇文章早就要出了的，结果之前买的服务器服务商跑路了，导致博客的数据缺失了部分。我是买了一年的服务器，然后用了3个月，国内跑路云太多了，然后也是花钱重新去别的服务商买了一台服务器，这次只买了一个月，先试试水。
优化计划

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

本篇文章优化历史文章
实现思路

页面数据代码

1. public async Task<IActionResult> Index()
2. {
3.     HomeViewModel homeView = new HomeViewModel()
4.     {
5.         FeaturedPhotos = _fPhotoService.GetFeaturePhotos(),
6.         FeaturedCategories = _fCategoryService.GetFeaturedCategories(),
7.         TopPost =await _TopPostService.GetTopOnePostAsync(),
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.     };
17.     return View(homeView);
18. }

复制代码

把FeaturedPosts中的PageSize参数8改为4，让推荐文章只展示4个，然后新增历史文章，也就是全部文章。

代码实现

接口与实现类

看过之前文章的应该知道之前分页用的是插件，但是那个插件分页需要把数据库的内容全部查询出来，然后再分页，非常影响性能。考虑到博客长期的发展，也是用Skip和Take关键字去进行分页，使用这两个关键字的好处是不会把数据从数据库全部拿去来，而是在查询的时候就对数据进行分页查询，我需要多少数据就拿多少数据，这样做大大减少了服务端的压力。

• Skip属性：Skip属性用于跳过指定数量的元素，返回剩余的元素。它接受一个整数参数，表示要跳过的元素数量。例如，如果有一个包含10个元素的集合，使用Skip(5)将跳过前5个元素，返回后面的5个元素。
  
• Take属性：Take属性用于获取指定数量的元素。它接受一个整数参数，表示要获取的元素数量。例如，如果有一个包含10个元素的集合，使用Take(5)将返回前5个元素。
  

下面代码返回值是一个元组包含(List, PaginationMetadata)，PaginationMetadata是一个分页信息类，在现在这个场景其实是不需要这个类的，可以做下处理，也可以不做处理，没有影响。

1. Task<(List<Post>, PaginationMetadata)> GetAllPostsAsync(QueryParameters param);
3. public async Task<(List<Post>, PaginationMetadata)>GetAllPostsAsync(QueryParameters param)
4.   {
5.       var querySet =  _myDbContext.posts.AsQueryable();
6.       var posts = await _myDbContext.posts
7.       .OrderByDescending(o => o.CreationTime)
8.       .Include(p => p.Categories)
9.       .Include(p => p.Comments)
10.       .Skip((param.Page - 1) * param.PageSize)
11.       .Take(param.PageSize)
12.       .ToListAsync();
13.       var pagination = new PaginationMetadata()
14.       {
15.           PageNumber = param.Page,
16.           PageSize = param.PageSize,
17.           TotalItemCount = await querySet.CountAsync()
18.       };
19.       return (posts, pagination);
20.   }

复制代码

控制器

给HomeViewModel类添加AllPosts属性

1. public (List<Post>, PaginationMetadata) AllPosts { get; set; }

复制代码

然后在控制器方法中调用查询数据的实现方法

1.         public async Task<IActionResult> Index()
2.         {
3.             HomeViewModel homeView = new HomeViewModel()
4.             {
5.                     ......
6.                 AllPosts = await _PostService.GetAllPostsAsync(new QueryParameters
7.                 {
8.                     Page = 1,
9.                     PageSize = 8,
10.                 })
11.             };
12.             return View(homeView);
13.         }

复制代码

接下来就是Razor页面的代码了
直接把之前推荐文章页面的代码copy过来就好了，只需要修改model的类型为(List,PaginationMetadata)，可以看到实际上只需要Post列表就能完成想要的效果。
AllPostCard.cshtml

1. @model (List<Post>,PaginationMetadata)
3. @foreach (var post in @Model.Item1)
4. {
5.    
6.         
7.             
8.                 <strong >@post.Categories.Name</strong>
9.                 <h5 >@post.Title</h5>
10.                
11.                     @post.LastUpdateTime.ToShortDateString()
12.                     
13.                         <i ></i>
14.                         @post.ViewCount
15.                     
16.                      
17.                     
18.                         <i ></i>
19.                         @post.Comments.Count
20.                     
21.                
22.                 <p >@post.Summary.Limit(50)</p>
23.                 <a
24.                    asp-controller="Blog" asp-action="Post" asp-route-id="@post.Id">
25.                     Continue reading
26.                 </a>
27.             
28.             
29.                 <img  alt=""
30.                      src="https://www.cnblogs.com/@Url.Action("GetRandomImage", "PicLib" ,new { seed = post.Id,Width = 800, Height = 1000})">
31.             
32.         
33.    
34. }

复制代码

js代码

然后也是和之前一样，写一个返回布局页的代码，用ajax请求就行了
.NET6 个人博客-推荐文章加载优化 - 妙妙屋（zy） - 博客园 (cnblogs.com) https://www.cnblogs.com/ZYPLJ/p/17495172.html
效果展示




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