add: MainLayout & MainLayout

YaeBlog/Components/Foonter.razor

@@ -0,0 +1,14 @@
+<div class="row align-items-end text-center">
+    <div class="row">
+        <p class="fs-6">
+            2021 - @(DateTimeOffset.Now.Year) © <a href="https://rrricardo.top" target="_blank">Ricardo Ren</a>，
+            由 <a href="https://dotnet.microsoft.com/zh-cn/" target="_blank">.NET @(Environment.Version)</a> 驱动。
+        </p>
+    </div>
+
+    <div class="row">
+        <p class="fs-6">
+            <a href="https://beian.miit.gov.cn" target="_blank">蜀ICP备2022004429号-1</a>
+        </p>
+    </div>
+</div>

YaeBlog/Layout/BlogLayout.razor

@@ -1,9 +1,47 @@
 @inherits LayoutComponentBase
 
-<main>
+<div class="container">
+    <div class="row" style="height: 80px">
+        <div class="px-2 col-8">
+            <a href="/" class="p-2">
+                <h4>Ricardo's Blog</h4>
+            </a>
+        </div>
+
+        <div class="col-4 d-flex justify-content-around align-items-center">
+            <a href="/blog/" class="p-2" target="_blank">
+                <div class="d-inline-flex" style="text-align: center">
+                    <Icon Name="@IconName.House" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
+                    <h5>首页</h5>
+                </div>
+            </a>
+
+            <a href="/blog/archives/" class="p-2" target="_blank">
+                <div class="d-inline-flex">
+                    <Icon Name="@IconName.Archive" Color="@IconColor.Primary" class="px-2" Size="IconSize.x5"/>
+                    <h5>归档</h5>
+                </div>
+            </a>
+
+            <a href="/blog/tags/" class="p-2" target="_blank">
+                <div class="d-inline-flex">
+                    <Icon Name="@IconName.Tags" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
+                    <h5>标签</h5>
+                </div>
+            </a>
+
+            <a href="/blog/about/" class="p-2" target="_blank">
+                <div class="d-inline-flex">
+                    <Icon Name="@IconName.Person" Color="@IconColor.Primary" class="px-2" Size="@IconSize.x5"/>
+                    <h5>关于</h5>
+                </div>
+            </a>
+        </div>
+    </div>
+
+    <main class="row px-4 py-2">
         @Body
-</main>
+    </main>
 
-@code {
+    <Foonter/>
-
+</div>
-}

YaeBlog/Layout/MainLayout.razor

@@ -1,45 +1,25 @@
 @inherits LayoutComponentBase
 
-<main class="center">
+<div class="container">
-    <div class="container" style="height: 100%">
     <div class="row" style="height: 80px">
         <div class="px-2 col-8">
-                <a href="https://rrricardo.top" class="p-2">
+            <a href="/" class="p-2">
                 <h4>Ricardo's Index</h4>
             </a>
         </div>
 
         <div class="col-4 d-flex justify-content-around align-items-center">
-                <a href="https://github.com/jackfiled" class="p-2" target="_blank">
-                    <h5>Github</h5>
-                </a>
-
             <a href="mailto://shicangjuner@outlook.com" class="p-2" target="_blank">
                 <h5>E-mail</h5>
             </a>
         </div>
     </div>
 
-        <article class="row px-4">
+    <main class="row px-4 center">
         <div class="py-2">
             @Body
         </div>
-        </article>
+    </main>
 
-        <div class="row align-items-end text-center">
+    <Foonter/>
-            <div class="row">
+</div>
-                <p class="fs-6"> 2021 - 2024 By <a href="https://rrricardo.top" target="_blank">Ricardo Ren</a></p>
-            </div>
-
-            <div class="row">
-                <p class="fs-6">
-                    <a href="https://beian.miit.gov.cn">蜀ICP备2022004429号-1</a>
-                </p>
-            </div>
-        </div>
-    </div>
-</main>
-
-@code {
-
-}

YaeBlog/Layout/MainLayout.razor.css

@@ -1,6 +1,5 @@
 .center {
     margin: 0 auto;
-    min-height: 100vh;
     max-width: 48em;
     position: relative;
     display: flex;

YaeBlog/Pages/BlogIndex.razor

@@ -0,0 +1,3 @@
+@page "/blog"
+
+

YaeBlog/Pages/Index.razor

@@ -34,12 +34,12 @@
 
         <div class="row">
             <p class="fs-5">
-                如果您想四处看看，了解一下屏幕对面的人，可以在我的 <a href="https://rrricardo.top/blog/">博客</a> 看看。
+                如果您想四处看看，了解一下屏幕对面的人，可以在我的 <a href="/blog/">博客</a> 看看。
                 如果您对于明光村幼儿园某附属技校的计算机教学感兴趣，您可以移步到
                 <a href="https://jackfiled.github.io/wiki/">我的学习笔记</a>，
                 <span class="fs-5 text-decoration-line-through">虽然这笔记我自己也木有看过。</span>
                 如果您想批判一下我的代码，在 <a href="https://github.com/jackfiled" target="_blank">Github</a> 和
-                <a href="https://git.rrricardo.top/jackfiled/" target="_blank">Gitea</a> 都可以看见。
+                <a href="https://git.rrricardo.top/jackfiled/" target="_blank">Gitea</a> 都可以找到。
             </p>
             <p class="fs-5">
                 如果您真的很闲，也可以四处搜寻一下，也许存在着一些不为人知的彩蛋。

YaeBlog/wwwroot/globals.css

@@ -2,33 +2,6 @@ body a {
     text-decoration: none;
 }
 
-html, body {
-    height: 100%;
-}
-
-p {
-    font-size: 1rem;
-    line-height: 1.6;
-}
-
-*::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-*::-webkit-scrollbar-thumb {
-    background-color: #80c8f8;
-}
-
-*::-webkit-scrollbar-track {
-    background-color: transparent;
-}
-
-* {
-    scrollbar-width: thin;
-    scrollbar-color: #80c8f8 transparent;
-}
-
 @font-face {
     font-family: "Font Awesome 6 Free";
     font-style: normal;