add: 公告组件

YaeBlog.Core/Models/BlogOptions.cs

@@ -14,6 +14,8 @@ public class BlogOptions
     /// </summary>
     public required string Author { get; set; }
 
+    public required string Announcement { get; set; }
+
     /// <summary>
     /// 博客的起始年份
     /// </summary>

YaeBlog.Theme.FluentUI/Components/Announcement.razor

@@ -0,0 +1,26 @@
+@using YaeBlog.Core.Models
+
+@inject BlogOptions BlogOptionsInstance
+
+<div style="width: 100%">
+    <FluentCard>
+        <div class="announcement-title">
+            <FluentIcon Value="@(new Icons.Regular.Size16.Note())" />
+            <FluentLabel Typo="@Typography.H5" Style="margin-left: 0.5rem">
+                公告
+            </FluentLabel>
+        </div>
+
+        <div style="height: 1rem"></div>
+
+        <FluentLabel>
+            @(BlogOptionsInstance.Announcement)
+        </FluentLabel>
+
+        <div style="height: 0.5rem"></div>
+    </FluentCard>
+</div>
+
+@code {
+
+}

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

@@ -0,0 +1,4 @@
+.announcement-title {
+    display: flex;
+    align-items: center;
+}

YaeBlog.Theme.FluentUI/Pages/Home.razor

@@ -27,7 +27,7 @@
 
     <div style="margin: 0 8% 0 8%">
         <FluentGrid>
-            <FluentGridItem xs="12" sm="12" md="8" lg="8">
+            <FluentGridItem xs="12" sm="12" md="9" lg="9">
                 <div>
                     @foreach (KeyValuePair<string, BlogEssay> essay in _essays)
                     {
@@ -126,11 +126,11 @@
                     </div>
                 </div>
             </FluentGridItem>
-            <FluentGridItem xs="12" sm="12" md="4" lg="4">
+            <FluentGridItem xs="12" sm="12" md="3" lg="3">
                 <FluentStack Orientation="@Orientation.Vertical">
                     <AuthorInformation/>
 
-
+                    <Announcement/>
                 </FluentStack>
             </FluentGridItem>
         </FluentGrid>