如何使用 Weglot 仅加载特定于语言的 .json 以防止同时加载多个动画？

Question

我使用 Weglot 将网站翻译成 3 种语言。在页面上，我的 Hero 部分有一个 json 文件。每种语言总共有 3 个 json 文件变体，根据当前语言，这些变体应该是可见的。我已经指定了 CSS 属性来显示和隐藏它们，但它们仍然在页面加载时同时加载

<style>
  /* English */
  html:lang(en) .en-element {  
    height: auto !important;
    width: auto !important;
  }
  html:not([lang="en"]) .en-element {
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
  
  /* French */
  html:lang(fr) .fr-element { 
    height: auto !important;
    width: auto !important;
  }
  html:not([lang="fr"]) .fr-element {
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* Italian */
  html:lang(it) .it-element { 
    height: auto !important;
    width: auto !important;
  }
  html:not([lang="it"]) .it-element {
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
</style>

问题：如何确保每个特定翻译只加载一个对应版本的 json 文件？

我预计可以用CSS来做。

Answer 1

我认为仅靠 CSS 无法动态加载资源，也许可以尝试添加 JavaScript。

试试这个：

// Retrieve the current language from the HTML lang attribute
const currentLanguage = document.documentElement.lang;

// Select the JSON element corresponding to the current language
const jsonElement = document.querySelector(`.${currentLanguage}-element`);

// Loop through all JSON elements and hide them
document.querySelectorAll('[class$="-element"]').forEach(element => {
    element.style.display = 'none';
});

// Show the JSON element corresponding to the current language
jsonElement.style.display = 'block';

将此 JavaScript 代码放在 HTML 内容之后或 HTML 文件的脚本标记内。该脚本将隐藏所有 JSON 元素，仅显示与当前语言对应的元素。

不要忘记将

.${currentLanguage}-element

替换为 HTML 中每个 JSON 元素使用的实际类名称。