LOL前端重构规范

# 海外 - 相关 SDK

以下所有 sdk 示例，都在 通用模板 里有写，也可以复制模版代码到本地测试

# 国际化组件 i18next

通过 url 的语言参数 lang 确定当前语言，例如 https://goldenspatula.com/act/a20241011testplugin/?lang=th

提示

若是每种语言对应一个 html 请看 多语言区分html

<script src="https://goldenspatula.com/plugins/i18next/i18next.min.js"></script>
<script>
  // 读取 url 参数
  const queryParams = new URLSearchParams(location.search)
  // 获取浏览器默认语言
  const browserLang = (navigator.language || navigator.userLanguage).split('-')[0]
  // 临时语言
  const tempCurLang = queryParams.get('lang') || browserLang
  // 所有语言
  const LANG_LIST = ['en', 'zh', 'th']
  // 判断当前语言，优先级：url lang 参数 -> 浏览器语言 -> 默认语言 en
  const currentLang = LANG_LIST.includes(tempCurLang) ? tempCurLang : LANG_LIST[0]

  // 初始化翻译工具
  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>

翻译文件 langResources 格式可查看 通用模板

html 中翻译的文案写法：
通过标签内 data-t 属性承载翻译的 key，标签内不需要写内容，会自动填上翻译好的文案进去

<!-- 翻译测试 在标签中用 data-t 属性承载翻译的 key -->
<h1 data-t="title"></h1>
<p data-t="description"></p>
<div><span data-t="Please choose a login method."></span></div>


# 上报方法

JKsendReportData('中文信息', 'English')

<a href="javascript:void(0);" onclick="JKsendReportData('中文信息', 'English')">测试上报</a>



<script src="https://goldenspatula.com/plugins/report/index.js"></script>
<script>
  // 读取 url 参数
  const queryParams = new URLSearchParams(location.search)
  // 初始化上报
  new OverseasReport({
    id: 'a20241011testplugin', // 项目名称
    channel: queryParams.get('media_channel') // 渠道，如需统计不同渠道的数据，通过 url 参数 media_channel 来区分
  })
</script>



<script>
  // 读取 url 参数
  const queryParams = new URLSearchParams(location.search)
</script>
<!-- 上报组件引入 -->
<script src="https://goldenspatula.com/plugins/report/index.js"></script>
<!-- cookie 管理插件引入，必须加上 type="module" 标识模块化加载此脚本 -->
<script type="module">
  import('https://goldenspatula.com/plugins/cookie/index.min.js').then(() => {
    let OReport = null
    // 初始化 cookie 管理组件
    new OverseasCookieConsent((flag) => {
      console.log('cookie偏好分析：', flag)
      // 控制是否上报
      JKReportConfig.open = flag
      // 数据上报一定要放在 cookie 组件初始化之后
      if (!OReport && flag) {
        // 如果还没初始化上报 且 允许上报，则执行一次初始化
        OReport = new OverseasReport({
          id: 'a20241011testplugin', // 项目名称
          channel: queryParams.get('media_channel') // 渠道，如需统计不同渠道的数据，通过 url 参数 media_channel 来区分
        })
      }
    })
  })
</script>



CookieConsent.showPreferences()

← 常用 JS 库 →