.NET 个人博客-首页排版优化
个人博客-首页排版优化优化计划
[*] 置顶3个且可滚动或切换
[*] 推荐改为4个,然后新增历史文章，将推荐的加载更多放入历史文章，按文章发布时间降序排列。
[*] 标签功能，可以为文章贴上标签
[*] 推荐点赞功能
本篇文章优化置顶
原先置顶如图
https://img2023.cnblogs.com/blog/3091176/202308/3091176-20230801195024810-1049427056.png
新置顶图
https://img2023.cnblogs.com/blog/3091176/202308/3091176-20230801195030734-1465456294.png
可以看到下方多了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/
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]