個人博客-首頁排版優化

優化計劃

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