.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提供的组件使用起来方便

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)

查看完整代码

• 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/