请求为Tailwind项目添加i18n本地化功能及导航栏语言下拉菜单

一、安装i18n依赖 #

执行以下命令安装核心依赖包：

npm install react-i18next i18next --save
npm install i18next-http-backend i18next-browser-languagedetector --save

二、配置i18n初始化文件 #

在项目src目录下创建i18n.js文件，写入以下配置：

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';

i18n
  .use(Backend) // 远程加载翻译文件
  .use(LanguageDetector) // 自动检测用户系统语言
  .use(initReactI18next) // 集成React-i18next
  .init({
    fallbackLng: 'en',
    debug: false,
    interpolation: {
      escapeValue: false, // React自带XSS防护，无需额外处理
    },
    supportedLngs: ['en', 'zh', 'hu'] // 根据需求添加支持的语言类型
  });

export default i18n;

三、创建多语言翻译文件 #

在public/locales目录下按语言分类创建翻译文件：

• public/locales/en/translation.json

{
  "nav": {
    "home": "Home",
    "about": "About",
    "projects": "Projects",
    "contact": "Contact"
  },
  "lang": {
    "en": "English",
    "zh": "Chinese",
    "hu": "Hungarian"
  }
}

• public/locales/zh/translation.json

{
  "nav": {
    "home": "首页",
    "about": "关于我",
    "projects": "项目",
    "contact": "联系我"
  },
  "lang": {
    "en": "英文",
    "zh": "中文",
    "hu": "匈牙利语"
  }
}

• public/locales/hu/translation.json（按需补充匈牙利语翻译内容）

四、改造导航栏组件，添加语言下拉菜单 #

找到项目中的导航栏组件（如src/components/Navbar.js），替换为以下Flowbite风格的代码，集成i18n功能：

import { useTranslation } from 'react-i18next';

const Navbar = () => {
  const { t, i18n } = useTranslation();

  const changeLanguage = (lng) => {
    i18n.changeLanguage(lng);
  };

  return (
    <nav className="bg-white border-gray-200 dark:bg-gray-900">
      <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
        <a href="#" className="flex items-center">
          <span className="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Portfolio</span>
        </a>
        <div className="flex items-center md:order-2">
          {/* 语言选择下拉菜单 */}
          <div className="relative">
            <button id="languageDropdownButton" className="flex items-center text-sm font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white focus:outline-none" aria-expanded="false">
              <span>{t(`lang.${i18n.language}`)}</span>
              <svg className="w-2.5 h-2.5 ml-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
                <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="m1 1 4 4 4-4"/>
              </svg>
            </button>
            <div id="languageDropdown" className="absolute right-0 z-10 mt-2 w-44 bg-white rounded-lg shadow dark:bg-gray-700">
              <ul className="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="languageDropdownButton">
                <li>
                  <button onClick={() => changeLanguage('en')} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left">{t('lang.en')}</button>
                </li>
                <li>
                  <button onClick={() => changeLanguage('zh')} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left">{t('lang.zh')}</button>
                </li>
                <li>
                  <button onClick={() => changeLanguage('hu')} className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 w-full text-left">{t('lang.hu')}</button>
                </li>
              </ul>
            </div>
          </div>
          <button data-collapse-toggle="navbar-user" type="button" className="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-user" aria-expanded="false">
            <span className="sr-only">Open main menu</span>
            <svg className="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
              <path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M1 1h15M1 7h15M1 13h15"/>
            </svg>
          </button>
        </div>
        <div className="items-center justify-between hidden w-full md:flex md:w-auto md:order-1" id="navbar-user">
          <ul className="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
            <li>
              <a href="#" className="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500">{t('nav.home')}</a>
            </li>
            <li>
              <a href="#" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">{t('nav.about')}</a>
            </li>
            <li>
              <a href="#" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">{t('nav.projects')}</a>
            </li>
            <li>
              <a href="#" className="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">{t('nav.contact')}</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

• 若为普通React项目，需在index.js中导入i18n配置：import './i18n';
• 若为Next.js项目，需在_app.js中导入i18n配置。

五、验证功能 #

启动项目后，点击导航栏的语言下拉按钮，切换不同语言，检查导航栏文字是否同步更新。

内容的提问来源于stack exchange，提问作者Gergő Jeles