diff --git a/.gitignore b/.gitignore
index 016b59e..3043e03 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,5 @@ pnpm-debug.log*
# jetbrains setting folder
.idea/
+
+.trae/
\ No newline at end of file
diff --git a/i18n_guide.md b/i18n_guide.md
new file mode 100644
index 0000000..c72670a
--- /dev/null
+++ b/i18n_guide.md
@@ -0,0 +1,455 @@
+# Astro + React 项目国际化 (i18n) 指南
+
+本文档旨在指导如何在基于 Astro 和 React 的项目中实现国际化功能，特别是针对 Astro 4.0+ 版本内置的 i18n 支持。
+
+## 1. Astro i18n 配置
+
+首先，需要在 `astro.config.mjs` 文件中配置国际化选项。
+
+```javascript
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import react from "@astrojs/react";
+import tailwind from "@tailwindcss/vite";
+
+export default defineConfig({
+ integrations: [react(), tailwind()],
+ i18n: {
+ defaultLocale: "en", // 默认语言
+ locales: ["en", "zh"], // 支持的语言列表
+ routing: {
+ prefixDefaultLocale: true, // 是否为默认语言添加前缀 (例如 /en/blog)
+ // 其他路由配置，例如 fallback
+ }
+ }
+});
+```
+
+**关键点**：
+- `defaultLocale`: 设置网站的默认语言。
+- `locales`: 定义所有支持的语言。
+- `routing.prefixDefaultLocale`: 决定默认语言的 URL 是否也带有语言前缀。设置为 `true` (例如 `/en/about`) 通常能提供更一致的 URL 结构，但如果希望默认语言的 URL 更简洁 (例如 `/about`)，可以设置为 `false`。
+
+## 2. 组织多语言内容 (页面)
+
+Astro 的 i18n 路由策略是基于文件系统的。你需要根据语言在 `src/pages/` 目录下组织你的页面文件。
+
+创建对应语言的子目录，例如：
+
+```
+src/
+└── pages/
+ ├── en/
+ │ ├── index.astro
+ │ └── about.astro
+ ├── zh/
+ │ ├── index.astro
+ │ └── about.astro
+ └── index.astro // (可选) 如果 defaultLocale 不加前缀，这个作为根目录的默认语言页面
+```
+
+- 如果 `prefixDefaultLocale` 为 `true`，则所有语言（包括默认语言）的页面都应放在各自的语言子目录中 (例如 `src/pages/en/index.astro`, `src/pages/zh/index.astro`)。
+- 如果 `prefixDefaultLocale` 为 `false`，默认语言的页面可以直接放在 `src/pages/` 根目录下 (例如 `src/pages/index.astro` 对应默认语言)，其他语言的页面放在各自的子目录中 (例如 `src/pages/zh/index.astro`)。
+
+## 3. 存储 UI 翻译文本
+
+对于 UI 界面中需要翻译的文本（例如按钮文字、标签、提示信息等），建议使用 JSON 文件来管理。
+
+在 `public/locales/` 目录下为每种语言创建一个 JSON 文件：
+
+```
+public/
+└── locales/
+ ├── en/
+ │ └── ui.json
+ └── zh/
+ └── ui.json
+```
+
+**示例 `public/locales/en/ui.json`**:
+```json
+{
+ "site.title": "My Portfolio",
+ "nav.home": "Home",
+ "nav.about": "About",
+ "nav.projects": "Projects",
+ "button.viewDetails": "View Details"
+}
+```
+
+**示例 `public/locales/zh/ui.json`**:
+```json
+{
+ "site.title": "我的作品集",
+ "nav.home": "首页",
+ "nav.about": "关于",
+ "nav.projects": "项目",
+ "button.viewDetails": "查看详情"
+}
+```
+
+## 4. 创建翻译辅助函数 (可选但推荐)
+
+为了方便在 Astro 组件和 React 组件中获取翻译文本，可以创建一个辅助函数。
+
+在 `src/i18n/utils.ts` (如果目录不存在则创建) 中：
+
+```typescript
+// src/i18n/utils.ts
+import { ui } from './ui'; // 假设 ui.ts 用于加载 JSON
+
+// 这是一个简化的示例，实际项目中可能需要更完善的加载和错误处理机制
+// 或者直接在组件中 fetch JSON 文件
+
+export function useTranslations(lang: keyof typeof ui) {
+ return function t(key: keyof typeof ui[typeof lang]) {
+ return ui[lang][key] || key; // 如果翻译不存在，返回 key 本身
+ }
+}
+```
+
+你还需要一个 `src/i18n/ui.ts` 来实际加载这些 JSON 文件。Astro 官方文档提供了一种方式，但对于客户端 React 组件，可能需要调整。
+
+一个更通用的方法是在组件中根据当前语言动态 `fetch` 对应的 `ui.json` 文件。
+
+**或者，更简单的方式是直接在 Astro 页面/布局中获取当前语言，然后将翻译对象传递给 React 组件。**
+
+## 5. 更新 LanguageSwitcher 组件
+
+`LanguageSwitcher.tsx` 组件需要能够检测当前语言、列出可选语言，并在用户选择新语言时导航到对应的本地化 URL。
+
+```typescript
+// src/components/LanguageSwitcher.tsx
+import { useState, useEffect } from 'react';
+
+// 假设我们从 Astro.locals.lang 获取当前语言，并通过 props 传入
+// 或者通过 window.location.pathname 解析
+
+interface LanguageSwitcherProps {
+ currentLang: string;
+ availableLangs: Array<{ code: string; name: string }>; // 例如 [{ code: 'en', name: 'English' }, { code: 'zh', name: '中文' }]
+}
+
+const LanguageSwitcher = ({ currentLang, availableLangs }: LanguageSwitcherProps) => {
+ const [selectedLang, setSelectedLang] = useState(currentLang);
+
+ useEffect(() => {
+ setSelectedLang(currentLang);
+ }, [currentLang]);
+
+ const handleChangeLanguage = (langCode: string) => {
+ if (langCode !== selectedLang) {
+ // 获取当前路径，但不包含语言前缀
+ const currentPathname = window.location.pathname;
+ let basePath = '';
+
+ // 移除已有的语言前缀 (如果存在)
+ const langRegex = new RegExp(`^/(${availableLangs.map(l => l.code).join('|')})`);
+ basePath = currentPathname.replace(langRegex, '');
+ if (!basePath.startsWith('/')) {
+ basePath = '/' + basePath;
+ }
+
+ // Astro 的 i18n 路由会自动处理
+ // 如果 prefixDefaultLocale 为 true，则所有语言都有前缀
+ // 如果为 false，默认语言没有前缀
+ // 这里我们假设 Astro 的配置会处理好目标 URL
+ // 对于 Astro 4.0+，可以直接使用 astro:i18n 的 getRelativeLocaleUrl
+ // 但在 React 组件中，我们通常通过 window.location.href 来跳转
+
+ // 简单的跳转逻辑，实际项目中可能需要更精确的 URL 构建
+ // 考虑 Astro.config.mjs 中的 prefixDefaultLocale 设置
+ const astroConfig = {
+ defaultLocale: 'en', // 需要与 astro.config.mjs 一致
+ locales: ['en', 'zh'], // 需要与 astro.config.mjs 一致
+ prefixDefaultLocale: true // 需要与 astro.config.mjs 一致
+ };
+
+ let newPath;
+ if (langCode === astroConfig.defaultLocale && !astroConfig.prefixDefaultLocale) {
+ newPath = basePath;
+ } else {
+ newPath = `/${langCode}${basePath}`;
+ }
+
+ // 确保路径是干净的，例如移除双斜杠
+ newPath = newPath.replace(/\/\/+/g, '/');
+ if (newPath === '') newPath = '/';
+
+ window.location.href = newPath;
+ }
+ };
+
+ return (
+
+ handleChangeLanguage(e.target.value)}
+ className="bg-gray-800 text-white p-2 rounded"
+ >
+ {availableLangs.map((lang) => (
+
+ {lang.name}
+
+ ))}
+
+
+ );
+};
+
+export default LanguageSwitcher;
+
+```
+
+**在 Astro 布局或页面中使用 `LanguageSwitcher`**:
+
+```astro
+---
+// src/layouts/Layout.astro
+import LanguageSwitcher from '../components/LanguageSwitcher.tsx';
+import { getRelativeLocaleUrl } from 'astro:i18n'; // Astro 4.0+ i18n helper
+
+const { currentLocale } = Astro;
+const availableLangs = [
+ { code: 'en', name: 'English', url: getRelativeLocaleUrl('en') },
+ { code: 'zh', name: '中文', url: getRelativeLocaleUrl('zh') },
+ // ... 其他语言
+];
+
+// 传递给 React 组件的 props
+const langSwitcherProps = {
+ currentLang: currentLocale || 'en', // Astro.currentLocale 可能为 undefined
+ availableLangs: [
+ { code: 'en', name: 'English' },
+ { code: 'zh', name: '中文' },
+ ]
+};
+---
+
+
+
+
+
+
+
+
+```
+
+**React 组件 (.tsx)**
+
+将翻译函数 `t` 或翻译好的文本作为 props 传递给 React 组件。
+
+```typescript
+// src/components/HeroSection.tsx
+interface HeroSectionProps {
+ title: string;
+ subtitle: string;
+ // ...其他 props
+}
+
+const HeroSection = ({ title, subtitle }: HeroSectionProps) => {
+ return (
+
+ );
+};
+
+export default HeroSection;
+```
+
+或者，如果 React 组件需要在客户端自行获取翻译（例如，不通过 Astro 预渲染的部分），可以 `fetch` 对应的 `ui.json` 文件。
+
+```typescript
+// src/components/SomeClientComponent.tsx
+import { useState, useEffect } from 'react';
+
+interface Translations {
+ [key: string]: string;
+}
+
+const SomeClientComponent = () => {
+ const [t, setT] = useState< (key: string) => string >(() => (key: string) => key);
+ const [lang, setLang] = useState('en'); // 需要确定当前语言
+
+ useEffect(() => {
+ // 确定当前语言，例如从 URL 或 localStorage
+ const currentPathLang = window.location.pathname.split('/')[1];
+ // 假设 'en', 'zh' 是支持的语言
+ if (['en', 'zh'].includes(currentPathLang)) {
+ setLang(currentPathLang);
+ }
+ }, []);
+
+ useEffect(() => {
+ async function fetchTranslations() {
+ try {
+ const response = await fetch(`/locales/${lang}/ui.json`);
+ if (!response.ok) throw new Error('Failed to load translations');
+ const translations: Translations = await response.json();
+ setT(() => (key: string) => translations[key] || key);
+ } catch (error) {
+ console.error("Error fetching translations:", error);
+ // 保留默认的 t 函数 (返回 key)
+ }
+ }
+ fetchTranslations();
+ }, [lang]);
+
+ return (
+
+
{t('some.dynamic.text')}
+
+ {/* Language Switcher added here */}
+
- {/* Mobile Menu Button */}
+ {/* Mobile Menu Button */}
setIsOpen(!isOpen);
+
+ const handleSelectLanguage = (lang: typeof languages[0]) => {
+ setSelectedLanguage(lang);
+ setIsOpen(false);
+ // Here you would typically call a function to change the language of the application
+ console.log(`Language changed to: ${lang.name}`);
+ };
+
+ return (
+
+
+
+
+ {isOpen && (
+
+
+ {languages.map((lang) => (
+ handleSelectLanguage(lang)}
+ className="w-full text-left px-3 py-1.5 text-sm rounded-sm hover:bg-accent hover:text-accent-foreground flex items-center justify-between cursor-pointer focus:bg-accent focus:outline-none"
+ role="menuitem"
+ >
+
+ {lang.icon} {/* Display icon */}
+ {lang.name}
+
+ {selectedLanguage.code === lang.code &&
+ ))}
+
+
+ )}
+
+