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
///
public required string BannerImage { get; set; }
+ ///
+ /// 文章页面的背景图片
+ ///
+ public required string EssayImage { get; set; }
+
///
/// 博客底部是否显示ICP备案信息
///
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
+
+
+
+
+
+ @(_essay!.Title)
+
+
+
+
+
+
+
+
+
+
+
+ @((MarkupString)_essay!.HtmlContent)
+
+
+
+
+
+
+
+
+
+
+
+@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 @@
{