add: 作者信息组件

YaeBlog.Core/Services/EssayContentService.cs

@@ -44,6 +44,8 @@ public class EssayContentService
     public IEnumerable<KeyValuePair<string, int>> Tags => from item in _tags
         select KeyValuePair.Create(item.Key, item.Value.Count);
 
+    public int TagCount => _tags.Count;
+
     public IEnumerable<BlogEssay> GetTag(string tag)
     {
         if (_tags.TryGetValue(tag, out var list))

YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor

@@ -0,0 +1,53 @@
+@using YaeBlog.Core.Models
+@using YaeBlog.Core.Services
+
+@inject BlogOptions BlogOptionsInstance
+@inject EssayContentService EssayContentInstance
+
+<div style="margin: 2rem 0; width: 100%">
+    <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.H3">
+                @(BlogOptionsInstance.Author)
+            </FluentLabel>
+
+            <div style="height: 0.5rem"></div>
+
+            <FluentStack Orientation="@Orientation.Horizontal"
+                         HorizontalAlignment="@HorizontalAlignment.Center"
+                         HorizontalGap="20">
+                <a href="/archives">
+                    <div>
+                        <FluentLabel Typo="@Typography.H4">
+                            文章
+                        </FluentLabel>
+
+                        <FluentLabel Typo="@Typography.H4">
+                            @(EssayContentInstance.Count)
+                        </FluentLabel>
+                    </div>
+                </a>
+                <a href="/tags">
+                    <div>
+                        <FluentLabel Typo="@Typography.H4">
+                            标签
+                        </FluentLabel>
+
+                        <FluentLabel Typo="@Typography.H4">
+                            @(EssayContentInstance.TagCount)
+                        </FluentLabel>
+                    </div>
+                </a>
+            </FluentStack>
+        </FluentStack>
+    </FluentCard>
+</div>
+
+@code {
+
+}

YaeBlog.Theme.FluentUI/Components/AuthorInformation.razor.css

@@ -0,0 +1,30 @@
+.about-avatar {
+    position: relative;
+    width: 6rem;
+    height: 6rem;
+    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);
+    }
+}

YaeBlog.Theme.FluentUI/Pages/Home.razor

@@ -127,7 +127,11 @@
                 </div>
             </FluentGridItem>
             <FluentGridItem xs="12" sm="12" md="4" lg="4">
+                <FluentStack Orientation="@Orientation.Vertical">
+                    <AuthorInformation/>
 
+
+                </FluentStack>
             </FluentGridItem>
         </FluentGrid>
     </div>