fix: remove unused files.

feat: styles for essays.
feat: Some performance tweak.
2025-01-24 16:39:41 +08:00 · 2025-01-24 16:29:32 +08:00 · 2025-01-23 22:59:44 +08:00 · 2025-01-23 20:47:45 +08:00 · 2025-01-23 20:46:54 +08:00 · 2025-01-16 17:27:11 +08:00
60 changed files with 736 additions and 791 deletions
--- a/YaeBlog/Abstraction/IEssayContentService.cs
+++ b/YaeBlog/Abstraction/IEssayContentService.cs
@ -5,7 +5,9 @@ namespace YaeBlog.Abstraction;

 public interface IEssayContentService
 {
-    public IReadOnlyDictionary<string, BlogEssay> Essays { get; }
+    public IEnumerable<BlogEssay> Essays { get; }
+
+    public int Count { get; }

    public IReadOnlyDictionary<EssayTag, List<BlogEssay>> Tags { get; }

@ -16,6 +18,8 @@ public interface IEssayContentService

    public bool TryAdd(BlogEssay essay);

+    public bool TryGetEssay(string filename, [NotNullWhen(true)] out BlogEssay? essay);
+
    public void RefreshTags();

    public void Clear();
--- a/YaeBlog/Commands/YaeBlogCommand.cs
+++ b/YaeBlog/Commands/YaeBlogCommand.cs
@ -70,7 +70,6 @@ public sealed class YaeBlogCommand
            builder.Services.AddControllers();
            builder.AddYaeBlog();
            builder.AddWatcher();
-            builder.AddTailwindWatcher();

            WebApplication application = builder.Build();

--- a/YaeBlog/Components/Anchor.razor
+++ b/YaeBlog/Components/Anchor.razor
@ -0,0 +1,9 @@
+<a href="@Address" class="text-blue-600" target="@(NewPage ? "_blank" : "_self")">@Text</a>
+
+@code {
+    [Parameter] public string? Address { get; set; }
+
+    [Parameter] public string? Text { get; set; }
+
+    [Parameter] public bool NewPage { get; set; }
+}
--- a/YaeBlog/Components/App.razor
+++ b/YaeBlog/Components/App.razor
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">

 <head>
    <meta charset="utf-8"/>
@ -13,13 +13,8 @@
 </head>

 <body>
-<Routes/>
-
-<script src="_framework/blazor.web.js"></script>
-<script src="clipboard.min.js"></script>
-<script>
-    const clipboard = new ClipboardJS('.btn');
-</script>
+    <Routes/>
+    <script src="_framework/blazor.web.js"></script>
 </body>

 </html>
--- a/YaeBlog/Components/BlogInformationCard.razor
+++ b/YaeBlog/Components/BlogInformationCard.razor
@ -4,54 +4,46 @@
@inject IEssayContentService Contents
@inject BlogOptions Options

-<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 class="flex flex-col">
+    <div class="p-10">
+        <img src="images/avatar.png" alt="Ricardo's Avatar" class="h-auto max-w-full"/>
    </div>

-    <div class="row justify-content-center p-3">
-        <div class="col-auto fs-4">
-            “奇奇怪怪东西的聚合地”
-        </div>
+    <div class="px-10 py-2 text-xl">
+        “奇奇怪怪东西的聚合地”
    </div>

-    <div class="row justify-content-between px-2 py-1 fs-5">
-        <div class="col-auto">
+    <div class="flex flex-row justify-between px-6 py-2 text-xl">
+        <div>
            文章
        </div>

-        <div class="col-auto">
-            <a href="/blog/archives">
-                @(Contents.Essays.Count)
-            </a>
-        </div>
+        <a href="/blog/archives/">
+            <div>
+                @(Contents.Count)
+            </div>
+        </a>
    </div>

-    <div class="row justify-content-between px-2 py-1 fs-5">
-        <div class="col-auto">
+    <div class="flex flex-row justify-between px-6 py-2 text-xl">
+        <div>
            标签
        </div>

-        <div class="col-auto">
-            <a href="/blog/tags">
+        <a href="/blog/tags/">
+            <div>
                @(Contents.Tags.Count)
-            </a>
-        </div>
+            </div>
+        </a>
    </div>

-    <div class="row justify-content-start fs-5" style="padding-top: 2em">
-        <div class="col-auto">
-            广而告之
-        </div>
+    <div class="text-xl px-2 py-2">
+        广而告之
    </div>

-    <div class="row">
-        <div class="col">
-            <p style="text-indent: 2em">
-                @(Options.Announcement)
-            </p>
-        </div>
+    <div class="px-6">
+        <p class="text-lg">
+            @(Options.Announcement)
+        </p>
    </div>
 </div>
--- a/YaeBlog/Components/BlogInformationCard.razor.css
+++ b/YaeBlog/Components/BlogInformationCard.razor.css
--- a/YaeBlog/Components/EssayCard.razor
+++ b/YaeBlog/Components/EssayCard.razor
@ -1,19 +1,19 @@
@using System.Text.Encodings.Web
@using YaeBlog.Models

-<div class="container p-3">
-    <div class="row fs-2 fw-bold py-2 essay-title">
+<div class="flex flex-col p-3">
+    <div class="text-3xl font-bold py-2">
        <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">
+    <div class="p-2 flex flex-row justify-content-start gap-2">
+        <div class="font-light">
            @(Essay.PublishTime.ToString("yyyy-MM-dd"))
        </div>

        @foreach (string key in Essay.Tags)
        {
-            <div class="col-auto">
+            <div class="text-sky-600">
                <a href="/blog/tags/?tagName=@(UrlEncoder.Default.Encode(key))">
                    # @key
                </a>
@ -21,20 +21,11 @@
        }
    </div>

-    <div class="row p-2">
-        <div class="col">
-            @(Essay.Description)
-        </div>
-    </div>
-
-    <div class="row">
-        <div class="col border-bottom">
-
-        </div>
+    <div class="p-2">
+        @(Essay.Description)
    </div>
 </div>

@code {
-    [Parameter]
-    public required BlogEssay Essay { get; set; }
+    [Parameter] public required BlogEssay Essay { get; set; }
 }
--- a/YaeBlog/Components/EssayCard.razor.css
+++ b/YaeBlog/Components/EssayCard.razor.css
@ -1,3 +0,0 @@
-.essay-title a {
-    color: var(--bs-body-color);
-}
--- a/YaeBlog/Components/Foonter.razor
+++ b/YaeBlog/Components/Foonter.razor
@ -1,14 +1,22 @@
-<div class="row align-items-end text-center">
-    <div class="row">
-        <p class="fs-6">
-            2021 - @(DateTimeOffset.Now.Year) © <a href="https://rrricardo.top" target="_blank">Ricardo Ren</a>，
-            由 <a href="https://dotnet.microsoft.com/zh-cn/" target="_blank">.NET @(Environment.Version)</a> 驱动。
+<div class="flex flex-col text-center py-2">
+    <div>
+        <p class="text-md">
+            2021 - @(DateTimeOffset.Now.Year) ©
+            <Anchor Address="https://rrricardot.top" Text="Ricardo Ren"/>
+            ，由
+            <Anchor Address="https://dotnet.microsoft.com" Text="@DotnetVersion"/>
+            驱动。
        </p>
    </div>

-    <div class="row">
-        <p class="fs-6">
-            <a href="https://beian.miit.gov.cn" target="_blank">蜀ICP备2022004429号-1</a>
+    <div>
+        <p class="text-md">
+            <a href="https://beian.miit.gov.cn" target="_blank" class="text-black">蜀ICP备2022004429号-1</a>
        </p>
    </div>
 </div>
+
+@code
+{
+    private string DotnetVersion => $".NET {Environment.Version}";
+}
--- a/YaeBlog/Components/Foonter.razor.css
+++ b/YaeBlog/Components/Foonter.razor.css
--- a/YaeBlog/Components/LicenseDisclaimer.razor
+++ b/YaeBlog/Components/LicenseDisclaimer.razor
@ -1,35 +1,33 @@
@using YaeBlog.Models
@inject BlogOptions Options

-<div class="row px-2 py-4 copyright border border-primary rounded-1 bg-primary-subtle">
-    <div class="col">
-        <div class="row p-1">
-            <div class="col">
-                文章作者：<a href="https://rrricardo.top" target="_blank">Ricardo Ren</a>
-            </div>
+<div class="px-4 py-8 border border-sky-700 rounded-md bg-sky-200">
+    <div class="flex flex-col gap-3 text-md">
+        <div>
+            文章作者：<a href="https://rrricardo.top" target="_blank" class="text-blue-600">Ricardo Ren</a>
        </div>

-        <div class="row p-1">
-            <div class="col">
-                文章地址：
-                <a href="/blog/essays/@(EssayAddress)" target="_blank">
-                    @($"https://rrricardo.top/blog/essays/{EssayAddress}")
-                </a>
-            </div>
+        <div>
+            文章地址：
+            <a href="/blog/essays/@(EssayFilename)" target="_blank" class="text-blue-600">
+                @($"https://rrricardo.top/blog/essays/{EssayFilename}")
+            </a>
        </div>

-        <div class="row p-1">
-            <div class="col">
-                版权声明：本博客所有文章除特别声明外，均采用
-                <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>
-                许可协议，转载请注明来自
-                <a href="https://rrricardo.top/blog/" target="_blank">Ricardo's Blog</a>。
-            </div>
+        <div>
+            版权声明：本博客所有文章除特别声明外，均采用
+            <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" class="text-blue-600">
+                CC BY-NC-SA 4.0
+            </a>
+            许可协议，诸位读者如有兴趣可任意转载，不必征询许可，但请注明“转载自
+            <a href="https://rrricardo.top/blog/" target="_blank" class="text-blue-600">
+                Ricardo's Blog
+            </a>”。
        </div>
    </div>
 </div>

@code
 {
-    [Parameter] public string? EssayAddress { get; set; }
+    [Parameter] public string? EssayFilename { get; set; }
 }
--- a/YaeBlog/Components/LicenseDisclaimer.razor.css
+++ b/YaeBlog/Components/LicenseDisclaimer.razor.css
@ -1,2 +0,0 @@
-.copyright {
-}
--- a/YaeBlog/Components/PageAnchor.razor
+++ b/YaeBlog/Components/PageAnchor.razor
@ -0,0 +1,22 @@
+@if (Selected)
+{
+    <div class="border rounded-lg shadow-neutral-500 bg-sky-400 w-8 h-8 inline-block leading-8 text-center">
+        <span class="text-white">@(Text)</span>
+    </div>
+}
+else
+{
+    <a href="@Address">
+        <div class="border rounded-lg shadow-neutral-500 w-8 h-8 inline-block leading-8 text-center">
+            <span>@(Text)</span>
+        </div>
+    </a>
+}
+
+@code {
+    [Parameter] public string? Address { get; set; }
+
+    [Parameter] public string? Text { get; set; }
+
+    [Parameter] public bool Selected { get; set; }
+}
--- a/YaeBlog/Components/Pagination.razor
+++ b/YaeBlog/Components/Pagination.razor
@ -0,0 +1,46 @@
+<div class="flex flex-row justify-center gap-3">
+    @if (Page != 1)
+    {
+        <PageAnchor Address="@GenerateAddress(Page - 1)" Text="<"/>
+    }
+
+    @if (Page == 1)
+    {
+        <PageAnchor Address="@GenerateAddress(1)" Text="1" Selected="@true"/>
+
+        <PageAnchor Address="@GenerateAddress(2)" Text="2"/>
+
+        <PageAnchor Address="@GenerateAddress(3)" Text="3"/>
+    }
+    else if (Page == PageCount)
+    {
+        <PageAnchor Address="@GenerateAddress(PageCount - 2)" Text="@($"{PageCount - 2}")"/>
+
+        <PageAnchor Address="@GenerateAddress(PageCount - 1)" Text="@($"{PageCount - 1}")"/>
+
+        <PageAnchor Address="@GenerateAddress(PageCount)" Text="@($"{PageCount}")" Selected="@true"/>
+    }
+    else
+    {
+        <PageAnchor Address="@GenerateAddress(Page - 1)" Text="@($"{Page - 1}")"/>
+
+        <PageAnchor Address="@GenerateAddress(Page)" Text="@($"{Page}")" Selected="@true"/>
+
+        <PageAnchor Address="@GenerateAddress(Page + 1)" Text="@($"{Page + 1}")"/>
+    }
+
+    @if (Page != PageCount)
+    {
+        <PageAnchor Address="@GenerateAddress(Page + 1)" Text=">"/>
+    }
+</div>
+
+@code {
+    [Parameter] public string? BaseUrl { get; set; }
+
+    [Parameter] public int PageCount { get; set; }
+
+    [Parameter] public int Page { get; set; }
+
+    private string GenerateAddress(int page) => $"{BaseUrl}?page={page}";
+}
--- a/YaeBlog/Exceptions/ProcessInteropException.cs
+++ b/YaeBlog/Exceptions/ProcessInteropException.cs
@ -1,12 +0,0 @@
-namespace YaeBlog.Core.Exceptions;
-
-public sealed class ProcessInteropException : Exception
-{
-    public ProcessInteropException(string message) : base(message)
-    {
-    }
-
-    public ProcessInteropException(string message, Exception innerException) : base(message, innerException)
-    {
-    }
-}
--- a/YaeBlog/Extensions/WebApplicationBuilderExtensions.cs
+++ b/YaeBlog/Extensions/WebApplicationBuilderExtensions.cs
@ -22,9 +22,8 @@ public static class WebApplicationBuilderExtensions
        builder.Services.AddSingleton<RendererService>();
        builder.Services.AddSingleton<IEssayContentService, EssayContentService>();
        builder.Services.AddTransient<ImagePostRenderProcessor>();
-        builder.Services.AddTransient<CodeBlockPostRenderProcessor>();
-        builder.Services.AddTransient<TablePostRenderProcessor>();
        builder.Services.AddTransient<HeadlinePostRenderProcessor>();
+        builder.Services.AddTransient<EssayStylesPostRenderProcessor>();
        builder.Services.AddTransient<BlogOptions>(provider =>
            provider.GetRequiredService<IOptions<BlogOptions>>().Value);

@ -45,13 +44,4 @@ public static class WebApplicationBuilderExtensions

        return builder;
    }
-
-    public static WebApplicationBuilder AddTailwindWatcher(this WebApplicationBuilder builder)
-    {
-        builder.Services.AddSingleton<ProcessInteropService>();
-        builder.Services.Configure<TailwindOptions>(builder.Configuration.GetSection(TailwindOptions.OptionName));
-        builder.Services.AddHostedService<TailwindRefreshService>();
-
-        return builder;
-    }
 }
--- a/YaeBlog/Extensions/WebApplicationExtensions.cs
+++ b/YaeBlog/Extensions/WebApplicationExtensions.cs
@ -9,9 +9,8 @@ public static class WebApplicationExtensions
    public static void UseYaeBlog(this WebApplication application)
    {
        application.UsePostRenderProcessor<ImagePostRenderProcessor>();
-        application.UsePostRenderProcessor<CodeBlockPostRenderProcessor>();
-        application.UsePostRenderProcessor<TablePostRenderProcessor>();
        application.UsePostRenderProcessor<HeadlinePostRenderProcessor>();
+        application.UsePostRenderProcessor<EssayStylesPostRenderProcessor>();
    }

    private static void UsePreRenderProcessor<T>(this WebApplication application) where T : IPreRenderProcessor
--- a/YaeBlog/Layout/BlogLayout.razor
+++ b/YaeBlog/Layout/BlogLayout.razor
@ -2,41 +2,41 @@

@attribute [StreamRendering]

-<main class="container mx-auto">
+<main class="container mx-auto flex flex-col min-h-screen">
    <div class="grid grid-cols-3 mx-3">
-        <div class="md:col-span-2 col-span-3 my-6">
+        <div class="md:col-span-2 col-span-3 h-20 flex items-center">
            <a href="/blog/">
                <span class="text-blue-600 text-2xl">Ricardo's Blog</span>
            </a>
        </div>

-        <div class="md:col-span-1 col-span-3 my-6">
-            <div class="flex flex-row">
-                <div class="px-2 ">
-                    <a href="/blog/">
-                        <span class="text-xl text-blue-600">首页</span>
-                    </a>
-                </div>
-                <div class="px-2 ">
+        <div class="md:col-span-1 col-span-3 h-20 flex items-center">
+            <div class="flex flex-row w-full px-2 gap-3 md:justify-center justify-end">
+                <div>
                    <a href="/blog/archives/">
                        <span class="text-xl text-blue-600">归档</span>
                    </a>
                </div>
-                <div class="px-2 ">
+                <div>
                    <a href="/blog/tags/">
                        <span class="text-xl text-blue-600">标签</span>
                    </a>
                </div>
-                <div class="px-2 ">
-                    <a href="/blog/about/">
+                <div>
+                    <a href="/about/" target="_blank">
                        <span class="text-xl text-blue-600">关于</span>
                    </a>
                </div>
+                <div>
+                    <a href="/friends/" target="_blank">
+                        <span class="text-xl text-blue-600">友链</span>
+                    </a>
+                </div>
            </div>
        </div>
    </div>

-    <div class="px-4 py-2">
+    <div class="px-4 py-2 flex-grow">
        @Body
    </div>

--- a/YaeBlog/Layout/BlogLayout.razor.css
+++ b/YaeBlog/Layout/BlogLayout.razor.css
--- a/YaeBlog/Layout/MainLayout.razor
+++ b/YaeBlog/Layout/MainLayout.razor
@ -1,22 +1,34 @@
@inherits LayoutComponentBase

-<main class="container mx-auto">
-    <div class="flex flex-row h-20">
-        <div class="px-2 basis-3/4">
-            <a href="/" class="text-2xl p-2">
+<main class="container mx-auto min-h-screen flex flex-col">
+    <div class="grid grid-cols-4">
+        <div class="px-2 md:col-span-3 col-span-4 h-20 flex items-center">
+            <a href="/" class="text-2xl">
                <h4 class="text-blue-600">Ricardo's Index</h4>
            </a>
-            <h1></h1>
        </div>

-        <div class="basis-1/4">
-            <a href="mailto://shicangjuner@outlook.com" class="p-2 text-xl" target="_blank">
-                <h5 class="text-blue-600">E-mail</h5>
-            </a>
+        <div class="md:col-span-1 col-span-4 h-20 flex items-center">
+            <div class="flex flex-row w-full px-2 md:justify-center justify-end text-xl gap-3">
+                <Anchor
+                    Address="/blog/"
+                    Text="博客"
+                    NewPage="@(true)"/>
+
+                <Anchor
+                    Address="/about/"
+                    Text="关于"
+                    NewPage="@(true)"/>
+
+                <Anchor
+                    Address="/friends"
+                    Text="友链"
+                    NewPage="@(true)"/>
+            </div>
        </div>
    </div>

-    <div class="px-4 mx-auto">
+    <div class="px-4 mx-auto flex-grow">
        <div class="py-2">
            @Body
        </div>
--- a/YaeBlog/Layout/MainLayout.razor.css
+++ b/YaeBlog/Layout/MainLayout.razor.css
@ -1,8 +0,0 @@
-.center {
-    margin: 0 auto;
-    max-width: 48em;
-    min-height: calc(100vh - 80px);
-    position: relative;
-    display: flex;
-    flex-direction: column;
-}
--- a/YaeBlog/Models/AboutInfo.cs
+++ b/YaeBlog/Models/AboutInfo.cs
@ -1,10 +0,0 @@
-namespace YaeBlog.Models;
-
-public class AboutInfo
-{
-    public required string Introduction { get; set; }
-
-    public required string Description { get; set; }
-
-    public required string AvatarImage { get; set; }
-}
--- a/YaeBlog/Models/BlogContent.cs
+++ b/YaeBlog/Models/BlogContent.cs
@ -7,4 +7,6 @@ public class BlogContent
    public required MarkdownMetadata Metadata { get; init; }

    public required string FileContent { get; set; }
+
+    public bool IsDraft { get; set; } = false;
 }
--- a/YaeBlog/Models/BlogEssay.cs
+++ b/YaeBlog/Models/BlogEssay.cs
@ -6,6 +6,8 @@ public class BlogEssay : IComparable<BlogEssay>

    public required string FileName { get; init; }

+    public required bool IsDraft { get; init; }
+
    public required DateTime PublishTime { get; init; }

    public required string Description { get; init; }
@ -24,6 +26,7 @@ public class BlogEssay : IComparable<BlogEssay>
        {
            Title = Title,
            FileName = FileName,
+            IsDraft = IsDraft,
            PublishTime = PublishTime,
            Description = Description,
            WordCount = WordCount,
@ -39,10 +42,16 @@ public class BlogEssay : IComparable<BlogEssay>
    {
        if (other is null)
        {
-            return 1;
+            return -1;
        }

-        return PublishTime.CompareTo(other.PublishTime);
+        // 草稿文章应当排在前面
+        if (IsDraft != other.IsDraft)
+        {
+            return IsDraft ? -1 : 1;
+        }
+
+        return other.PublishTime.CompareTo(PublishTime);
    }

    public override string ToString()
--- a/YaeBlog/Models/TailwindOptions.cs
+++ b/YaeBlog/Models/TailwindOptions.cs
@ -1,10 +0,0 @@
-namespace YaeBlog.Models;
-
-public class TailwindOptions
-{
-    public const string OptionName = "Tailwind";
-
-    public required string InputFile { get; set; }
-
-    public required string OutputFile { get; set; }
-}
--- a/YaeBlog/Pages/About.razor
+++ b/YaeBlog/Pages/About.razor
@ -1,141 +1,74 @@
-@page "/blog/about"
-@using YaeBlog.Models
-
-@inject BlogOptions Options
+@page "/about"

 <PageTitle>
    关于
 </PageTitle>

-<div class="container">
-    <div class="row">
-        <div class="col">
-            <h1>关于</h1>
-        </div>
+<div class="flex flex-col">
+    <div>
+        <h1 class="text-4xl">关于</h1>
    </div>

-    <div class="row">
-        <div class="col fst-italic py-2">
-            把字刻在石头上！(･’ω’･)
-        </div>
+    <div class="py-4">
+        <span class="italic">把字刻在石头上！(･’ω’･)</span>
    </div>

-    <div class="row p-2">
-        <div class="col">
-            <div class="row">
-                <div class="col">
-                    <h3>关于我</h3>
-                </div>
+    <div class="flex flex-col p-2">
+        <div class="flex flex-col p-2">
+            <div class="pb-2">
+                <h3 class="text-2xl">关于我</h3>
            </div>

-            <div class="row py-2">
-                <div class="col">
-                    计算机科学与技术在读大学生，明光村幼儿园附属大学所属。正处于读书和失业的叠加态。
-                    一般在互联网上使用<span class="fst-italic">初冬的朝阳</span>或者<span class="fst-italic">jackfiled</span>的名字活动。
-                    <span class="text-decoration-line-through">都是ICP备案过的人了，网名似乎没有太大的用处（</span>
-                </div>
+            <div class="py-2">
+                计算机科学与技术在读大学生，明光村幼儿园附属大学所属。正处于读书和失业的叠加态。
+                一般在互联网上使用<span class="italic">初冬的朝阳</span>或者<span class="italic">jackfiled</span>的名字活动。
+                <span class="line-through">都是ICP备案过的人了，网名似乎没有太大的用处（</span>
            </div>

-            <div class="row py-2">
-                <div class="col">
-                    主要是一个C#程序员，目前也在尝试写一点Rust。
-                    总体上对于编程语言的态度是“<span>大家都是我的翅膀.jpg</span>”。
-                    前后端分离的项目本当上手。
-                    常常因为现实的压力而写一些C/C++。
-                    <span class="text-decoration-line-through">对于Java和Go的评价很低。</span>
-                    日常使用ArchLinux。
-                </div>
+            <div class="py-2">
+                主要是一个C#程序员，目前也在尝试写一点Rust。
+                总体上对于编程语言的态度是“<span>大家都是我的翅膀.jpg</span>”。
+                前后端分离的项目本当上手。
+                常常因为现实的压力而写一些C/C++。
+                <span class="line-through">对于Java和Go的评价很低。</span>
+                日常使用ArchLinux。
            </div>

-            <div class="row py-2">
-                <div class="col">
-                    100%社恐。日常生活是宅在电脑前面自言自语。兴趣活动是读书和看番。
-                </div>
+            <div class="py-2">
+                100%社恐。日常生活是宅在电脑前面自言自语。
+                兴趣活动是读书和看番，目前在玩原神和三角洲。
            </div>

-            <div class="row py-2">
-                <div class="col">
-                    常常被人批评没有梦想，这里就随便瞎编一下。
-                    成为嵌入式工程师，修好桌面上的<a href="https://www.bilibili.com/video/BV1VA411p7MD">HoloCubic</a>。
-                    完成第一个不是课程设计的个人开源项目。
-                    遇到能够搭伙过日子的人也算是一大梦想，虽然社恐人根本不知道从何开始的说，
-                    <span class="text-decoration-line-through">什么时候天上才能掉美少女？</span>
-                </div>
+            <div class="py-4">
+                常常被人批评没有梦想，这里就随便瞎编一下。
+                成为嵌入式工程师，修好桌面上的<a href="https://www.bilibili.com/video/BV1VA411p7MD">HoloCubic</a>。
+                完成第一个不是课程设计的个人开源项目。
+                遇到能够搭伙过日子的人也算是一大梦想，虽然社恐人根本不知道从何开始的说，
+                <span class="line-through">什么时候天上才能掉美少女？</span>
            </div>

-            <div class="row py-2">
-                <div class="col">
-                    公开的联系渠道是<a href="mailto:shicangjuner@outlook.com">电子邮件</a>。
-                    也可以试试在各大平台搜索上面提到的名字。
-                </div>
+            <div class="py-2">
+                公开的联系渠道是<a href="mailto:shicangjuner@outlook.com">电子邮件</a>。
+                也可以试试在各大平台搜索上面提到的名字。
            </div>
        </div>
-    </div>

-    <div class="row p-2">
-        <div class="col">
-            <div class="row">
-                <div class="col">
-                    <h3>关于本站</h3>
-                </div>
+        <div class="flex flex-col p-2">
+            <div class="pb-2">
+                <h3 class="text-2xl">关于本站</h3>
            </div>

-            <div class="row py-2">
-                <div class="col">
-                    本站肇始于2021年下半年，在开始的两年中个人网站和博客是分别的两个网站，个人网站是裸HTML写的，博客是用
-                    <a href="https://hexo.io">Hexo</a>渲染的。
-                </div>
+            <div class="py-2">
+                本站肇始于2021年下半年，在开始的两年中个人网站和博客是分别的两个网站，个人网站是裸HTML写的，博客是用
+                <a href="https://hexo.io">Hexo</a>渲染的。
            </div>

-            <div class="row py-2">
-                <div class="col">
-                    2024年，我们决定使用.NET技术完全重构两个网站，合二为一。虽然目前这个版本还是一个半成品，但是我们一定会努力的~（确信。
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <div class="row p-2">
-        <div class="col">
-            <div class="row">
-                <div class="col">
-                    <h3>友链</h3>
-                </div>
+            <div class="py-2">
+                2024年，我们决定使用.NET技术完全重构两个网站，合二为一。虽然目前这个版本还是一个半成品，但是我们一定会努力的~（确信。
            </div>

-            <div class="row py-2">
-                <div class="col fst-italic">
-                    欢迎所有人联系我添加友链！(´｡✪ω✪｡｀)
-                </div>
-            </div>
-
-            <div class="row py-2">
-                @foreach (FriendLink link in Options.Links)
-                {
-                    <div class="col-sm-12 col-md-4 col-lg-3">
-                        <a href="@(link.Link)" target="_blank" class="m-3">
-                            <div class="row link-item">
-                                <div class="col-4">
-                                    @* <Image Src="@(link.AvatarImage)" Alt="@(link.Name)" Style="border-radius: 50%"/> *@
-                                </div>
-
-                                <div class="col-8">
-                                    <div class="row">
-                                        <div class="col-auto fs-5">
-                                            @(link.Name)
-                                        </div>
-                                    </div>
-
-                                    <div class="row">
-                                        <div class="col-auto fst-italic">
-                                            @(link.Description)
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </a>
-                    </div>
-                }
+            <div class="py-2">
+                2025年，我们将使用的样式库从Bootstrap迁移到Tailwind CSS，将现代的前端技术同Blazor结合起来。
            </div>
        </div>
    </div>
--- a/YaeBlog/Pages/About.razor.css
+++ b/YaeBlog/Pages/About.razor.css
@ -1,8 +0,0 @@
-.link-item {
-    padding: 1rem;
-    border-radius: 4px;
-}
-
-.link-item:hover {
-    background-color: var(--bs-secondary-bg);
-}
--- a/YaeBlog/Pages/Archives.razor
+++ b/YaeBlog/Pages/Archives.razor
@ -8,68 +8,56 @@
    归档
 </PageTitle>

-<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 class="flex flex-col">
+    <div>
+        <h1 class="text-4xl">归档</h1>
    </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="py-4">
+        <span class="italic">
+            时光图书馆，黑历史集散地。(๑◔‿◔๑)
+        </span>
+    </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"))
+    @foreach (IGrouping<DateTime, BlogEssay> group in _essays)
+    {
+        <div class="p-2">
+            <div class="flex flex-col">
+                <div>
+                    <h3 class="text-xl">@(group.Key.Year)</h3>
+                </div>
+
+                <div class="px-4 py-4 flex flex-col">
+                    @foreach (BlogEssay essay in group)
+                    {
+                        <a target="_blank" href="@($"/blog/essays/{essay.FileName}")">
+                            <div class="flex flex-row p-2 mx-1 rounded-lg hover:bg-gray-300">
+                                <div class="w-20">
+                                    @(essay.PublishTime.ToString("MM月dd日"))
                                </div>

-                                <div class="col-auto">
-                                    <a href="/blog/essays/@(essay.Key)">
-                                        @(essay.Value.Title)
-                                    </a>
+                                <div>
+                                    <span class="text-blue-600">
+                                        @(essay.Title)
+                                    </span>
                                </div>
                            </div>
-                        }
-                    </div>
+                        </a>
+                    }
                </div>
            </div>
        </div>
    }
-
 </div>

@code {
-    private readonly List<IGrouping<DateTime, KeyValuePair<string, BlogEssay>>> _essays = [];
+    private readonly List<IGrouping<DateTime, BlogEssay>> _essays = [];

    protected override void OnInitialized()
    {
        base.OnInitialized();

        _essays.AddRange(from essay in Contents.Essays
-            orderby essay.Value.PublishTime descending
-            group essay by new DateTime(essay.Value.PublishTime.Year, 1, 1));
+            group essay by new DateTime(essay.PublishTime.Year, 1, 1));
    }
 }
--- a/YaeBlog/Pages/Archives.razor.css
+++ b/YaeBlog/Pages/Archives.razor.css
--- a/YaeBlog/Pages/BlogIndex.razor
+++ b/YaeBlog/Pages/BlogIndex.razor
@ -9,79 +9,18 @@
    Ricardo's Blog
 </PageTitle>

-<div class="container">
-    <div class="row">
-        <div class="col-sm-12 col-md-9">
-            @foreach (KeyValuePair<string, BlogEssay> pair in _essays)
+<div>
+    <div class="grid grid-cols-4">
+        <div class="col-span-4 md:col-span-3">
+            @foreach (BlogEssay essay in _essays)
            {
-                <EssayCard Essay="@(pair.Value)"/>
+                <EssayCard Essay="@(essay)"/>
            }

-            <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">
-                        1
-                    </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">
-                        @(_pageCount)
-                    </div>
-                }
-                else
-                {
-                    <div class="col-auto">
-                        <a href="/blog/?page=@(_page - 1)">@(_page - 1)</a>
-                    </div>
-                    <div class="col-auto">
-                        @(_page)
-                    </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>
+            <Pagination BaseUrl="/blog/" Page="_page" PageCount="_pageCount"/>
        </div>

-        <div class="col-sm-12 col-md-3">
+        <div class="col-span-4 md:col-span-1">
            <BlogInformationCard/>
        </div>
    </div>
@ -91,7 +30,7 @@

    [SupplyParameterFromQuery] private int? Page { get; set; }

-    private readonly List<KeyValuePair<string, BlogEssay>> _essays = [];
+    private readonly List<BlogEssay> _essays = [];
    private const int EssaysPerPage = 8;
    private int _pageCount = 1;
    private int _page = 1;
@ -99,16 +38,15 @@
    protected override void OnInitialized()
    {
        _page = Page ?? 1;
-        _pageCount = Contents.Essays.Count / EssaysPerPage + 1;
+        _pageCount = Contents.Count / EssaysPerPage + 1;

-        if (EssaysPerPage * _page > Contents.Essays.Count + EssaysPerPage)
+        if (EssaysPerPage * _page > Contents.Count + EssaysPerPage)
        {
            NavigationInstance.NavigateTo("/NotFount");
            return;
        }

        _essays.AddRange(Contents.Essays
-            .OrderByDescending(p => p.Value.PublishTime)
            .Skip((_page - 1) * EssaysPerPage)
            .Take(EssaysPerPage));
    }
--- a/YaeBlog/Pages/BlogIndex.razor.css
+++ b/YaeBlog/Pages/BlogIndex.razor.css
@ -1,7 +0,0 @@
-.essay-title a {
-    color: var(--bs-body-color);
-}
-
-.read-more a {
-    color: var(--bs-body-color);
-}
--- a/YaeBlog/Pages/Essays.razor
+++ b/YaeBlog/Pages/Essays.razor
@ -10,96 +10,87 @@
    @(_essay!.Title)
 </PageTitle>

-<div class="container py-4">
-    <div class="row">
+<div class="flex flex-col py-8">
+    <div>
+        <h1 id="title" class="text-4xl">@(_essay!.Title)</h1>
        <div class="col-auto">
-            <h1 id="title">@(_essay!.Title)</h1>
        </div>
    </div>

-    <div class="row px-4 py-1">
-        <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="/blog/tags/?tagName=@(UrlEncoder.Default.Encode(tag))">
-                    # @(tag)
-                </a>
+    <div class="px-6 pt-4 pb-2">
+        <div class="flex flex-row gap-4">
+            <div class="font-light">
+                @(_essay!.PublishTime.ToString("yyyy-MM-dd"))
            </div>
-        }
+
+            @foreach (string tag in _essay!.Tags)
+            {
+                <div class="text-sky-500">
+                    <a href="/blog/tags/?tagName=@(UrlEncoder.Default.Encode(tag))">
+                        # @(tag)
+                    </a>
+                </div>
+            }
+        </div>
    </div>

-    <div class="row px-4 py-1">
-        <div class="col-auto fw-light">
+    <div class="px-6 pt-2 pb-4">
+        <div class="font-light">
            总字数：@(_essay!.WordCount)字，预计阅读时间 @(_essay!.ReadTime)。
        </div>
    </div>

-    <div class="row">
-        <div class="col-lg-8 col-md-12">
-            @((MarkupString)_essay!.HtmlContent)
+    <div class="grid grid-cols-3">
+        <div class="col-span-3 md:col-span-2 flex flex-col gap-3">
+            <div>
+                @((MarkupString)_essay!.HtmlContent)
+            </div>

-            <LicenseDisclaimer EssayAddress="@BlogKey"/>
+            <div>
+                <LicenseDisclaimer EssayFilename="@BlogKey"/>
+            </div>
        </div>

-        <div class="col-lg-4 col-md-12">
-            <div class="row sticky-lg-top justify-content-center">
-                <div class="col-auto">
-                    <div class="row">
-                        <div class="col-auto">
-                            <h3 style="margin-block-start: 1em; margin-block-end: 0.5em">
-                                文章目录
-                            </h3>
-                        </div>
-                    </div>
+        <div class="col-span-3 md:col-span-1">
+            <div class="flex flex-col sticky top-0 px-8">
+                <div>
+                    <h3 class="text-2xl">文章目录</h3>
+                </div>

-                    <div class="row" style="padding-left: 10px">
-                        <div class="col-auto">
-                            @foreach (BlogHeadline level2 in _headline!.Children)
-                            {
-                                <div class="row py-1">
-                                    <div class="col-auto">
-                                        <a href="@(GenerateSelectorUrl(level2.SelectorId))">@(level2.Title)</a>
-                                    </div>
-                                </div>
-
-                                @foreach (BlogHeadline level3 in level2.Children)
-                                {
-                                    <div class="row py-1">
-                                        <div class="col-auto">
-                                            <a style="padding-left: 20px" href="@GenerateSelectorUrl(level3.SelectorId)">
-                                                @(level3.Title)
-                                            </a>
-                                        </div>
-                                    </div>
-
-                                    @foreach (BlogHeadline level4 in level3.Children)
-                                    {
-                                        <div class="row py-1">
-                                            <div class="col-auto">
-                                                <a style="padding-left: 40px" href="@(GenerateSelectorUrl(level4.SelectorId))">
-                                                    @(level4.Title)
-                                                </a>
-                                            </div>
-                                        </div>
-                                    }
-                                }
-                            }
-                        </div>
-                    </div>
-
-                    @if (_headline!.Children.Count == 0)
+                <div>
+                    @foreach (BlogHeadline level2 in _headline!.Children)
                    {
-                        <div class="row">
-                            <div class="col fst-italic">
-                                坏了(* Ŏ∀Ŏ)，没有在文章中识别到目录
-                            </div>
+                        <div class="py-2 pl-3">
+                            <Anchor Address="@(GenerateSelectorUrl(level2.SelectorId))"
+                                    Text="@(level2.Title)"/>
                        </div>
+
+                        @foreach (BlogHeadline level3 in level2.Children)
+                        {
+                            <div class="py-2 pl-6">
+                                <Anchor Address="@(GenerateSelectorUrl(level3.SelectorId))"
+                                        Text="@(level3.Title)"/>
+                            </div>
+
+                            @foreach (BlogHeadline level4 in level3.Children)
+                            {
+                                <div class="py-2 pl-9">
+                                    <Anchor Address="@(GenerateSelectorUrl(level4.SelectorId))"
+                                            Text="@(level4.Title)"/>
+                                </div>
+                            }
+                        }
                    }
                </div>
+
+                @if (_headline!.Children.Count == 0)
+                {
+                    <div class="row">
+                        <div class="col fst-italic">
+                            坏了(* Ŏ∀Ŏ)，没有在文章中识别到目录
+                        </div>
+                    </div>
+                }
            </div>
        </div>
    </div>
@ -123,7 +114,7 @@
            return;
        }

-        if (!Contents.Essays.TryGetValue(BlogKey, out _essay))
+        if (!Contents.TryGetEssay(BlogKey, out _essay))
        {
            NavigationInstance.NavigateTo("/NotFound");
        }
--- a/YaeBlog/Pages/Essays.razor.css
+++ b/YaeBlog/Pages/Essays.razor.css
--- a/YaeBlog/Pages/Friends.razor
+++ b/YaeBlog/Pages/Friends.razor
@ -0,0 +1,49 @@
+@page "/friends"
+@using YaeBlog.Models
+@inject BlogOptions Options
+
+<PageTitle>
+    友链
+</PageTitle>
+
+<div class="flex flex-col">
+    <div>
+        <h1 class="text-4xl">
+            友链
+        </h1>
+    </div>
+
+    <div class="py-4">
+        欢迎所有人联系我添加友链！(´｡✪ω✪｡｀)
+    </div>
+
+    <div class="grid grid-cols-4 g-4 p-2">
+        @foreach (FriendLink link in Options.Links)
+        {
+            <div>
+                <a href="@(link.Link)" target="_blank" class="mx-5">
+                    <div class="flex flex-row">
+                        <div class="basis-1/3">
+                            <img src="@(link.AvatarImage)" alt="@($"Avatar of {link.Name}")"
+                                 class="w-full h-auto rounded-full">
+                        </div>
+
+                        <div class="flex flex-col basis-2/3 px-2">
+                            <div class="text-lg">
+                                @(link.Name)
+                            </div>
+
+                            <div class="text-sm italic">
+                                @(link.Description)
+                            </div>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        }
+    </div>
+</div>
+
+@code {
+
+}
--- a/YaeBlog/Pages/Index.razor
+++ b/YaeBlog/Pages/Index.razor
@ -4,28 +4,28 @@
    Ricardo's Index
 </PageTitle>

-<div class="container">
-    <div class="row py-4">
-        <div class="col-lg-4 col-12 p-5 p-lg-0">
-            @* <Image Src="images/avatar.png" Alt="Ricardo's Avatar"/> *@
+<div class="mx-20">
+    <div class="grid grid-cols-3 py-4">
+        <div class="col-span-3 md:col-span-1 p-5 p-lg-0">
+            <img src="images/avatar.png" alt="Ricardo's Avatar" class="h-auto max-w-full">
        </div>

-        <div class="col-lg-8 col-12">
-            <div class="container px-3">
-                <div class="row">
-                    <h4 class="fw-bold">初冬的朝阳 (Ricardo Ren)</h4>
+        <div class="col-span-3 md:col-span-2">
+            <div class="flex flex-col px-3 gap-y-3">
+                <div class="">
+                    <div class="text-3xl font-bold">初冬的朝阳 (Ricardo Ren)</div>
                </div>

-                <div class="row">
-                    <p class="fs-5">a.k.a jackfiled</p>
+                <div class="">
+                    <p class="text-lg">a.k.a jackfiled</p>
                </div>

-                <div class="row">
-                    <p class="fs-5 fst-italic">世界很大，时间很长。</p>
+                <div class="">
+                    <p class="text-lg italic">世界很大，时间很长。</p>
                </div>

-                <div class="row">
-                    <p class="fs-5">
+                <div class="">
+                    <p class="text-lg">
                        平平无奇的计算机科学与技术学徒，连微小的贡献都没做。
                    </p>
                </div>
@ -33,20 +33,22 @@
        </div>
    </div>

-    <div class="row" style="padding-top: 80px">
-        <p class="fs-5">恕我不能亲自为您沏茶（？），还是非常欢迎您能够来到我的主页。</p>
+    <div class="py-5">
+        <p class="text-lg">恕我不能亲自为您沏茶（？），还是非常欢迎您能够来到我的主页。</p>
    </div>

-    <div class="row">
-        <p class="fs-5">
-            如果您想四处看看，了解一下屏幕对面的人，可以在我的 <a href="/blog/">博客</a> 看看。
+    <div>
+        <p class="text-lg py-1">
+            如果您想四处看看，了解一下屏幕对面的人，可以在我的 <Anchor Address="/blog/" Text="博客"/> 看看。
            如果您对于明光村幼儿园某附属技校的计算机教学感兴趣，您可以移步到
-            <a href="https://jackfiled.github.io/wiki/">我的学习笔记</a>，
+            <Anchor Address="https://jackfiled.github.io/wiki/" Text="我的学习笔记"/>，
            <span class="fs-5 text-decoration-line-through">虽然这笔记我自己也木有看过。</span>
-            如果您想批判一下我的代码，在 <a href="https://github.com/jackfiled" target="_blank">Github</a> 和
-            <a href="https://git.rrricardo.top/jackfiled/" target="_blank">Gitea</a> 都可以找到。
+            如果您想批判一下我的代码，在
+            <Anchor Address="https://github.com/jackfiled/" Text="Github"/> 和
+            <Anchor Address="https://git.rrricardo.top/jackfiled/" Text="Gitea"/>
+            都可以找到。
        </p>
-        <p class="fs-5">
+        <p class="text-lg py-1">
            如果您真的很闲，也可以四处搜寻一下，也许存在着一些不为人知的彩蛋。
        </p>
    </div>
--- a/YaeBlog/Pages/Index.razor.css
+++ b/YaeBlog/Pages/Index.razor.css
--- a/YaeBlog/Pages/NotFound.razor
+++ b/YaeBlog/Pages/NotFound.razor
@ -4,8 +4,8 @@
    啊~ 页面走丢啦~
 </PageTitle>

-<div class="container">
-    <h3>NotFound!</h3>
+<div>
+    <h3 class="text-3xl">NotFound!</h3>
 </div>

@code {
--- a/YaeBlog/Pages/NotFound.razor.css
+++ b/YaeBlog/Pages/NotFound.razor.css
--- a/YaeBlog/Pages/Tags.razor
+++ b/YaeBlog/Pages/Tags.razor
@ -10,24 +10,22 @@
    @(TagName ?? "标签")
 </PageTitle>

-<div class="container">
-    <div class="row">
-        <div class="col">
-            @if (TagName is null)
-            {
-                <h1>标签</h1>
-            }
-            else
-            {
-                <h2>@(TagName)</h2>
-            }
-        </div>
+<div class="flex flex-col">
+    <div>
+        @if (TagName is null)
+        {
+            <h1 class="text-4xl">标签</h1>
+        }
+        else
+        {
+            <h2 class="text-2xl">@(TagName)</h2>
+        }
    </div>

-    <div class="row">
-        <div class="col fst-italic py-4">
+    <div class="py-4">
+        <span class="italic">
            在野外游荡的指针，走向未知的方向。٩(๑˃̵ᴗ˂̵๑)۶
-        </div>
+        </span>
    </div>

    @if (TagName is null)
@ -38,19 +36,17 @@
                          Contents.Tags.OrderByDescending(pair => pair.Value.Count))
                {
                    <li class="p-2">
-                        <a href="/blog/tags/?tagName=@(pair.Key.UrlEncodedTagName)">
-                            <div class="container fs-5">
-                                <div class="row">
-                                    <div class="col-auto">
-                                        # @(pair.Key.TagName)
-                                    </div>
-
-                                    <div class="col-auto tag-count">
-                                        @(pair.Value.Count)
-                                    </div>
+                        <div class="flex flex-row">
+                            <a href="/blog/tags/?tagName=@(pair.Key.UrlEncodedTagName)">
+                                <div class="text-sky-600 text-lg">
+                                    # @(pair.Key.TagName)
                                </div>
+                            </a>
+
+                            <div class="mx-2 px-1 text-lg bg-gray-300 rounded-lg">
+                                @(pair.Value.Count)
                            </div>
-                        </a>
+                        </div>
                    </li>
                }
            </ul>
--- a/YaeBlog/Pages/Tags.razor.css
+++ b/YaeBlog/Pages/Tags.razor.css
@ -1,6 +0,0 @@
-.tag-count {
-    background: var(--bs-secondary-bg);
-    border-radius: 5px;
-    padding: 0 6px;
-}
-
--- a/YaeBlog/Processors/CodeBlockPostRenderProcessor.cs
+++ b/YaeBlog/Processors/CodeBlockPostRenderProcessor.cs
@ -1,29 +0,0 @@
-using AngleSharp;
-using AngleSharp.Dom;
-using YaeBlog.Abstraction;
-using YaeBlog.Models;
-
-namespace YaeBlog.Processors;
-
-public class CodeBlockPostRenderProcessor : IPostRenderProcessor
-{
-    public async Task<BlogEssay> ProcessAsync(BlogEssay essay)
-    {
-        BrowsingContext context = new(Configuration.Default);
-        IDocument document = await context.OpenAsync(
-            req => req.Content(essay.HtmlContent));
-
-        IEnumerable<IElement> preElements = from e in document.All
-            where e.LocalName == "pre"
-            select e;
-
-        foreach (IElement element in preElements)
-        {
-            element.ClassList.Add("p-3 text-bg-secondary rounded-1");
-        }
-
-        return essay.WithNewHtmlContent(document.DocumentElement.OuterHtml);
-    }
-
-    public string Name => nameof(CodeBlockPostRenderProcessor);
-}
--- a/YaeBlog/Processors/EssayStylesPostRenderProcessor.cs
+++ b/YaeBlog/Processors/EssayStylesPostRenderProcessor.cs
@ -0,0 +1,102 @@
+using AngleSharp;
+using AngleSharp.Dom;
+using YaeBlog.Abstraction;
+using YaeBlog.Models;
+
+namespace YaeBlog.Processors;
+
+/// <summary>
+/// 向渲染的HTML中插入Tailwind CSS的渲染后处理器
+/// </summary>
+public sealed class EssayStylesPostRenderProcessor : IPostRenderProcessor
+{
+    public string Name => nameof(EssayStylesPostRenderProcessor);
+
+    public async Task<BlogEssay> ProcessAsync(BlogEssay essay)
+    {
+        BrowsingContext context = new(Configuration.Default);
+        IDocument document = await context.OpenAsync(
+            req => req.Content(essay.HtmlContent));
+
+        ApplyGlobalCssStyles(document);
+        BeatifyTable(document);
+
+        return essay.WithNewHtmlContent(document.DocumentElement.OuterHtml);
+    }
+
+    private readonly Dictionary<string, string> _globalCssStyles = new()
+    {
+        { "pre", "p-4 bg-slate-300 rounded-sm overflow-x-auto" },
+        { "h2", "text-3xl font-bold py-4" },
+        { "h3", "text-2xl font-bold py-3" },
+        { "h4", "text-xl font-bold py-2" },
+        { "h5", "text-lg font-bold py-1" },
+        { "p", "p-2" },
+        { "img", "w-11/12 block mx-auto my-2 rounded-md shadow-md" },
+        { "ul", "list-disc pl-2" }
+    };
+
+    private void ApplyGlobalCssStyles(IDocument document)
+    {
+        foreach ((string tag, string style) in _globalCssStyles)
+        {
+            foreach (IElement element in document.GetElementsByTagName(tag))
+            {
+                element.ClassList.Add(style);
+            }
+        }
+    }
+
+    private static void BeatifyTable(IDocument document)
+    {
+        foreach (IElement element in from e in document.All
+                 where e.LocalName == "table"
+                 select e)
+        {
+            element.ClassList.Add("mx-auto border-collapse table-auto overflow-x-auto");
+
+            // thead元素
+            foreach (IElement headElement in from e in element.Children
+                     where e.LocalName == "thead"
+                     select e)
+            {
+                headElement.ClassList.Add("bg-slate-200");
+
+                // tr in thead
+                foreach (IElement trElement in from e in headElement.Children
+                         where e.LocalName == "tr"
+                         select e)
+                {
+                    trElement.ClassList.Add("border border-slate-300");
+
+                    // th in tr
+                    foreach (IElement thElement in from e in trElement.Children
+                             where e.LocalName == "th"
+                             select e)
+                    {
+                        thElement.ClassList.Add("px-4 py-1");
+                    }
+                }
+            }
+
+            // tbody元素
+            foreach (IElement bodyElement in from e in element.Children
+                     where e.LocalName == "tbody"
+                     select e)
+            {
+                // tr in tbody
+                foreach (IElement trElement in from e in bodyElement.Children
+                         where e.LocalName == "tr"
+                         select e)
+                {
+                    foreach (IElement tdElement in from e in trElement.Children
+                             where e.LocalName == "td"
+                             select e)
+                    {
+                        tdElement.ClassList.Add("px-4 py-1 border border-slate-300");
+                    }
+                }
+            }
+        }
+    }
+}
--- a/YaeBlog/Processors/ImagePostRenderProcessor.cs
+++ b/YaeBlog/Processors/ImagePostRenderProcessor.cs
@ -11,13 +11,11 @@ public class ImagePostRenderProcessor(ILogger<ImagePostRenderProcessor> logger,
    IOptions<BlogOptions> options)
    : IPostRenderProcessor
 {
-    private static readonly AngleSharp.IConfiguration s_configuration = Configuration.Default;
-
    private readonly BlogOptions _options = options.Value;

    public async Task<BlogEssay> ProcessAsync(BlogEssay essay)
    {
-        BrowsingContext context = new(s_configuration);
+        BrowsingContext context = new(Configuration.Default);
        IDocument html = await context.OpenAsync(
            req => req.Content(essay.HtmlContent));

@ -33,7 +31,6 @@ public class ImagePostRenderProcessor(ILogger<ImagePostRenderProcessor> logger,
                logger.LogDebug("Found image link: '{}'", attr.Value);
                attr.Value = GenerateImageLink(attr.Value, essay.FileName);
            }
-            element.ClassList.Add("essay-image");
        }
        return essay.WithNewHtmlContent(html.DocumentElement.OuterHtml);
    }
--- a/YaeBlog/Processors/TablePostRenderProcessor.cs
+++ b/YaeBlog/Processors/TablePostRenderProcessor.cs
@ -1,34 +0,0 @@
-using AngleSharp;
-using AngleSharp.Dom;
-using AngleSharp.Html.Dom;
-using YaeBlog.Abstraction;
-using YaeBlog.Models;
-
-namespace YaeBlog.Processors;
-
-public class TablePostRenderProcessor: IPostRenderProcessor
-{
-    public async Task<BlogEssay> ProcessAsync(BlogEssay essay)
-    {
-        BrowsingContext browsingContext = new(Configuration.Default);
-        IDocument document = await browsingContext.OpenAsync(
-            req => req.Content(essay.HtmlContent));
-
-        IEnumerable<IHtmlTableElement> tableElements = from item in document.All
-            where item.LocalName == "table"
-            select item as IHtmlTableElement;
-
-        foreach (IHtmlTableElement element in tableElements)
-        {
-            IHtmlDivElement divElement = document.CreateElement<IHtmlDivElement>();
-            divElement.InnerHtml = element.OuterHtml;
-            divElement.ClassList.Add("py-2", "table-wrapper");
-
-            element.Replace(divElement);
-        }
-
-        return essay.WithNewHtmlContent(document.DocumentElement.OuterHtml);
-    }
-
-    public string Name => nameof(TablePostRenderProcessor);
-}
--- a/YaeBlog/Services/BlogHostedService.cs
+++ b/YaeBlog/Services/BlogHostedService.cs
@ -6,14 +6,12 @@ public class BlogHostedService(
 {
    public async Task StartAsync(CancellationToken cancellationToken)
    {
-        logger.LogInformation("Welcome to YaeBlog!");
-
+        logger.LogInformation("Failed to load cache, render essays.");
        await rendererService.RenderAsync();
    }

    public Task StopAsync(CancellationToken cancellationToken)
    {
-        logger.LogInformation("YaeBlog stopped!\nHave a nice day!");
        return Task.CompletedTask;
    }
 }
--- a/YaeBlog/Services/BlogHotReloadService.cs
+++ b/YaeBlog/Services/BlogHotReloadService.cs
@ -10,24 +10,32 @@ public sealed class BlogHotReloadService(
 {
    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
-        logger.LogInformation("BlogHotReloadService is starting.");
+        logger.LogInformation("Hot reload is starting...");
+        logger.LogInformation("Change essays will lead to hot reload!");
+        logger.LogInformation("HINT: draft essays will be included.");

-        await rendererService.RenderAsync();
+        await rendererService.RenderAsync(true);

-        while (!stoppingToken.IsCancellationRequested)
+        Task[] reloadTasks = [FileWatchTask(stoppingToken)];
+        await Task.WhenAll(reloadTasks);
+    }
+
+    private async Task FileWatchTask(CancellationToken token)
+    {
+        while (!token.IsCancellationRequested)
        {
-            logger.LogDebug("Watching file changes...");
-            string? changFile = await watcher.WaitForChange(stoppingToken);
+            logger.LogInformation("Watching file changes...");
+            string? changeFile = await watcher.WaitForChange(token);

-            if (changFile is null)
+            if (changeFile is null)
            {
-                logger.LogInformation("BlogHotReloadService is stopping.");
+                logger.LogInformation("File watcher is stopping.");
                break;
            }

-            logger.LogInformation("{} changed, re-rendering.", changFile);
+            logger.LogInformation("{} changed, re-rendering.", changeFile);
            essayContentService.Clear();
-            await rendererService.RenderAsync();
+            await rendererService.RenderAsync(true);
        }
    }
 }
--- a/YaeBlog/Services/EssayContentService.cs
+++ b/YaeBlog/Services/EssayContentService.cs
@ -9,15 +9,28 @@ public class EssayContentService : IEssayContentService
 {
    private readonly ConcurrentDictionary<string, BlogEssay> _essays = new();

+    private readonly List<BlogEssay> _sortedEssays = [];
+
    private readonly Dictionary<EssayTag, List<BlogEssay>> _tags = [];

    private readonly ConcurrentDictionary<string, BlogHeadline> _headlines = new();

-    public bool TryAdd(BlogEssay essay) => _essays.TryAdd(essay.FileName, essay);
+    public bool TryAdd(BlogEssay essay)
+    {
+        _sortedEssays.Add(essay);
+        return _essays.TryAdd(essay.FileName, essay);
+    }

    public bool TryAddHeadline(string filename, BlogHeadline headline) => _headlines.TryAdd(filename, headline);

-    public IReadOnlyDictionary<string, BlogEssay> Essays => _essays;
+    public IEnumerable<BlogEssay> Essays => _sortedEssays;
+
+    public int Count => _sortedEssays.Count;
+
+    public bool TryGetEssay(string filename, [NotNullWhen(true)] out BlogEssay? essay)
+    {
+        return _essays.TryGetValue(filename, out essay);
+    }

    public IReadOnlyDictionary<EssayTag, List<BlogEssay>> Tags => _tags;

--- a/YaeBlog/Services/EssayScanService.cs
+++ b/YaeBlog/Services/EssayScanService.cs
@ -22,8 +22,8 @@ public partial class EssayScanService(
        ValidateDirectory(_blogOptions.Root, out DirectoryInfo drafts, out DirectoryInfo posts);

        return new BlogContents(
-            await ScanContentsInternal(drafts),
-            await ScanContentsInternal(posts));
+            await ScanContentsInternal(drafts, true),
+            await ScanContentsInternal(posts, false));
    }

    public async Task SaveBlogContent(BlogContent content, bool isDraft = true)
@ -60,7 +60,7 @@ public partial class EssayScanService(
        }
    }

-    private async Task<ConcurrentBag<BlogContent>> ScanContentsInternal(DirectoryInfo directory)
+    private async Task<ConcurrentBag<BlogContent>> ScanContentsInternal(DirectoryInfo directory, bool isDraft)
    {
        // 扫描以md结果的但是不是隐藏文件的文件
        IEnumerable<FileInfo> markdownFiles = from file in directory.EnumerateFiles()
@ -97,7 +97,8 @@ public partial class EssayScanService(

                    contents.Add(new BlogContent
                    {
-                        FileName = filename[..^3], Metadata = metadata, FileContent = content[(endPos + 3)..]
+                        FileName = filename[..^3], Metadata = metadata, FileContent = content[(endPos + 3)..],
+                        IsDraft = isDraft
                    });
                }
                catch (YamlException e)
--- a/YaeBlog/Services/ProcessInteropService.cs
+++ b/YaeBlog/Services/ProcessInteropService.cs
@ -1,65 +0,0 @@
-using System.Diagnostics;
-using System.Runtime.InteropServices;
-using YaeBlog.Core.Exceptions;
-
-namespace YaeBlog.Services;
-
-public class ProcessInteropService(ILogger<ProcessInteropService> logger)
-{
-    public Process StartProcess(string command, string arguments)
-    {
-        string commandName;
-        if (RuntimeInformation.IsOSPlatform(OSPlatform.Windows) && !command.EndsWith(".exe"))
-        {
-            commandName = command + ".exe";
-        }
-        else
-        {
-            commandName = command;
-        }
-
-        try
-        {
-            ProcessStartInfo startInfo = new()
-            {
-                FileName = commandName,
-                Arguments = arguments,
-                RedirectStandardOutput = true,
-                RedirectStandardError = true,
-                UseShellExecute = false,
-                CreateNoWindow = true
-            };
-
-            Process? process = Process.Start(startInfo);
-
-            if (process is null)
-            {
-                throw new ProcessInteropException(
-                    $"Failed to start process: {commandName}, the return process is null.");
-            }
-
-            process.OutputDataReceived += (_, data) =>
-            {
-                if (!string.IsNullOrEmpty(data.Data))
-                {
-                    logger.LogInformation("Receive output from process '{}': '{}'", commandName, data.Data);
-                }
-            };
-
-            process.ErrorDataReceived += (_, data) =>
-            {
-                if (!string.IsNullOrEmpty(data.Data))
-                {
-                    logger.LogWarning("Receive error from process '{}': '{}'", commandName, data.Data);
-                }
-            };
-
-            return process;
-        }
-        catch (Exception innerException)
-        {
-            throw new ProcessInteropException($"Failed to start process '{command}' with arguments '{arguments}",
-                innerException);
-        }
-    }
-}
--- a/YaeBlog/Services/RendererService.cs
+++ b/YaeBlog/Services/RendererService.cs
@ -21,40 +21,43 @@ public partial class RendererService(

    private readonly List<IPostRenderProcessor> _postRenderProcessors = [];

-    public async Task RenderAsync()
+    public async Task RenderAsync(bool includeDrafts = false)
    {
        _stopwatch.Start();
        logger.LogInformation("Render essays start.");

        BlogContents contents = await essayScanService.ScanContents();
        List<BlogContent> posts = contents.Posts.ToList();
+        if (includeDrafts)
+        {
+            posts.AddRange(contents.Drafts);
+        }
+
        IEnumerable<BlogContent> preProcessedContents = await PreProcess(posts);

        List<BlogEssay> essays = [];
-        await Task.Run(() =>
+        foreach (BlogContent content in preProcessedContents)
        {
-            foreach (BlogContent content in preProcessedContents)
+            uint wordCount = GetWordCount(content);
+            BlogEssay essay = new()
            {
-                uint wordCount = GetWordCount(content);
-                BlogEssay essay = new()
-                {
-                    Title = content.Metadata.Title ?? content.FileName,
-                    FileName = content.FileName,
-                    Description = GetDescription(content),
-                    WordCount = wordCount,
-                    ReadTime = CalculateReadTime(wordCount),
-                    PublishTime = content.Metadata.Date ?? DateTime.Now,
-                    HtmlContent = content.FileContent
-                };
+                Title = content.Metadata.Title ?? content.FileName,
+                FileName = content.FileName,
+                IsDraft = content.IsDraft,
+                Description = GetDescription(content),
+                WordCount = wordCount,
+                ReadTime = CalculateReadTime(wordCount),
+                PublishTime = content.Metadata.Date ?? DateTime.Now,
+                HtmlContent = content.FileContent
+            };

-                if (content.Metadata.Tags is not null)
-                {
-                    essay.Tags.AddRange(content.Metadata.Tags);
-                }
-
-                essays.Add(essay);
+            if (content.Metadata.Tags is not null)
+            {
+                essay.Tags.AddRange(content.Metadata.Tags);
            }
-        });
+
+            essays.Add(essay);
+        }

        ConcurrentBag<BlogEssay> postProcessEssays = [];
        Parallel.ForEach(essays, essay =>
@ -66,7 +69,16 @@ public partial class RendererService(
            logger.LogDebug("Render markdown file {}.", newEssay);
        });

-        await PostProcess(postProcessEssays);
+        IEnumerable<BlogEssay> postProcessedEssays = await PostProcess(postProcessEssays);
+
+        foreach (BlogEssay essay in postProcessedEssays)
+        {
+            if (!essayContentService.TryAdd(essay))
+            {
+                throw new BlogFileException($"There are at least two essays with filename '{essay.FileName}'.");
+            }
+        }
+
        essayContentService.RefreshTags();

        _stopwatch.Stop();
@ -117,8 +129,10 @@ public partial class RendererService(
        return processedContents;
    }

-    private async Task PostProcess(IEnumerable<BlogEssay> essays)
+    private async Task<IEnumerable<BlogEssay>> PostProcess(IEnumerable<BlogEssay> essays)
    {
+        ConcurrentBag<BlogEssay> processedContents = [];
+
        await Parallel.ForEachAsync(essays, async (essay, _) =>
        {
            foreach (IPostRenderProcessor processor in _postRenderProcessors)
@ -126,12 +140,13 @@ public partial class RendererService(
                essay = await processor.ProcessAsync(essay);
            }

-            if (!essayContentService.TryAdd(essay))
-            {
-                throw new BlogFileException(
-                    $"There are two essays with the same name: '{essay.FileName}'.");
-            }
+            processedContents.Add(essay);
        });
+
+        List<BlogEssay> result = processedContents.ToList();
+        result.Sort();
+
+        return result;
    }

    [GeneratedRegex(@"(?<!\\)[^\#\*_\-\+\`{}\[\]!~]+")]
--- a/YaeBlog/Services/TailwindRefreshService.cs
+++ b/YaeBlog/Services/TailwindRefreshService.cs
@ -1,46 +0,0 @@
-using System.Diagnostics;
-using Microsoft.Extensions.Options;
-using YaeBlog.Models;
-
-namespace YaeBlog.Services;
-
-/// <summary>
-/// 在应用程序运行的过程中启动Tailwind watch
-/// 在程序退出时自动结束进程
-/// 只在Development模式下启动
-/// </summary>
-public sealed class TailwindRefreshService(
-    IOptions<TailwindOptions> options,
-    ProcessInteropService processInteropService,
-    IHostEnvironment hostEnvironment,
-    ILogger<TailwindRefreshService> logger) : IHostedService, IDisposable
-{
-    private Process? _tailwindProcess;
-
-    public Task StartAsync(CancellationToken cancellationToken)
-    {
-        if (!hostEnvironment.IsDevelopment())
-        {
-            return Task.CompletedTask;
-        }
-
-        logger.LogInformation("Try to start tailwind watcher with input {} and output {}", options.Value.InputFile,
-            options.Value.OutputFile);
-
-        _tailwindProcess = processInteropService.StartProcess("pnpm",
-            $"tailwind -i {options.Value.InputFile} -o {options.Value.OutputFile} --watch");
-
-        return Task.CompletedTask;
-    }
-
-    public Task StopAsync(CancellationToken cancellationToken)
-    {
-        _tailwindProcess?.Kill();
-        return Task.CompletedTask;
-    }
-
-    public void Dispose()
-    {
-        _tailwindProcess?.Dispose();
-    }
-}
--- a/YaeBlog/YaeBlog.csproj
+++ b/YaeBlog/YaeBlog.csproj
@ -6,10 +6,6 @@
    <PackageReference Include="Markdig" Version="0.38.0"/>
    <PackageReference Include="YamlDotNet" Version="16.2.1"/>
  </ItemGroup>
-  
-  <ItemGroup>
-    <Watch Remove="**\*.razor~"/>
-  </ItemGroup>

  <PropertyGroup>
    <TargetFramework>net9.0</TargetFramework>
@ -17,11 +13,20 @@
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

-  <Target Name="PnpmInstall">
+  <Target Name="EnsurePnpmInstalled" BeforeTargets="Build">
+    <Message Importance="low" Text="Ensure pnpm is installed..."/>
+    <Exec Command="pnpm --version" ContinueOnError="true">
+      <Output TaskParameter="ExitCode" PropertyName="ErrorCode"/>
+    </Exec>
+
+    <Error Condition="$(ErrorCode) != 0" Text="Pnpm is not installed which is required for build."/>
+
+    <Message Importance="normal" Text="Installing pakages using pnpm..."/>
    <Exec Command="pnpm install"/>
  </Target>

-  <Target Name="TailwindGenerate" DependsOnTargets="PnpmInstall" BeforeTargets="BeforeBuild">
+  <Target Name="TailwindGenerate" AfterTargets="EnsurePnpmInstalled">
+    <Message Importance="normal" Text="Generate css files using tailwind..."/>
    <Exec Command="pnpm tailwind -i wwwroot/input.css -o wwwroot/output.css"/>
  </Target>

--- a/YaeBlog/source/posts/2024-final.md
+++ b/YaeBlog/source/posts/2024-final.md
@ -0,0 +1,89 @@
+---
+title: 2024年年终总结
+date: 2025-01-16T17:15:05.8634370+08:00
+tags:
+- 杂谈
+- 年终总结
+---
+
+欸，年终总结难道不是应该在新年当天发出吗，什么已经是新年第三天了？！
+
+然而年末偶遇流感病毒，头疼脑热强如怪物，拼尽全力也无法战胜。
+
+所以年终总结再次跳票，红豆泥私密马赛！
+
+<!--more-->
+
+### 压力
+
+本年度的第一个关键词，我会选择压力。这一年总是被不同的压力笼罩着，先是有形的压力，然后是无形的压力，在不同的时间阶段有着不同的来源。
+
+1月份起始的两周就是大三学年秋季学期的期末考试周，而鄙人在下不才我，在本学期面临着计算机科学四幻神的考验——老师不知所云之操作系统、抽象概念无法理解之编译原理、全英语授课之数据库系统原理和智商不够无法战胜之算法导论。挣扎在保研线上的我，刚刚被上一学期的离散数学（下）的~~75分~~74分和数据结构的79分拷打，面对着如此沉重的考试压力（加起来一共12学分呢），可耻的失眠了。
+
+过完年回来的三月份，就是同论文奋斗的一个月。虽然只是一篇6页的EI检索论文，但对于一个**纯洁**的本科生来说还是有点太困难了。这个过程就像是你先拉了一坨大的，然后在上面细细的涂上巧克力，在最后发表的过程中，需要在众人的面前大嚼这一坨东西，并且称赞“真是一道美食啊”！还没有开始的学术生涯就已经留下永恒的污点力（悲）。
+
+搞完论文的四月和五月则是和大作业搏斗的两个月。首先是无法战胜的“编译原理课程设计”，内容是设计一个Pascal-S到C语言的源到源编译器。这一大作业的主要压力来源是大作业本身的难度，直到最后提交的时候，全部95个测试点也没有能够完全通过，然而其他人在祖传代码上缝缝补补却过来，哭。虽然考虑到我们是全手写的编译器，没有使用任何的编译器构建工具，提出的解决方案也称不上是墨守成规，老师给了我一个还算是可以的分数，算是压力中的小小慰藉。
+
+然后是风波不断的软件工程大作业，明明只是一个相对简单的Web前后端开发，但是我们前后进行了三次验收才通过，一直拖到了学期的第16周。老师设计的联合验收制度给我们结结实实的上了一课，要求联合验收小组的不同前后端需要能够任意组合使用，导致我们为了适配另外一组的逻辑，几乎是把核心代码写了两遍。虽然我不喜欢在背后攻击别人，但是我不得不说，这一年中最有压力的时刻，往往不是自己的事情搞不定时，而是看着别人搞砸事情你却无能为力的时候。
+
+这两个月还夹杂这一个意义不明的专业实习，明明是计算机科学与技术专业的牛马，为什么会被中兴通讯的老师培训通信项目的项目管理？
+
+应付完上面这些杂七杂八的内容，便是本科生生涯中的最后三场考试：人称计算机领域的政治之《软件工程》，通信领域科普课程之《现代交换原理》和永远的神之《计算机系统结构》。
+
+不得不说《软件工程》，~~或者人们常说的肖概~~确实不愧于计算机领域的政治之称。毕竟政治的主要课题就是研究如何组织和动员人群以完成一个特定的目标，《软件工程》不过是将人员限制为了软件的开发人员，领域限制为了软件开发领域，基本的道理还是相通的。
+
+《现代交换原理》则是一门在现有的课程体系下非常尴尬的一门课程，显然这门课的保留还是为了凸显“计算机+通信”的学科特色，但是大量前置知识的缺失和同其他课程的脱节使得这门课就显得非常的“脱节”。而且相对来说，通信技术的发展速度远远不如互联网的迭代技术，这门课也被同学们戏称为“古代交换原理”。令人最难受的，虽然知识古代，但是却一点都不简单，很多内容只能说是听了个概念，幸好最后的考试不难，靠死记硬背通过了考试。
+
+《计算机系统结构》就是核心课中的核心课了。课程内容和《计算机组成原理》衔接的非常紧密，~~虽然我组成原理就学的很垃圾~~，主要围绕着如何最大限度的并行化运行程序进行，从指令级的并行一直到多机并行，可以说是压力最大的一门考试。在准备的过程中做了很多套往年题，博客上也发布了一部分的复习笔记，最终幸好低空飞过。唯一的吐槽是实验什么时候可以从MIPS改成为RISC-V呢。
+
+三门课的考试一结束，这些死线明确的、有形的压力便消失了，但是无形的压力——对于是否能保研的焦虑——便笼罩下来。
+
+7月和8月都是在这种不安和恐慌中度过，这种氛围在9月份保研名单出炉之前达到了顶峰。保研的流程开始之后则是通知推着人走，各种交材料，各种准备答辩，各种等待公示，直到最后的保研名单出炉。
+
+不过现在回想起来，最后名单出炉，获得保研资格，复试通过之后，并没有一种如释重负的感觉，或者说终于实现了既定目标的快感。反而是一种“啊，结束了”的空落感，只想回去睡一觉。
+
+然后新的~~风暴~~压力已经出现，在度过一个短短的国庆假期之后便正式进组，作为一个研究生的社畜生涯就此开始。
+
+### 经历
+
+虽然2024年的第一个关键词已经选择为“压力”，但是众所周知，高压锅里往往能压出好吃的。人也是这样。所以我将2024年的第二个关键词定为“经历”，人生如逆旅，我亦是行人，各式各样的经历便是风格迥异的景点。
+
+人生第一篇学术论文的撰写和发表无疑是今年最难忘的经历。虽然我在前面称之为“学术生涯上的污点”，但是污点也好过一片空白不是，还非常的引人夺目。而且这是一个完整的撰写-发表流程，从开始的选题、实验、撰写、投稿，到最后的接受、提交、发表、报销等等数个环节我均参加。这个过程不仅让我对于学术论文的诞生流程有力较为清晰的认识，也对学校的各种发表和报销流程有了深入的了解。
+
+两个大作业，编译原理课程设计和软件工程大作业，也是非常难忘的经历。这两个项目的代码都已经整理好开源在Github上了。前者代表了目前我软件开发的最高水平，而后者则是我本科阶段唯一一个差点失败的软件开发项目。这种冰火两重天的对比实在是很难令人忘记。
+
+这两个项目中的收获有非常技术性的。相较于2023年面对各种大作业时的略显底气不足，这次我在各种技术栈的选择上更加游刃有余，选择了完全倒向.NET和React，摈弃了之前的Java和Vue。各类现代软件开发技术也得到了充分的应用，例如由Gitea Actions驱动的DevOps实践，完全基于合并请求的多人协作流程。事实证明，这些协作流程确实在一定程度上加速了项目的开发。
+
+但是，“软件工程里没有银弹”，先进技术的堆叠并不能保证软件项目成功。虽然我这里~~自吹自擂~~有非常多新技术的帮助，软件工程大作业的差点失败的确说明了软件工程实际上还是人的工程，猪队友永远比凶恶的敌人更可怕。当然也不能将所有的锅都扔给别人，我在项目失控的过程中也没有能够采取有力的措施挽救整个项目，~~负有不可推卸的领导责任~~。
+
+今年最后一个难忘的经历便是去横店镇参加CNCC 2024，也单独出过[博客](https://rrricardo.top/blog/essays/cncc-2024)。虽然之前学术论文发表的过程中也是在学术会议上做过口头报告，不过是线上参加的，并没有特别的实感。现在线下参加，也不需要自己上去发表，顿感旅游真好玩，~~也有可能是因为CNCC比较水~~。
+
+### 匆匆
+
+2024年的第三个关键词我想定为”匆匆“，虽然想找一个更加”有文化“的词汇，奈何自己的文化造纸实在不够，故定为”匆匆“。
+
+可2024年确实是非常忙碌的一年，现在回想起来，几乎每一个月都是在为了某一件特定的事情而奔走着。还记得在新年伊始的时间里，我还制订了各种各样的读书计划和补番计划，现在看来，定计划的目的不是为了实现，而是为了安心。
+
+不过匆匆之中还是读了几本书。首先是久负盛名的《置身事内——中国政府与经济发展》，这本书的开篇即言：“这本书是写给大学生和对经济话题感兴趣的读者”，细读下来也确实如此。然后是一本我从小便着迷的二战军史相关话题《美国陷阱：橙色计划始末》，其中若干的政治与军事细节之于我不过是走马观花，不过其中表达出的长期战略实在令人敬佩。
+
+至于补番计划，我则是表现出了同电子ED一样的症状，对于新番没有兴趣，对于补早就下载安装好的老番更是兴趣缺缺。反倒是电视剧，由于12月韩国的惊天一变，我又重新下载了《第五共和国》，忠！诚！
+
+不过我的B站观看时长再度增长30%，这好吗，这不好，~~有这么多时间刷B站，鬼知道你匆匆在哪了~~。
+
+![image-20250115171809775](./2024-final/image-20250115171809775.png)
+
+### 未来
+
+> 定计划的目的不是为了实现，而是为了安心。
+
+站在年关，已经可以预见到2025年将会是更为繁忙的一年，从一月份到十月份都已经有了或多或少的安排，现在无法多言，只能希望都能有良好的结果。
+
+还是多说点可以说的罢。
+
+首先是读书计划。《置身事内——中国政府与经济发展》的每章最后都有一个推荐书目，一整本上总结下来也能有超过50本，其中不乏超过一千页的大部头，说能够一年看完显然是痴人说梦。这里先列两本同我的工作关系密切的书籍：
+
+- 陆风，《光变：一个企业及其工业史》
+- 吴军，《浪潮之巅》
+
+其次是补番计划，这一年刷到了不少押井守导演的《机动警察》系列，虽然我之前对于人形机器人并不热心，但剧中精细的作画和宏大的背景设定确实非常吸引人，遂决定今年找来看看。
+
--- a/YaeBlog/source/posts/2024-final/image-20250115171809775.png
+++ b/YaeBlog/source/posts/2024-final/image-20250115171809775.png
--- a/YaeBlog/tailwind.config.js
+++ b/YaeBlog/tailwind.config.js
@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["**/*.razor", "**/*.cshtml", "**/*.html"],
+  content: ["**/*.razor", "**/*.cshtml", "**/*.html", "Processors/EssayStylesPostRenderProcessor.cs"],
  theme: {
    extend: {},
  },
--- a/YaeBlog/wwwroot/clipboard.min.js
+++ b/YaeBlog/wwwroot/clipboard.min.js
--- a/YaeBlog/wwwroot/images/banner.png
+++ b/YaeBlog/wwwroot/images/banner.png
--- a/YaeBlog/wwwroot/images/blog-icon.png
+++ b/YaeBlog/wwwroot/images/blog-icon.png
--- a/YaeBlog/wwwroot/images/git-icon.png
+++ b/YaeBlog/wwwroot/images/git-icon.png
--- a/YaeBlog/wwwroot/images/wiki-icon.png
+++ b/YaeBlog/wwwroot/images/wiki-icon.png
Author	SHA1	Message	Date
jackfiled	1c591a7e82	fix: remove unused files.	2025-01-24 16:39:41 +08:00
jackfiled	f071b02ae3	feat: styles for essays.	2025-01-24 16:29:32 +08:00
jackfiled	24fb498d59	feat: Some performance tweak.	2025-01-23 22:59:44 +08:00
jackfiled	999284b91a	Merge branch 'master' into feat-tailwind	2025-01-23 20:47:45 +08:00
jackfiled	cdbcb7a4cc	refact: use tailwind css.	2025-01-23 20:46:54 +08:00
jackfiled	1ceaf30061	blog: 2024-final All checks were successful Build blog docker image / Build-Blog-Image (push) Successful in 1m47s Details	2025-01-16 17:27:11 +08:00