feat: add root layout and enhance home page with i18n support

cunoe · cunoe · commit 7444fec93b75 · 2025-06-23T21:38:16.000+08:00
- Introduced a new RootLayout component for global layout structure.
- Updated HomePage to support internationalization with dynamic text based on language.
- Removed obsolete test documentation file.
diff --git a/app/[lang]/(home)/page.tsx b/app/[lang]/(home)/page.tsx
@@ -1,16 +1,33 @@
 import Link from 'next/link';
 import { source } from '@/lib/source';
 
-export default function HomePage() {
-  const blogs = source.getPages();
+// i18n文本
+const texts = {
+  en: {
+    noBlogsMessage: "No blog posts yet"
+  },
+  zh: {
+    noBlogsMessage: "暂时还没有博客文章"
+  }
+} as const;
+
+export default async function HomePage({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const lang = (await params).lang as keyof typeof texts;
+  // 获取指定语言的页面
+  const blogs = source.getPages(lang);
+  const t = texts[lang] || texts.en;
 
   return (
     <main className="flex flex-1 flex-col px-6 py-8">
       <div className="max-w-6xl mx-auto w-full">
         
         {blogs.length === 0 ? (
           <p className="text-fd-muted-foreground">
-            暂时还没有博客文章
+            {t.noBlogsMessage}
           </p>
         ) : (
           <div className="grid md:grid-cols-2 gap-8 md:gap-12">
@@ -22,7 +39,7 @@ export default function HomePage() {
               >
                 <article>
                   <h2 className="text-2xl font-semibold text-fd-foreground">
-                    {blog.data.title || '无标题'}
+                    {blog.data.title || (lang === 'zh' ? '无标题' : 'Untitled')}
                   </h2>
                   
                   {blog.data.description && (
diff --git a/app/[lang]/layout.tsx b/app/[lang]/layout.tsx
@@ -19,7 +19,7 @@ const locales = [
   },
 ];
 
-export default async function RootLayout({
+export default async function Layout({
   params,
   children,
 }: {
@@ -29,18 +29,14 @@ export default async function RootLayout({
   const lang = (await params).lang;
 
   return (
-    <html lang={lang}>
-      <body>
-        <RootProvider
-          i18n={{
-            locale: lang,
-            locales,
-            translations: { cn }[lang],
-          }}
-        >
-          {children}
-        </RootProvider>
-      </body>
-    </html>
+    <RootProvider
+      i18n={{
+        locale: lang,
+        locales,
+        translations: { cn }[lang],
+      }}
+    >
+      {children}
+    </RootProvider>
   );
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,16 @@
+import './global.css';
+import type { ReactNode } from 'react';
+
+export default function RootLayout({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  return (
+    <html suppressHydrationWarning>
+      <body>
+        {children}
+      </body>
+    </html>
+  );
+} 
diff --git a/content/docs/test.mdx b/content/docs/test.mdx
