add: 关于页面

YaeBlog.Core/Models/AboutInfo.cs

@@ -0,0 +1,10 @@
+namespace YaeBlog.Core.Models;
+
+public class AboutInfo
+{
+    public required string Introduction { get; set; }
+
+    public required string Description { get; set; }
+
+    public required string AvatarImage { get; set; }
+}

YaeBlog.Core/Models/BlogOptions.cs

@@ -38,4 +38,6 @@ public class BlogOptions
     /// 博客底部是否显示ICP备案信息
     /// </summary>
     public string? RegisterInformation { get; set; }
+
+    public required AboutInfo About { get; set; }
 }

YaeBlog.Theme.FluentUI/App.razor

@@ -11,6 +11,7 @@
     <link href="@($"{BlogOptionsInstance.ProjectName}.styles.css")" rel="stylesheet"/>
     <link href="_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" rel="stylesheet" />
     <link href="_content/YaeBlog.Theme.FluentUI/globals.css" rel="stylesheet"/>
+    <link href="favicon.ico" rel="icon"/>
     <HeadOutlet/>
 </head>
 

YaeBlog.Theme.FluentUI/Pages/About.razor

@@ -0,0 +1,42 @@
+@page "/about"
+@using YaeBlog.Core.Models
+
+@inject BlogOptions BlogOptionsInstance
+
+<PageTitle>
+    关于 - @(BlogOptionsInstance.Author)
+</PageTitle>
+
+<div style="height: 100%">
+    <div class="about-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
+        <div class="about-content">
+            <FluentCard>
+                <FluentStack Orientation="@Orientation.Vertical"
+                             HorizontalAlignment="@HorizontalAlignment.Center">
+                    <div class="about-avatar">
+                        <img src="@(BlogOptionsInstance.About.AvatarImage)" alt="author-avatar"
+                             class="about-avatar-img">
+                    </div>
+                    <FluentLabel Typo="@Typography.H2">
+                        @(BlogOptionsInstance.Author)
+                    </FluentLabel>
+
+                    <FluentLabel Typo="@Typography.Body">
+                        @(BlogOptionsInstance.About.Introduction)
+                    </FluentLabel>
+                </FluentStack>
+
+                <div style="height: 2rem"></div>
+                <FluentLabel Typo="@Typography.Body">
+                    @(BlogOptionsInstance.About.Description)
+                </FluentLabel>
+            </FluentCard>
+        </div>
+    </div>
+
+    <BlogFooter/>
+</div>
+
+@code {
+
+}

YaeBlog.Theme.FluentUI/Pages/About.razor.css

@@ -0,0 +1,45 @@
+.about-background {
+    position: relative;
+    height: 100%;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.about-content {
+    top: 33%;
+    position: absolute;
+    width: 80%;
+    margin: 0 10%;
+}
+
+.about-avatar {
+    position: relative;
+    width: 10rem;
+    height: 10rem;
+    z-index: 3;
+}
+
+.about-avatar-img {
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: transparent;
+    object-fit: cover;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
+    0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
+.about-avatar-img:hover {
+    animation: rotate-animation 1s ease-in-out;
+}
+
+@keyframes rotate-animation {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to  {
+        transform: rotate(360deg);
+    }
+}