add: 文章页面

YaeBlog.Core/Models/BlogOptions.cs

@@ -29,6 +29,11 @@ public class BlogOptions
     /// </summary>
     public required string BannerImage { get; set; }
 
+    /// <summary>
+    /// 文章页面的背景图片
+    /// </summary>
+    public required string EssayImage { get; set; }
+
     /// <summary>
     /// 博客底部是否显示ICP备案信息
     /// </summary>

YaeBlog.Theme.FluentUI/Pages/Essay.razor

@@ -0,0 +1,57 @@
+@page "/essays/{Filename}"
+@using YaeBlog.Core.Models
+@using YaeBlog.Core.Services
+
+@inject BlogOptions BlogOptionsInstance
+@inject EssayContentService EssayContent
+@inject NavigationManager NavigationInstance
+
+<div style="height: 100%">
+    <div class="essay-background" style="background-image: url('@(BlogOptionsInstance.EssayImage)')">
+        <div class="essay-title">
+            <FluentLabel Typo="@Typography.H1" Style="color: white">
+                @(_essay!.Title)
+            </FluentLabel>
+        </div>
+    </div>
+
+    <div style="height: 2rem"></div>
+
+    <div style="margin: 0 8% 0 8%">
+        <FluentGrid>
+            <FluentGridItem xs="12" sm="12" md="8" lg="8">
+                <FluentCard>
+                    <div class="essay-content">
+                        @((MarkupString)_essay!.HtmlContent)
+                    </div>
+                </FluentCard>
+            </FluentGridItem>
+
+            <FluentGridItem xs="12" sm="12" md="4" lg="4">
+
+            </FluentGridItem>
+        </FluentGrid>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public string? Filename { get; set; }
+
+    private BlogEssay? _essay;
+
+    protected override void OnInitialized()
+    {
+        if (string.IsNullOrEmpty(Filename))
+        {
+            NavigationInstance.NavigateTo("NotFound");
+            return;
+        }
+
+        if (!EssayContent.TryGet(Filename, out _essay))
+        {
+            NavigationInstance.NavigateTo("NotFound");
+        }
+    }
+
+}

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

@@ -0,0 +1,20 @@
+.essay-background {
+    position: relative;
+    height: 80%;
+    overflow: hidden;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.essay-title {
+    color: white;
+    text-align: center;
+    top: 43%;
+    position: absolute;
+    width: 100%;
+}
+
+.essay-content {
+    font-size: 1rem;
+    line-height: 1.6;
+}

YaeBlog.Theme.FluentUI/Pages/Home.razor

@@ -29,7 +29,7 @@
                     {
                         <FluentCard Style="margin: 2rem 0 2rem 0">
                             <div>
-                                <a href="essays/@(essay.Key)">
+                                <a href="essays/@(essay.Key)" target="_blank">
                                     <FluentLabel Typo="@Typography.H4">
                                         @essay.Value.Title
                                     </FluentLabel>

YaeBlog.Theme.FluentUI/wwwroot/globals.css

@@ -6,6 +6,11 @@ html, body {
     height: 100%;
 }
 
+p {
+    font-size: 1rem;
+    line-height: 1.6;
+}
+
 *::-webkit-scrollbar {
     width: 8px;
     height: 8px;