模板多语言升级

升级思路

• 针对游戏数据引入多语言json, 以原 id 为索引，存储 name、category、instructions 翻译内容。

• 在每个模板内创建 content.js存放特定词组的多语言数据，统一放common.js 同路径。

json放置路径（暂定不动）

util/
├── language/
│   ├── en.json   # 默认en,仅参照用
│   ├── es.json   # 西班牙语
│   ├── fr.json   # 法语
│   └── de.json   # 德语

自定义脚本

//示例
export const ct_recommend = {
  en: `Recommend For You`,
  fr: `Recommandé pour vous`,
  de: `Empfohlen für dich`,
  es: `Recomendado para ti`
};

更新操作

获取语言

通过util.getLanguage() 检索当前是否需要翻译，得到 en、es、de 和 fr 四种语言之一，默认为en。

const language = util.getLanguage();  // 获取到语言分4种: en, es, de, fr

加载语言包

若language为非默认en后，调用GAME_DATA.loadTranslations(language) 加载一次对应语言的 JSON 数据，并在成功后更新页面内容。

let cachedTranslations = {}; //储载入后的语言内容
if (language !== 'en') {
  GAME_DATA.loadTranslations(language)
    .then(translations => {
      cachedTranslations = translations;
      console.log('读取到数据', cachedTranslations);

      updateLanguage(); //进行更新
    })
    .catch(error => {
      console.error('加载语言包失败:', error);
    });
}

更新页面

在 HTML元素或js定义元素时用类似 language-update-gameItem 等标记需翻译元素，在updateLanguage()找到对应元素更新。

function updateLanguage() {
  try {
    let games = cachedTranslations.games;
    document.querySelectorAll('.language-update-gameItem').forEach(gameItem => {
      let gameId = gameItem.getAttribute('data-game-id'); // 获取游戏ID
      let translatedGame = games[gameId]; // 获取该游戏的翻译数据

      if (translatedGame) {
        safeUpdateText(gameItem.querySelector('.game-name'), translatedGame.name);
        //...
      }
    });
  } catch (error) {
    console.error('更新语言失败:', error);
  }
}

页底文章嵌入路径

${util.getStatementsWithName(`introPage/${language}/index`)

概括

1. 获取当前语言 → util.getLanguage()
2. 加载语言包 → GAME_DATA.loadTranslations(language)
3. 更新页面文本 → updateLanguage()