参考:
使用 i18next 的 jQuery 国际化 (i18n) 渐进式指南 (locize.com)
i18next-http-backend/example/jquery/index.html at master · i18next/i18next-http-backend (github.com)
文档
可能需要解决一下跨域问题,因为浏览器读取本地文件:加载本地文件出现跨域解决方案 - 知乎 (zhihu.com)
先看效果:
代码:
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><metaname="viewport"content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/><title>Document</title><script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/22.5.0/i18next.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.1/jquery-i18next.min.js"></script><script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.2/i18nextHttpBackend.min.js"></script><script src="https://cdn.jsdelivr.net/npm/i18next-http-backend@1.3.2/i18nextHttpBackend.min.js"></script><script src="https://cdn.jsdelivr.net/npm/i18next-browser-languagedetector@6.1.3/i18nextBrowserLanguageDetector.min.js"></script></head><body><div data-i18n="[html]data"></div><div data-i18n="data2"></div></body><script>i18next.use(i18nextBrowserLanguageDetector).use(i18nextHttpBackend).init({debug: false,fallbackLng: "en",backend: {loadPath: "locales/en/demo.json",},},function (err, t) {jqueryI18next.init(i18next, $, { useOptionsAttr: true });$("body").localize();});</script>
</html>
json:
{"data": "<b>data</b>","data2":"data123"
}