添加 About 页面

src/assets/style.css

@@ -9,6 +9,8 @@
 
     --color-bg-0: light-dark(oklch(95% 0 0), oklch(30% 0.02 270));
     --color-fg-0: light-dark(oklch(25% 0.02 270), oklch(90% 0.02 270));
+
+    --color-link: light-dark(oklch(40% 0.2 270), oklch(80% 0.2 270));
 }
 
 /* == 页面设置 == */

src/components/BoringLayout.astro

@@ -0,0 +1,54 @@
+---
+/* 在博客翻新时期使用的占位 Layout，讲究的就是极简 */
+
+import BaseLayout from '../components/BaseLayout.astro'
+
+interface Props {
+  title?: string
+}
+
+const { title = '小帕的小窝' } = Astro.props
+---
+
+<BaseLayout title={title}>
+  <div class="main">
+    <slot />
+  </div>
+</BaseLayout>
+
+<style>
+  .main {
+    font-family:
+      'HarmonyOS Sans SC',
+      'Noto Sans SC',
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      'Open Sans',
+      'Helvetica Neue',
+      sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 100dvw;
+    height: 100dvh;
+    padding-inline: 40px;
+    text-align: center;
+
+    & :global(a) {
+      color: var(--color-link);
+      text-decoration: none;
+
+      &:global(:hover),
+      &:global(:focus) {
+        text-decoration: underline;
+      }
+    }
+  }
+</style>

src/pages/about.astro

@@ -0,0 +1,35 @@
+---
+import BoringLayout from '../components/BoringLayout.astro'
+
+const friends = [
+  ['https://omega98.top', '核子的博客'],
+  ['https://tnot.top', 'TNOT 的博客'],
+  ['https://ruusuge.top', 'ルース毛的博客'],
+  ['https://akarin.dev/', '宸佬的博客'],
+  ['https://wzq02.top', 'wzq02 的博客'],
+]
+---
+
+<BoringLayout title="关于">
+  <h1>关于<a href="/">这里</a></h1>
+  <p>之前，我心血来潮，写了一个自己的博客系统，但是我把它的源代码搞丢了！</p>
+  <p>正好想重新设计，所以，我打算重构了。但是，重构它很漫长</p>
+  <p>这里的占位的东西，会慢慢填充的！</p>
+  <h1>友链</h1>
+  <p>
+    {
+      friends
+        .map((friend) => {
+          return <a href={friend[0]}>{friend[1]}</a>
+        })
+        .map((block, i) => {
+          if (i == friends.length - 1) {
+            return block
+          } else {
+            return [block, <span>・</span>]
+          }
+        })
+        .flat()
+    }
+  </p>
+</BoringLayout>

src/pages/index.astro

@@ -1,35 +1,9 @@
 ---
-import BaseLayout from '../components/BaseLayout.astro'
+import BoringLayout from '../components/BoringLayout.astro'
 ---
 
-<BaseLayout>
-  <div class="main">
-    <h1>博客系统翻新中...</h1>
-    <p>点击 <a href="https://legacy.passthem.top">这里</a> 查看旧版博客</p>
-  </div>
-</BaseLayout>
-
-<style>
-  .main {
-    font-family:
-      'HarmonyOS Sans SC',
-      'Noto Sans SC',
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      Oxygen,
-      Ubuntu,
-      Cantarell,
-      'Open Sans',
-      'Helvetica Neue',
-      sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    width: 100dvw;
-    height: 100dvh;
-  }
-</style>
+<BoringLayout>
+  <h1>博客系统翻新中...</h1>
+  <p>点击 <a href="https://legacy.passthem.top">这里</a> 查看旧版博客</p>
+  <p>或者了解更多 <a href="/about">关于这里</a></p>
+</BoringLayout>