From 2e84063f89d851f98eec5118b731b31606dc3d89 Mon Sep 17 00:00:00 2001
From: sjfhsjfh <sjfhsjfh@qq.com>
Date: Thu, 27 Nov 2025 17:45:53 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E6=96=B0=E5=A2=9E=E9=A6=96?=
 =?UTF-8?q?=E9=A1=B5=20Hero=E3=80=81=E5=8D=A1=E7=89=87=E5=BC=8F=E6=9C=80?=
 =?UTF-8?q?=E8=BF=91=E6=96=87=E7=AB=A0=E7=BD=91=E6=A0=BC=E4=B8=8E=E5=8F=AF?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E9=A1=B9=EF=BC=88site.config=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index.astro | 43 ++++++++++++++++++++++++++++++++++---------
 src/site.config.ts    | 19 +++++++++++++++++++
 2 files changed, 53 insertions(+), 9 deletions(-)
 create mode 100644 src/site.config.ts

diff --git a/src/pages/index.astro b/src/pages/index.astro
index f8241d2..e7b7488 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,15 +1,40 @@
 ---
 import BaseLayout from '../layouts/BaseLayout.astro';
 import { listRecentPosts } from '../lib/posts';
-const posts = await listRecentPosts(5);
+import { siteConfig } from '../site.config';
+const posts = await listRecentPosts(siteConfig.home.recentLimit);
 ---
 <BaseLayout title="首页">
-  <h2>最近文章</h2>
-  <ul>
-    {posts.slice(0, 5).map((p) => (
-      <li>
-        <a href={`/posts/${p.slug}/`}>{p.data.title}</a>
-      </li>
-    ))}
-  </ul>
+  {siteConfig.hero.enabled && (
+    <section style="margin: var(--space-8) 0;">
+      <h1 style="font-size: 2rem; margin: 0 0 var(--space-2);">{siteConfig.hero.title}</h1>
+      <p style="color: var(--color-muted); margin: 0 0 var(--space-4);">{siteConfig.hero.subtitle}</p>
+      <a href={siteConfig.hero.ctaHref} style="display:inline-block; padding: 8px 14px; border:1px solid var(--color-border); border-radius: var(--radius); background: color-mix(in oklab, var(--color-primary) 12%, transparent);">
+        {siteConfig.hero.ctaText}
+      </a>
+    </section>
+  )}
+
+  <section>
+    <h2 style="margin-bottom: var(--space-3)">最近文章</h2>
+    <div style="display:grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: var(--space-4);">
+      {posts.map((p) => (
+        <a href={`/posts/${p.slug}/`} style="display:block; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration:none; color:inherit;">
+          <h3 style="margin:0 0 var(--space-2); font-size: 1.1rem;">{p.data.title}</h3>
+          {siteConfig.home.showDates && (
+            <div style="color: var(--color-muted); font-size: 0.9em;">
+              {p.data.pubDate?.toLocaleDateString?.('zh-CN')}
+            </div>
+          )}
+          {siteConfig.home.showTags && p.data.tags?.length ? (
+            <div style="margin-top: var(--space-2); display:flex; flex-wrap:wrap; gap:6px;">
+              {p.data.tags.slice(0,3).map((t) => (
+                <span style="border:1px solid var(--color-border); padding:2px 6px; border-radius: 999px; color: var(--color-muted); font-size: 12px;">{t}</span>
+              ))}
+            </div>
+          ) : null}
+        </a>
+      ))}
+    </div>
+  </section>
 </BaseLayout>
diff --git a/src/site.config.ts b/src/site.config.ts
new file mode 100644
index 0000000..b25f46d
--- /dev/null
+++ b/src/site.config.ts
@@ -0,0 +1,19 @@
+export const siteConfig = {
+  siteName: '学习博客',
+  tagline: '持续沉淀，面向未来的知识库',
+  hero: {
+    enabled: true,
+    title: '欢迎来到学习博客',
+    subtitle: '记录、分享、迭代你的知识资产',
+    ctaText: '查看全部文章',
+    ctaHref: '/posts'
+  },
+  home: {
+    recentLimit: 8,
+    showTags: true,
+    showDates: true
+  }
+} as const;
+
+export type SiteConfig = typeof siteConfig;
+