初始化：Astro 站点 + Sveltia CMS 后台 + 部署配置

src/pages/contact.astro

@@ -0,0 +1,63 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { SITE, SOCIAL } from '../site.config';
+---
+
+<BaseLayout title="联系" description="联系方式">
+  <section class="page-head">
+    <h1>联系</h1>
+    <p class="lead muted">
+      欢迎就项目合作、技术交流或问题反馈与我联系。
+    </p>
+  </section>
+
+  <section class="contact">
+    <a class="card row" href={`mailto:${SITE.email}`}>
+      <span class="label mono">Email</span>
+      <span class="value">{SITE.email}</span>
+    </a>
+    {
+      SOCIAL.map((s) => (
+        <a class="card row" href={s.href} target="_blank" rel="noopener">
+          <span class="label mono">{s.label}</span>
+          <span class="value">{s.href}</span>
+        </a>
+      ))
+    }
+  </section>
+</BaseLayout>
+
+<style>
+  .page-head {
+    padding: 3rem 0 1rem;
+  }
+  .page-head h1 {
+    margin: 0 0 0.75rem;
+  }
+  .lead {
+    max-width: 56ch;
+  }
+  .contact {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    max-width: 560px;
+  }
+  .row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    color: var(--text);
+  }
+  .label {
+    color: var(--accent);
+    font-size: 0.85rem;
+    min-width: 70px;
+  }
+  .value {
+    color: var(--text-dim);
+  }
+  .row:hover .value {
+    color: var(--text);
+  }
+</style>