From 78c6a806bf57304ea51dafdfd0d8e33c1ed5b7fe Mon Sep 17 00:00:00 2001
From: jackfiled <xcrenchangjun@outlook.com>
Date: Wed, 24 Jan 2024 20:53:41 +0800
Subject: [PATCH] =?UTF-8?q?add:=20=E5=AD=90=E6=A0=87=E9=A2=98=E5=92=8C?=
 =?UTF-8?q?=E6=96=87=E7=AB=A0=E7=AE=80=E4=BB=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Layout/MainLayout.razor                   | 12 ++++-----
 YaeBlog.Theme.FluentUI/Pages/Essay.razor      | 26 +++++++++++++++----
 YaeBlog.Theme.FluentUI/Pages/Essay.razor.css  |  6 ++++-
 YaeBlog.Theme.FluentUI/Pages/Home.razor       | 10 ++++++-
 YaeBlog.Theme.FluentUI/Pages/Home.razor.css   |  8 +++++-
 5 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/YaeBlog.Theme.FluentUI/Layout/MainLayout.razor b/YaeBlog.Theme.FluentUI/Layout/MainLayout.razor
index 59315f2..197df14 100644
--- a/YaeBlog.Theme.FluentUI/Layout/MainLayout.razor
+++ b/YaeBlog.Theme.FluentUI/Layout/MainLayout.razor
@@ -9,7 +9,7 @@
             <div style="width: 50px"></div>
 
             <a href="/">
-                <FluentLabel Typo="@Typography.H3">
+                <FluentLabel Typo="@Typography.H3" Color="@Color.Lightweight">
                     @BlogOptionsInstance.Author
                 </FluentLabel>
             </a>
@@ -17,31 +17,31 @@
             <FluentSpacer/>
 
             <a href="/" style="margin: auto 0 auto 0">
-                <FluentLabel Typo="@Typography.H5">
+                <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
                     首页
                 </FluentLabel>
             </a>
 
             <a href="/archives" style="margin: auto 0 auto 0">
-                <FluentLabel Typo="@Typography.H5">
+                <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
                     归档
                 </FluentLabel>
             </a>
 
             <a href="/tags" style="margin: auto 0 auto 0">
-                <FluentLabel Typo="@Typography.H5">
+                <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
                     标签
                 </FluentLabel>
             </a>
 
             <a href="/about" style="margin: auto 0 auto 0">
-                <FluentLabel Typo="@Typography.H5">
+                <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
                     关于
                 </FluentLabel>
             </a>
 
             <a href="/links" style="margin: auto 0 auto 0">
-                <FluentLabel Typo="@Typography.H5">
+                <FluentLabel Typo="@Typography.H5" Color="@Color.Lightweight">
                     友链
                 </FluentLabel>
             </a>
diff --git a/YaeBlog.Theme.FluentUI/Pages/Essay.razor b/YaeBlog.Theme.FluentUI/Pages/Essay.razor
index 3c1021c..9df0164 100644
--- a/YaeBlog.Theme.FluentUI/Pages/Essay.razor
+++ b/YaeBlog.Theme.FluentUI/Pages/Essay.razor
@@ -9,9 +9,26 @@
 <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>
+            <FluentStack Orientation="@Orientation.Vertical"
+                         HorizontalAlignment="@HorizontalAlignment.Center">
+                <FluentLabel Typo="@Typography.H1" Style="color: white">
+                    @(_essay!.Title)
+                </FluentLabel>
+                <div class="essay-subtitle">
+                    <FluentIcon Value="@(new Icons.Regular.Size16.Calendar())"
+                                Color="@Color.Fill"/>
+                    <FluentLabel Typo="@Typography.H5" Style="color: white; margin-left: 0.25rem">
+                        @(_essay!.PublishTime.ToString("yyyy年MM月dd日"))
+                    </FluentLabel>
+                </div>
+                <div class="essay-subtitle">
+                    <FluentIcon Value="@(new Icons.Regular.Size16.DataBarVerticalAscending())"
+                                Color="@Color.Fill"/>
+                    <FluentLabel Typo="@Typography.H5" Style="color: white; margin-left: 0.25rem">
+                        @(_essay!.WordCount)字
+                    </FluentLabel>
+                </div>
+            </FluentStack>
         </div>
     </div>
 
@@ -35,8 +52,7 @@
 </div>
 
 @code {
-    [Parameter]
-    public string? Filename { get; set; }
+    [Parameter] public string? Filename { get; set; }
 
     private BlogEssay? _essay;
 
diff --git a/YaeBlog.Theme.FluentUI/Pages/Essay.razor.css b/YaeBlog.Theme.FluentUI/Pages/Essay.razor.css
index bdf0648..c622659 100644
--- a/YaeBlog.Theme.FluentUI/Pages/Essay.razor.css
+++ b/YaeBlog.Theme.FluentUI/Pages/Essay.razor.css
@@ -8,7 +8,6 @@
 
 .essay-title {
     color: white;
-    text-align: center;
     top: 43%;
     position: absolute;
     width: 100%;
@@ -18,3 +17,8 @@
     font-size: 1rem;
     line-height: 1.6;
 }
+
+.essay-subtitle {
+    display: flex;
+    align-items: center;
+}
diff --git a/YaeBlog.Theme.FluentUI/Pages/Home.razor b/YaeBlog.Theme.FluentUI/Pages/Home.razor
index 6252556..f328421 100644
--- a/YaeBlog.Theme.FluentUI/Pages/Home.razor
+++ b/YaeBlog.Theme.FluentUI/Pages/Home.razor
@@ -31,10 +31,18 @@
                             <div>
                                 <a href="essays/@(essay.Key)" target="_blank">
                                     <FluentLabel Typo="@Typography.H4">
-                                        @essay.Value.Title
+                                        @(essay.Value.Title)
                                     </FluentLabel>
                                 </a>
 
+                                <div style="margin: 0.5rem 0 0.5rem 0">
+                                    <a href="essays/@(essay.Key)" target="_blank" style="color: #718096;">
+                                        <div class="essay-description">
+                                            @(essay.Value.Description)
+                                        </div>
+                                    </a>
+                                </div>
+
                                 <FluentStack VerticalAlignment="@VerticalAlignment.Center"
                                              Style="margin: 1rem 0 1rem 0"
                                              HorizontalGap="4">
diff --git a/YaeBlog.Theme.FluentUI/Pages/Home.razor.css b/YaeBlog.Theme.FluentUI/Pages/Home.razor.css
index 51764bb..5e00071 100644
--- a/YaeBlog.Theme.FluentUI/Pages/Home.razor.css
+++ b/YaeBlog.Theme.FluentUI/Pages/Home.razor.css
@@ -56,7 +56,13 @@
 }
 
 .essay-description {
-    vertical-align: middle;
+    width: 100%;
+    line-height: 1.4rem;
+    word-break: break-word;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
 }
 
 .pagination {