LOL前端重构规范

# 方案介绍

顾名思义，就是每种语言都写一个 html（写好一个复制修改就行），因为维护比较麻烦，使用前提是：

  1. 有分享需求，并且分享到社交媒体需要展示 分享模块信息（如下图）
  2. 分享模块信息 需要多语言展示，如分享到 Facebook，分享模块的标题、描述、分享图需要多语言展示 share

满足以上两点，那就需要做多语言多个 html，否则请参考 通用模板

如果只需要分享一段链接或文字，不需要上述分享模块，就用一个 html 实现多语言，也参考 通用模板

# 原因如下

fb、tw 只会读取页面首次加载的 meta 分享信息，js 动态更改的不会生效。因此一个 html 只能对应一种语言的分享信息

# 多语言 url

多语言区分 html 后，访问 url 变成如下

  • 英语：https://goldenspatula.com/act/a20241020xxx/en/
  • 泰语：https://goldenspatula.com/act/a20241020xxx/th/
  • 中文：https://goldenspatula.com/act/a20241020xxx/zh/
  • 根目录（判断语言并跳转）：https://goldenspatula.com/act/a20241020xxx/

# 分享图尺寸

默认使用官网分享图：https://goldenspatula.com/resources/share.jpg
如果需要自定义分享图，要求尺寸为 1200 x 630 像素

# 实现步骤

新增所需的语言目录：en、zh、th，首先在一个语言目录写页面 html 进行重构和联调，如 en/index.html
等开发联调完成后，再复制这个 html 到其余语言目录。所以要把页面自己写的 css、js 独立出去引入，方便维护

在 通用模板 的基础上，要改动的内容有：

  1. 每个语言 html 的分享 meta 信息都改为当前语言的内容：页面 url、标题、描述、分享图 url，后三个信息需要找产品提供，如果没有，可复制官网的多语言 meta 分享信息写入
<!-- 通用分享图 -->
<meta itemprop="image" content="当前语言分享图 url">
<!-- facebook 分享 -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="goldenspatula.com">
<meta property="og:title" content="当前语言标题">
<meta property="og:description" content="当前语言描述">
<meta property="og:url" content="当前语言页面 url">
<meta property="og:image" content="当前语言分享图 url">
<!-- twitter 分享 -->
<meta name="twitter:site" content="@goldenspatula">
<meta name="twitter:title" content="当前语言标题">
<meta name="twitter:description" content="当前语言描述">
<meta name="twitter:url" content="当前语言页面 url">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="当前语言分享图 url">
<meta name="twitter:image:src" content="当前语言分享图 url">
  1. 依然使用 i18next 和 lang.js 翻译，方便复制 html 和维护多语言文案
    删除通用模板里获取并判断语言参数的代码，改为写死当前 html 的语言参数，如 en/index.html 就写死语言参数为 en
<script>
  // 写死当前语言参数，如 en
  const currentLang = 'en'
  // 设置 html 的语言，cookie 组件会读取 document lang 属性显示对应语言
  document.documentElement.lang = currentLang

  // 初始化翻译工具
  i18next.init({
    lng: currentLang, // 当前语言
    fallbackLng: "en", // 回退语言
    resources: langResources, // 翻译文件
  }, (err) => {
    if (err) return console.error(err);
    // 执行 html 中的翻译
    document.querySelectorAll("[data-t]").forEach((element) => {
      const key = element.getAttribute("data-t");
      element.textContent = i18next.t(key);
    });
  });

  // 定义翻译方法 $t
  const $t = (key) => i18next.t(key);

  console.log('测试脚本的翻译 $t：', $t("description"));
</script>

# 根目录 index.html

项目根目录也需要写一个 html，用于访问根目录 url 时控制跳转到哪个语言目录，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="Auto chess,LOL,LOLM,League of Legends,Hero,Tactical,Arena of Valor,MLBB,Mobile Legend: BangBang,Dota">
    <meta name="description" content="Golden Spatula is a champion auto-battler strategy mobile game. It is one of the ‘TFT franchise’ titles together with Teamfight Tactics and Teamfight Tactics Mobile from Riot Games, and is a mobile-exclusive game built primarily with the mobile audience in mind.In Golden Spatula, players need to fully utilize their intellect to recruit champions from a random pool and form the best lineup. They can empower their lineup by leveling up their champions, gearing them with various items including the powerful golden spatula itself. In each match, eight players use their battle formations to engage in one-on-one combat, continuously eliminating each other until the final victorious player remains.">
    <title>Golden Spatula</title>
    <script>
      // 获取语言偏好
      const getPreferredLanguage = () => {
        // 从Cookie中获取语言
        const getCookie = (name) => {
          const value = `; ${document.cookie}`;
          const parts = value.split(`; ${name}=`);
          if (parts.length === 2) return parts.pop().split(';').shift();
        };

        // 获取浏览器默认语言
        const browserLang = navigator.language || navigator.userLanguage;

        // 优先从Cookie中获取语言，如果没有则使用浏览器默认语言
        return getCookie('lang') || browserLang.split('-')[0];
      };

      let lang = getPreferredLanguage();

      const LANG_LIST = ['en', 'zh', 'th']
      lang = LANG_LIST.includes(lang) ? lang : LANG_LIST[0]

      // 获取页面路径
      const pathname = window.location.pathname;
      const pathfirst = pathname.substring(0, pathname.lastIndexOf('/'));
      const pathlast = pathname.substring(pathname.lastIndexOf('/') + 1, pathname.length);

      window.location.href = `${pathfirst}/${lang}/${pathlast}${window.location.search}`
    </script>
  </head>
  <body>
  </body>
</html>

← 相关 SDK →