add: 翻页功能

YaeBlog.Core/Services/EssayContentService.cs

@@ -14,9 +14,7 @@ public class EssayContentService
 
     public bool TryAdd(string key, BlogEssay essay) => _essays.TryAdd(key, essay);
 
-    public IEnumerable<KeyValuePair<string, BlogEssay>> Essays => _essays;
+    public IDictionary<string, BlogEssay> Essays => _essays;
-
-    public int Count => _essays.Count;
 
     public void RefreshTags()
     {

YaeBlog/Components/BlogInformationCard.razor

@@ -0,0 +1,4 @@
+<div>
+    <h3>“奇奇怪怪东西的聚合地”</h3>
+</div>
+

YaeBlog/Layout/BlogLayout.razor

@@ -1,9 +1,11 @@
 @inherits LayoutComponentBase
 
-<div class="container">
+@attribute [StreamRendering]
+
+<main class="container">
     <div class="row" style="height: 80px">
         <div class="px-2 col-8">
-            <a href="/" class="p-2">
+            <a href="/blog/" class="p-2">
                 <h4>Ricardo's Blog</h4>
             </a>
         </div>
@@ -11,37 +13,37 @@
         <div class="col-4 d-flex justify-content-around align-items-center">
             <a href="/blog/" class="p-2" target="_blank">
                 <div class="d-inline-flex" style="text-align: center">
-                    <Icon Name="@IconName.House" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
+                    <Icon Name="@IconName.House" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
                     <h5>首页</h5>
                 </div>
             </a>
 
             <a href="/blog/archives/" class="p-2" target="_blank">
                 <div class="d-inline-flex">
-                    <Icon Name="@IconName.Archive" Color="@IconColor.Primary" class="px-2" Size="IconSize.x5"/>
+                    <Icon Name="@IconName.Archive" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="IconSize.x5"/>
                     <h5>归档</h5>
                 </div>
             </a>
 
             <a href="/blog/tags/" class="p-2" target="_blank">
                 <div class="d-inline-flex">
-                    <Icon Name="@IconName.Tags" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
+                    <Icon Name="@IconName.Tags" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
                     <h5>标签</h5>
                 </div>
             </a>
 
             <a href="/blog/about/" class="p-2" target="_blank">
                 <div class="d-inline-flex">
-                    <Icon Name="@IconName.Person" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
+                    <Icon Name="@IconName.Person" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
                     <h5>关于</h5>
                 </div>
             </a>
         </div>
     </div>
 
-    <main class="row px-4 py-2">
+    <div class="row px-4 py-2">
         @Body
-    </main>
+    </div>
 
     <Foonter/>
-</div>
+</main>

YaeBlog/Layout/MainLayout.razor

@@ -1,6 +1,6 @@
 @inherits LayoutComponentBase
 
-<div class="container">
+<main class="container">
     <div class="row" style="height: 80px">
         <div class="px-2 col-8">
             <a href="/" class="p-2">
@@ -15,11 +15,11 @@
         </div>
     </div>
 
-    <main class="row px-4 center">
+    <div class="row px-4 center">
         <div class="py-2">
             @Body
         </div>
-    </main>
+    </div>
 
     <Foonter/>
-</div>
+</main>

YaeBlog/Layout/MainLayout.razor.css

@@ -1,6 +1,7 @@
 .center {
     margin: 0 auto;
     max-width: 48em;
+    min-height: calc(100vh - 80px);
     position: relative;
     display: flex;
     flex-direction: column;

YaeBlog/Pages/BlogIndex.razor

@@ -1,3 +1,144 @@
 @page "/blog"
+@using YaeBlog.Core.Models
+@using YaeBlog.Core.Services
 
+@inject EssayContentService EssayContentInstance
+@inject NavigationManager NavigationInstance
+@inject ILogger<BlogIndex> Logger
 
+<div class="container">
+    <div class="row">
+        <div class="col-sm-12 col-md-9">
+            @foreach (KeyValuePair<string, BlogEssay> pair in _essays)
+            {
+                <div class="container p-3">
+                    <div class="row fs-2 fw-bold py-2 essay-title">
+                        <a href="/blog/essays/@(pair.Key)">@(pair.Value.Title)</a>
+                    </div>
+
+                    <div class="row p-2 justify-content-start">
+                        <div class="col-auto fw-light">
+                            @(pair.Value.PublishTime.ToString("yyyy-MM-dd"))
+                        </div>
+
+                        @foreach (string key in pair.Value.Tags)
+                        {
+                            <div class="col-auto">
+                                <a href="/blog/tags?tagName=@key">
+                                    # @key
+                                </a>
+                            </div>
+                        }
+                    </div>
+
+                    <div class="row p-2">
+                        <div class="col">
+                            @(pair.Value.Description)
+                        </div>
+                    </div>
+
+                    <div class="row">
+                        <div class="col border-bottom">
+
+                        </div>
+                    </div>
+                </div>
+            }
+
+            <div class="row align-items-center justify-content-center p-3">
+                @if (_page == 1)
+                {
+                    <div class="col-auto fw-light">上一页</div>
+                }
+                else
+                {
+                    <div class="col-auto">
+                        <a href="/blog/?page=@(_page - 1)">上一页</a>
+                    </div>
+                }
+
+                @if (_page == 1)
+                {
+                    <div class="col-auto">
+                        <a href="/blog/?page=1">1</a>
+                    </div>
+                    <div class="col-auto">
+                        <a href="/blog/?page=2">2</a>
+                    </div>
+                    <div class="col-auto">
+                        <a href="/blog/?page=3">3</a>
+                    </div>
+                }
+                else if (_page == _pageCount)
+                {
+                    <div class="col-auto">
+                        <a href="/blog/?page=@(_pageCount - 2)">@(_pageCount - 2)</a>
+                    </div>
+                    <div class="col-auto">
+                        <a href="/blog/?page=@(_pageCount - 1)">@(_pageCount - 1)</a>
+                    </div>
+                    <div class="col-auto">
+                        <a href="/blog/?page=@(_pageCount)">@(_pageCount)</a>
+                    </div>
+                }
+                else
+                {
+                    <div class="col-auto">
+                        <a href="/blog/?page=@(_page - 1)">@(_page - 1)</a>
+                    </div>
+                    <div class="col-auto">
+                        <a href="/blog/?page=@(_page)">@(_page)</a>
+                    </div>
+                    <div class="col-auto">
+                        <a href="/blog/?page=@(_page + 1)">@(_page + 1)</a>
+                    </div>
+                }
+
+                @if (_page == _pageCount)
+                {
+                    <div class="col-auto fw-light">
+                        下一页
+                    </div>
+                }
+                else
+                {
+                    <div class="col-auto">
+                        <a href="/blog/?page=@(_page + 1)">下一页</a>
+                    </div>
+                }
+            </div>
+        </div>
+
+        <div class="col-sm-12 col-md-3">
+            <BlogInformationCard/>
+        </div>
+    </div>
+</div>
+
+@code {
+
+    [SupplyParameterFromQuery] private int? Page { get; set; }
+
+    private readonly List<KeyValuePair<string, BlogEssay>> _essays = [];
+    private const int EssaysPerPage = 8;
+    private int _pageCount = 1;
+    private int _page = 1;
+
+    protected override void OnInitialized()
+    {
+        _page = Page ?? 1;
+        _pageCount = EssayContentInstance.Essays.Count / EssaysPerPage + 1;
+
+        if (EssaysPerPage * _page > EssayContentInstance.Essays.Count + EssaysPerPage)
+        {
+            NavigationInstance.NavigateTo("/NotFount");
+            return;
+        }
+
+        _essays.AddRange(EssayContentInstance.Essays
+            .OrderByDescending(p => p.Value.PublishTime)
+            .Skip((_page - 1) * EssaysPerPage)
+            .Take(EssaysPerPage));
+    }
+
+}

YaeBlog/Pages/BlogIndex.razor.css

@@ -0,0 +1,7 @@
+.essay-title a {
+    color: var(--bs-body-color);
+}
+
+.read-more a {
+    color: var(--bs-body-color);
+}

YaeBlog/Pages/Essays.razor

@@ -0,0 +1,34 @@
+@page "/blog/essays/{BlogKey}"
+@using YaeBlog.Core.Models
+@using YaeBlog.Core.Services
+
+@inject NavigationManager NavigationInstance
+@inject EssayContentService EssayContentInstance
+
+<div class="container">
+
+</div>
+
+@code {
+    [Parameter]
+    public string? BlogKey { get; set; }
+
+    private BlogEssay? _essay;
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        if (string.IsNullOrWhiteSpace(BlogKey))
+        {
+            NavigationInstance.NavigateTo("/NotFound");
+            return;
+        }
+
+        if (!EssayContentInstance.TryGet(BlogKey, out _essay))
+        {
+            NavigationInstance.NavigateTo("/NotFound");
+        }
+    }
+
+}

YaeBlog/Pages/NotFound.razor

@@ -0,0 +1,9 @@
+@page "/NotFound"
+
+<div class="container">
+    <h3>NotFound!</h3>
+</div>
+
+@code {
+
+}

YaeBlog/wwwroot/globals.css

@@ -2,6 +2,12 @@ body a {
     text-decoration: none;
 }
 
+body main {
+    flex: 1;
+    min-height: 100vh;
+    overflow-x: visible;
+}
+
 @font-face {
     font-family: "Font Awesome 6 Free";
     font-style: normal;