JS: i18n.t("SOME TEXT TO BE TRANSLATED.")
JSON: "SOME TEXT TO BE TRANSLATED.": "Een stukje tekst om te vertalen"
i18n.t("SOME TEXT TO BE TRANSLATED.") 给我 "SOME TEXT TO BE TRANSLATED.".
如果我删除"." (点)来自标签和函数t,而不是文本被翻译.
怎么解决这个?
我在我的应用程序中使用Backbone.js,在我的应用程序中使用i18next插件作为语言切换功能.当我将值传递给函数调用中的lng选项时init,它会正确翻译我的页面.
现在我想通过语言选择器动态执行此操作.我有<select> 四种语言,我想将所选语言的值传递给lnginit函数的选项.
这是我的代码:
HTML
<div class="col-xs-6>
<select class="form-control language-selector">
<option value="de">Deutsch</option>
<option value="en">English</option>
<option value="fr">Français</option>
<option value="it">Italiano</option>
</select>
</div>
Run Code Online (Sandbox Code Playgroud)
JavaScript的
i18next.init({
debug: true,
languages: ['de','en','fr','it'],
lng: 'de',
fallbackLng: false,
load: 'current',
resources: resBundle
}, function(err, t){
});
'change .language-selector': function(e){
e.preventDefault();
i18next.setLng($(e.target).val(), (err, t) => {
console.log(arguments);
this.render();
});
}
Run Code Online (Sandbox Code Playgroud) 我在IIS上运行单页应用程序,并使用i18next库在我的应用程序中进行翻译.问题是,有时当我向translate.json文件添加新关键字并点击刷新时,浏览器仍会使用旧的缓存翻译文件,这会导致用户看到添加的关键字而不是翻译.例如,如果我添加一个关键字,"somekey": "Some text here..."那么somekey将显示而不是指定的文本.
由于我的translation.json文件位于一个名为localesthis 的文件夹中:
locales
en
translation.json
Run Code Online (Sandbox Code Playgroud)
我尝试将以下设置添加到web.config:
<location path="locales">
<system.webServer>
<staticContent>
<clientCache cacheControlMode="DisableCache" />
</staticContent>
</system.webServer>
</location>
Run Code Online (Sandbox Code Playgroud)
但是,当我使用Chrome开发人员工具查看网络流量时,我注意到translate.json文件仍然来自缓存并且Cache-Control: no-cache标头丢失.为什么这不起作用?什么是禁用文件缓存的正确方法?
编辑:刚刚再次检查该网站,似乎translate.json文件现在有Cache-Control: no-cache标题,每次刷新页面时,实际上都是从服务器检索它.此时我认为该问题可能与我们的发布过程有关,而配置更改未应用.不过不确定.
这是我第一次使用 i18next,我不知道如何让它发挥作用。(对我来说文档似乎不完整)这是我使用 i18next 的 HTML 代码
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/4.0.0/i18next.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.1.0/jquery-i18next.min.js"></script>
<script src="/i18nextXHRBackend.min.js"></script>
</head>
<body>
<div id="test">
<a data-i18n="Hello"></a>
<div data-i18n="World"></div>
</div>
<script>
i18next
.init({
"debug": true,
"lng": "en",
"ns": [
"translation"
],
"fallbackLng": false,
"keySeparator": false,
"nsSeparator": false,
resources: {
"backend": {
"loadPath": "locales/{{lng}}/{{ns}}.json"
}
}
}, function(err, t) {
jqueryI18next.init(i18next, $);
$('#test').localize();
});
</script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这是我的 JSON:
{ "Hello" : "英语你好", "World" : "英语世界" }
我的页面中没有显示任何内容,在控制台中我得到了这个
i18next::translator: missingKey en translation Hello …Run Code Online (Sandbox Code Playgroud) 我i18next通过传递语言代码(en-UK)来调用更改语言函数,如下所示:
var changeLng = function (varLng) {
i18next.changeLanguage('en', (err, t) => {
if (err) return console.log('something went wrong loading', err);
t('applog'); // -> same as i18next.t
});
};
Run Code Online (Sandbox Code Playgroud)
我遇到以下问题:
VM4081 i18next.js:1912 Uncaught TypeError: Cannot read property 'toResolveHierarchy' of undefined
at setLng (VM4081 i18next.js:1912)
at I18n.changeLanguage (VM4081 i18next.js:1927)
at changeLng (VM4079 langUK.js:23)
at HTMLImageElement.<anonymous> (VM4079 langUK.js:8)
Run Code Online (Sandbox Code Playgroud)
i18next我认为尝试执行该操作时出现了问题:
_this4.languages = _this4.services.languageUtils.toResolveHierarchy(l);
Run Code Online (Sandbox Code Playgroud)
但我看不出正确执行此操作需要什么。预先感谢您的支持,杰克
我遵循了react-i18next文档并将我的React应用程序国际化。
我使用useTranslation钩子,它给了我“t”对象。现在一切都很好很顺利,但是我有一些位于组件树之外的非 Hook 实用函数。
如何访问那里的翻译对象?
我目前在网站的本地化过程中遇到了障碍。使用 i18next,我们的所有路由都会被翻译,并且默认语言会从 URL 中删除区域设置路径。
换句话说:
/accueil -> /en/home
/produits -> /en/products
等等...
我的问题是,当我更改语言时,网址不跟随(这是预期的,因为 i18next 不直接与反应路由器对话)。
i18下一个配置:
i18n
.use(detector)
.use(initReactI18next)
.init({
whitelist: ['fr', 'en'],
fallbackLng: 'fr',
defaultNS: 'common',
detection: {
lookupFromPathIndex: 0,
checkWhitelist: true
},
interpolation: {
escapeValue: false
},
resources: {
en: {
routes: enRoutes,
[...]
},
fr: {
routes: frRoutes,
[...]
}
}
});
Run Code Online (Sandbox Code Playgroud)
fr/routes.json:
{
"home": "/accueil",
"products": "/produits",
[...]
}
Run Code Online (Sandbox Code Playgroud)
en/routes.json:
{
"home": "/en/home",
"products": "en/products",
[...]
}
Run Code Online (Sandbox Code Playgroud)
app.jsx 中的路由器部分:
<Router forceRefresh>
<Switch>
<Route path={`/:locale(en|fr)?${t('routes:home')}`} component={HomeComponent} /> …Run Code Online (Sandbox Code Playgroud) localization internationalization i18next react-router react-i18next
我使用NextJs10.0.5 和next-i18next8.1.0 来本地化我的应用程序。众所周知,nextJs10有用于国际化路由的子路径路由。此外,我需要按语言更改页面名称。例如,我contact-us在页面文件夹中有一个文件。当我将语言更改为土耳其语时,我必须使用localhost:3000/tr/contact-us. 但是,我想在语言为土耳其语时用于localhost:3000/bize-ulasin访问该页面。contact-us所以有两个 URL,只有一个页面文件。
当我在 server.js 文件中使用带有 Express js 的自定义路由时,它可以工作。但是,当我想访问文件getStaticProps中函数内的“locale”变量时contact-us,我无法访问它。当我使用 URL 时,该getStaticProps函数返回“locale”变量未定义localhost:3000/bize-ulasin。
服务器.js
const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");
const app = next({ dev: process.env.NODE_ENV !== "production" });
const handle = app.getRequestHandler(app);
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true);
const { pathname, …Run Code Online (Sandbox Code Playgroud) 我正在设置react-i18n-next 钩子来翻译我的应用程序,我按照react-i18n-next使用的示例进行操作,但它抛出如下错误:
i18next::translator: missingKey
en-US
translation
Run Code Online (Sandbox Code Playgroud)
应用程序.js
import React, { Component, Suspense } from "react";
import { useTranslation, withTranslation, Trans } from "react-i18next";
// use hoc for class based components
class LegacyWelcomeClass extends Component {
render() {
const { t } = this.props;
return <h2>{t("title")}</h2>;
}
}
const Welcome = withTranslation()(LegacyWelcomeClass);
// Component using the Trans component
function MyComponent() {
return <Trans i18nKey="description.part1" />;
}
// page uses the hook
function Page() {
const { t, i18n } = …Run Code Online (Sandbox Code Playgroud) 我正在从 Next.js /pages迁移到/app,我有 2 种语言en和es,默认语言是en,url 结构是:
英语
西班牙语
但是,当在应用程序路由器上集成 i18n 时,我创建了一个[lang]文件夹,并遵循以下任何指南后:
https://locize.com/blog/next-13-app-dir-i18n/
https://nextjs.org/docs/app/building-your-application/routing/internationalization
我在 /app/[lang] 上的结构是:
英语
西班牙语
如果我访问example.com/,我将被重定向到example.com/en,如果我不解决这个问题,我当前的 SEO 就会出现问题,因为大多数 URL 都会发生变化。
i18next ×10
javascript ×3
reactjs ×3
next.js ×2
backbone.js ×1
caching ×1
express ×1
json ×1
localization ×1
next-i18next ×1
react-router ×1
web-config ×1