YaeBlog.Core/Services/EssayContentService.cs

@@ -40,6 +40,7 @@ public class EssayContentService
     }
 
     public IEnumerable<KeyValuePair<string, int>> Tags => from item in _tags
+        orderby item.Value.Count descending
         select KeyValuePair.Create(item.Key, item.Value.Count);
 
     public int TagCount => _tags.Count;

YaeBlog/Components/BlogInformationCard.razor

@@ -1,4 +1,42 @@
-<div>
+@using YaeBlog.Core.Services
-    <h3>“奇奇怪怪东西的聚合地”</h3>
+
+@inject EssayContentService EssayContentInstance
+
+<div class="container">
+    <div class="row justify-content-center">
+        <div class="col-auto p-4">
+            <Image Src="images/avatar.png" Alt="Ricardo's avatar"/>
+        </div>
+    </div>
+
+    <div class="row justify-content-center p-3">
+        <div class="col-auto fs-4">
+            “奇奇怪怪东西的聚合地”
+        </div>
+    </div>
+
+    <div class="row justify-content-between px-2 py-1 fs-5">
+        <div class="col-auto">
+            文章
+        </div>
+
+        <div class="col-auto">
+            <a href="/blog/archives">
+                @(EssayContentInstance.Essays.Count)
+            </a>
+        </div>
+    </div>
+
+    <div class="row justify-content-between px-2 py-1 fs-5">
+        <div class="col-auto">
+            标签
+        </div>
+
+        <div class="col-auto">
+            <a href="/blog/tags">
+                @(EssayContentInstance.TagCount)
+            </a>
+        </div>
+    </div>
 </div>
 

YaeBlog/Components/EssayCard.razor

@@ -0,0 +1,39 @@
+@using YaeBlog.Core.Models
+
+<div class="container p-3">
+    <div class="row fs-2 fw-bold py-2 essay-title">
+        <a href="/blog/essays/@(Essay.FileName)" target="_blank">@(Essay.Title)</a>
+    </div>
+
+    <div class="row p-2 justify-content-start">
+        <div class="col-auto fw-light">
+            @(Essay.PublishTime.ToString("yyyy-MM-dd"))
+        </div>
+
+        @foreach (string key in Essay.Tags)
+        {
+            <div class="col-auto">
+                <a href="/blog/tags/?tagName=@key">
+                    # @key
+                </a>
+            </div>
+        }
+    </div>
+
+    <div class="row p-2">
+        <div class="col">
+            @(Essay.Description)
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col border-bottom">
+
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public required BlogEssay Essay { get; set; }
+}

YaeBlog/Components/EssayCard.razor.css

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

YaeBlog/Layout/BlogLayout.razor

@@ -11,28 +11,28 @@
         </div>
 
         <div class="col-4 d-flex justify-content-around align-items-center">
-            <a href="/blog/" class="p-2" target="_blank">
+            <a href="/blog/" class="p-2">
                 <div class="d-inline-flex" style="text-align: center">
                     <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">
+            <a href="/blog/archives/" class="p-2">
                 <div class="d-inline-flex">
                     <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">
+            <a href="/blog/tags/" class="p-2">
                 <div class="d-inline-flex">
                     <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">
+            <a href="/blog/about/" class="p-2">
                 <div class="d-inline-flex">
                     <Icon Name="@IconName.Person" Color="@IconColor.Primary" class="px-2 d-none d-xl-block" Size="@IconSize.x5"/>
                     <h5>关于</h5>

YaeBlog/Pages/About.razor

@@ -0,0 +1,9 @@
+@page "/blog/about"
+
+<div class="container">
+
+</div>
+
+@code {
+
+}

YaeBlog/Pages/Archives.razor

@@ -0,0 +1,72 @@
+@page "/blog/archives"
+@using YaeBlog.Core.Models
+@using YaeBlog.Core.Services
+
+@inject EssayContentService EssayContentInstance
+
+<div class="container">
+    <div class="row">
+        <div class="col">
+            <div class="container">
+                <div class="row">
+                    <div class="col">
+                        <h1>归档</h1>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col fst-italic py-4">
+                        时光图书馆，黑历史集散地。
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    @foreach (IGrouping<DateTime, KeyValuePair<string, BlogEssay>> group in _essays)
+    {
+        <div class="row">
+            <div class="col">
+                <div class="container">
+                    <div class="row">
+                        <div class="col">
+                            <h3>@(group.Key.Year)</h3>
+                        </div>
+                    </div>
+
+                    <div class="container px-3 py-2">
+                        @foreach (KeyValuePair<string, BlogEssay> essay in group)
+                        {
+                            <div class="row py-1">
+                                <div class="col-auto">
+                                    @(essay.Value.PublishTime.ToString("MM-dd"))
+                                </div>
+
+                                <div class="col-auto">
+                                    <a href="/blog/@(essay.Key)">
+                                        @(essay.Value.Title)
+                                    </a>
+                                </div>
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+
+</div>
+
+@code {
+    private readonly List<IGrouping<DateTime, KeyValuePair<string, BlogEssay>>> _essays = [];
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+
+        _essays.AddRange(from essay in EssayContentInstance.Essays
+            orderby essay.Value.PublishTime descending
+            group essay by new DateTime(essay.Value.PublishTime.Year, 1, 1));
+    }
+
+}

YaeBlog/Pages/BlogIndex.razor

@@ -4,45 +4,13 @@
 
 @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">
+                <EssayCard Essay="@(pair.Value)"/>
-                    <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">
@@ -60,7 +28,7 @@
                 @if (_page == 1)
                 {
                     <div class="col-auto">
-                        <a href="/blog/?page=1">1</a>
+                        1
                     </div>
                     <div class="col-auto">
                         <a href="/blog/?page=2">2</a>
@@ -78,7 +46,7 @@
                         <a href="/blog/?page=@(_pageCount - 1)">@(_pageCount - 1)</a>
                     </div>
                     <div class="col-auto">
-                        <a href="/blog/?page=@(_pageCount)">@(_pageCount)</a>
+                        @(_pageCount)
                     </div>
                 }
                 else
@@ -87,7 +55,7 @@
                         <a href="/blog/?page=@(_page - 1)">@(_page - 1)</a>
                     </div>
                     <div class="col-auto">
-                        <a href="/blog/?page=@(_page)">@(_page)</a>
+                        @(_page)
                     </div>
                     <div class="col-auto">
                         <a href="/blog/?page=@(_page + 1)">@(_page + 1)</a>

YaeBlog/Pages/Essays.razor

@@ -5,8 +5,35 @@
 @inject NavigationManager NavigationInstance
 @inject EssayContentService EssayContentInstance
 
-<div class="container">
+<PageTitle>
+    @(_essay!.Title)
+</PageTitle>
 
+<div class="container py-4">
+    <div class="row">
+        <div class="col-auto">
+            <h1>@(_essay!.Title)</h1>
+        </div>
+    </div>
+
+    <div class="row p-4">
+        <div class="col-auto fw-light">
+            @(_essay!.PublishTime.ToString("yyyy-MM-dd"))
+        </div>
+
+        @foreach (string tag in _essay!.Tags)
+        {
+            <div class="col-auto">
+                <a href="/tags/?tagName=@(tag)"># @(tag)</a>
+            </div>
+        }
+    </div>
+
+    <div class="row">
+        <div class="col-lg-8 col-md-12">
+            @((MarkupString)_essay!.HtmlContent)
+        </div>
+    </div>
 </div>
 
 @code {

YaeBlog/Pages/Tags.razor

@@ -0,0 +1,67 @@
+@page "/blog/tags/"
+@using YaeBlog.Core.Models
+@using YaeBlog.Core.Services
+
+@inject EssayContentService EssayContentInstance
+
+<div class="container">
+    <div class="row">
+        <div class="col">
+            @if (TagName is null)
+            {
+                <h1>标签</h1>
+            }
+            else
+            {
+                <h2>@(TagName)</h2>
+            }
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col fst-italic py-4">
+            在野外游荡的指针，走向未知的方向。
+        </div>
+    </div>
+
+    @if (TagName is null)
+    {
+        <div>
+            <ul>
+                @foreach (KeyValuePair<string, int> pair in EssayContentInstance.Tags)
+                {
+                    <li class="p-2">
+                        <a href="/blog/tags/?tagName=@(pair.Key)">
+                            <div class="container fs-5">
+                                <div class="row">
+                                    <div class="col-auto">
+                                        # @(pair.Key)
+                                    </div>
+
+                                    <div class="col-auto tag-count">
+                                        @(pair.Value)
+                                    </div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                }
+            </ul>
+        </div>
+    }
+    else
+    {
+        <div class="container">
+            @foreach (BlogEssay essay in EssayContentInstance.GetTag(TagName).OrderByDescending(e => e.PublishTime))
+            {
+                <EssayCard Essay="@essay"/>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    [SupplyParameterFromQuery] public string? TagName { get; set; }
+
+
+}

YaeBlog/Pages/Tags.razor.css

@@ -0,0 +1,6 @@
+.tag-count {
+    background: var(--bs-secondary-bg);
+    border-radius: 5px;
+    padding: 0 6px;
+}
+