From 83a9a06feca498ca2dcd8519f476f14012aaf357 Mon Sep 17 00:00:00 2001
From: jackfiled <xcrenchangjun@outlook.com>
Date: Tue, 23 Jan 2024 17:55:34 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E6=96=87=E7=AB=A0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 YaeBlog.Core/Models/BlogOptions.cs           |  5 ++
 YaeBlog.Theme.FluentUI/Pages/Essay.razor     | 57 ++++++++++++++++++++
 YaeBlog.Theme.FluentUI/Pages/Essay.razor.css | 20 +++++++
 YaeBlog.Theme.FluentUI/Pages/Home.razor      |  2 +-
 YaeBlog.Theme.FluentUI/wwwroot/globals.css   |  5 ++
 5 files changed, 88 insertions(+), 1 deletion(-)
 create mode 100644 YaeBlog.Theme.FluentUI/Pages/Essay.razor
 create mode 100644 YaeBlog.Theme.FluentUI/Pages/Essay.razor.css

diff --git a/YaeBlog.Core/Models/BlogOptions.cs b/YaeBlog.Core/Models/BlogOptions.cs
index d01350b..19724c6 100644
--- a/YaeBlog.Core/Models/BlogOptions.cs
+++ b/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>
diff --git a/YaeBlog.Theme.FluentUI/Pages/Essay.razor b/YaeBlog.Theme.FluentUI/Pages/Essay.razor
new file mode 100644
index 0000000..3c1021c
--- /dev/null
+++ b/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");
+        }
+    }
+
+}
diff --git a/YaeBlog.Theme.FluentUI/Pages/Essay.razor.css b/YaeBlog.Theme.FluentUI/Pages/Essay.razor.css
new file mode 100644
index 0000000..bdf0648
--- /dev/null
+++ b/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;
+}
diff --git a/YaeBlog.Theme.FluentUI/Pages/Home.razor b/YaeBlog.Theme.FluentUI/Pages/Home.razor
index 70998c9..6252556 100644
--- a/YaeBlog.Theme.FluentUI/Pages/Home.razor
+++ b/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>
diff --git a/YaeBlog.Theme.FluentUI/wwwroot/globals.css b/YaeBlog.Theme.FluentUI/wwwroot/globals.css
index 66e17de..8486ae8 100644
--- a/YaeBlog.Theme.FluentUI/wwwroot/globals.css
+++ b/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;