更新中文英文切换功能

[Thresh514]

📌 批量添加翻译的教程（仅支持 en 和 zh）

你现在的 TranslationContext 方案已经可以 无刷新切换语言，但如果后续要 批量添加新翻译，只需要修改 locales/en.json 和 locales/zh.json，不需要改动代码。

---

🚀 1️⃣ 在 locales/ 目录里批量添加翻译

你已经有 locales/en.json 和 locales/zh.json，如果要添加新的翻译项，比如 购物车、登录、注册、产品详情等，直接修改 JSON 文件。

📂 locales/en.json（英文）

{
  "welcome": "Welcome to our website",
  "description": "Download thousands of professional notes, access exclusive learning resources, and master new knowledge.",
  "add_to_cart": "Add to Cart",
  "checkout": "Proceed to Checkout",
  "contact_us": "Contact Us",
  "about_us": "About Us",
  "pricing": "Pricing",
  "faq": "Frequently Asked Questions",
  "login": "Login",
  "logout": "Logout",
  "signup": "Sign Up",
  "product_details": "Product Details",
  "customer_reviews": "Customer Reviews"
}

📂 locales/zh.json（中文）

{
  "welcome": "欢迎来到我们的网站",
  "description": "下载数千份专业笔记，访问独家学习资源，随时随地掌握新知识。",
  "add_to_cart": "加入购物车",
  "checkout": "前往结账",
  "contact_us": "联系我们",
  "about_us": "关于我们",
  "pricing": "价格",
  "faq": "常见问题",
  "login": "登录",
  "logout": "退出",
  "signup": "注册",
  "product_details": "产品详情",
  "customer_reviews": "客户评价"
}

📌 新增翻译时，只需要在 locales/en.json 和 locales/zh.json 里添加相应的 key:value 对！
📌 保证 en.json 和 zh.json 里的 key 一致，避免 t("key") 解析失败。

---

🚀 2️⃣ 在组件里使用 t("key")

不管你在哪个组件里要用翻译，只需要调用 t("key")。

📂 components/Navbar.js

import { useTranslation } from "../context/TranslationContext";
import { AiOutlineTranslation } from "react-icons/ai";

export default function Navbar() {
    const { t, language, changeLanguage } = useTranslation();

    return (
        <nav className="flex items-center justify-between p-4 bg-gray-100">
            <h1 className="text-xl font-bold">{t("welcome")}</h1>

            <div className="flex items-center space-x-4">
                <button>{t("contact_us")}</button>
                <button>{t("pricing")}</button>
                <button>{t("faq")}</button>
                <button>{t("login")}</button>
                <button>{t("signup")}</button>
                <button
                    onClick={() => changeLanguage(language === "en" ? "zh" : "en")}
                    className="p-2"
                >
                    <AiOutlineTranslation size={24} />
                </button>
            </div>
        </nav>
    );
}

📌 这里的 t("contact_us")、t("pricing") 等文本都会根据当前语言自动切换！

---

🚀 3️⃣ 在 ProductPage.js 里使用翻译

别忘了加 import { useTranslation } from "../context/TranslationContext";,文件路径注意是否正确，用command + click检查。
📂 components/ProductPage.js

import { useTranslation } from "../context/TranslationContext";

export default function ProductPage() {
    const { t } = useTranslation();

    return (
        <section>
            <h2>{t("product_details")}</h2>
            <p>{t("description")}</p>
            <button className="p-2 bg-blue-500 text-white">{t("add_to_cart")}</button>
            <h3>{t("customer_reviews")}</h3>
        </section>
    );
}

📌 这样 t("product_details")、t("description")、t("add_to_cart") 都会自动翻译。

---

🚀 4️⃣ 批量添加翻译的正确流程

如果你要批量新增翻译，按照这个流程操作：

1. 修改 locales/en.json 和 locales/zh.json
   • 添加新 key:value，比如 "wishlist": "Wishlist" 和 "wishlist": "收藏夹"。
2. 在组件里用 t("wishlist") 访问翻译
   • 不需要改 TranslationContext.js，只需要改 JSON 文件！
3. 保存文件，刷新页面，翻译就会自动更新！ 🎉