我有translation.json文件/locales/en/
{
"app": {
"name": "Example App"
}
}
在html，我有：
<a href="/" data-i18n="app.name">
在js：
$(document).ready(function() {
var language_complete = navigator.language.split("-");
var language = (language_complete[0]);
console.log('language', language);
$.i18n.init({
lng: language,
fallbackLng: false,
debug: false
}, function() {
$('a').i18n();
});
});
它显示app.name而不是Example App。我在代码中遗漏了什么？谢谢
我们目前需要使用Backbone.Marionette和下划线模板为中型应用添加国际化.
经过一番深入研究后,出现了两个有效的选择:
我们需要在更长的时间内本地化更多的语言(希望如此!)因此,underi18n可能会达不到,唯一可行的解决方案就是i18next.
在进一步讨论之前,我将概述我的两个问题,然后提供我所经历的完整背景和研究过程.
我发现i18n非常麻烦的一件事是你必须在你所有的onRender功能中调用它,这意味着在我们的几十个当前视图和我们未来的所有视图中添加一个调用.在我看来,纠正我,如果我弄错了,这将是这样的:
MyView = Marionette.ItemView.extend({
template: myUnlocalizedTemplate,
onRender: function () {
/* ... some logic ... */
this.$el.i18n();
}
/* And everything else... */
});
并反复重复.
从实施和维护的角度来看,我觉得这很不方便,所以我开始深入研究Backbone和Marionette,记得从过去的项目中有一些全局预处理模板的方法.
我偶然发现了Marionette.Renderer,它似乎是这项工作的正确工具.但在进入i18next的完整安装和实现之前,我想确保我走在正确的道路上.
因为如果我可以清楚地看到如何underi18n并_.template(under18n.template(myTemplate, t));可能与渲染器以及集成和提供给我一个全球性的解决方案,预处理和本地化我的模板,我不那么肯定去与i18next在这种情况下的方式.
事实上我找不到任何人这样做的例子也让我担心,每个人都要使用车把模板还是.i18n()在每个视图中手动调用？在这一点上,没有jquery元素可以绑定翻译,所以我很困惑这可能是怎么回事.
将是一个非常赞赏的答案,提供我想要完成的一个例子,进一步的文档或途中的提示!
internationalization i18next marionette underscore.js-templating
我已经成功实现了i18next,顺便说一句,它是一个很棒的库!虽然我仍在寻找"最佳实践".这是我现在的设置,一般来说我喜欢:
var userLanguage = 'en'; // set at runtime
i18n.init({
lng : userLanguage,
shortcutFunction : 'defaultValue',
fallbackLng : false,
load : 'unspecific',
resGetPath : 'locales/__lng__/__ns__.json'
});
在DOM中我做这样的事情:
<span data-i18n="demo.myFirstExample">My first example</span>
在JS中我做这样的事情:
return i18n.t('demo.mySecondExample', 'My second example');
这意味着我在代码本身内维护英文翻译.但是我translation.json使用i18next-parser 使用单独的文件维护其他语言:
gulp.task('i18next', function()
{
gulp.src('app/**')
.pipe(i18next({
locales : ['nl','de'],
output : '../locales'
}))
.pipe(gulp.dest('locales'));
});
这一切都很棒.唯一的问题是,当我设置'en'为userLanguage,i18next坚持提取/locales/en/translation.json文件,即使它不包含任何翻译.为了防止404,我当前{}在该文件中提供了一个空的json对象.
有没有办法防止加载空的.json文件？
我试图连接功能NextJS /阵营的应用程序，使用“与-终极版-传奇”和“有-终极版”到“下i1iN”（https://github.com/isaachinman/next-i18next） -但是当我的应用程序启动时，我收到以下错误：
错误：如果您的自定义 _app.js 文件中有 getInitialProps 方法，则必须显式返回 pageProps。更多信息请参见：https : //github.com/zeit/next.js#custom-app
类型错误：无法读取 Function.getInitialProps 处未定义的属性“namespacesRequired”（/Users/cerulean/Documents/Projects/PAW-React/node_modules/next-i18next/dist/hocs/app-with-translation.js:94:57）在 process._tickCallback (internal/process/next_tick.js:68:7)
但是我在我的_app.js.
// _app.js
static async getInitialProps({ Component, ctx }) {
const pageProps = {};
let temp;
if (Component.getInitialProps) {
temp = await Component.getInitialProps({ ctx });
}
Object.assign(pageProps, temp);
return { ...pageProps };
}
也许我将各种 HOC 连接在一起的方式有问题？在_app.js我有：
export default withRedux(createStore, { debug: false })(withReduxSaga({ async: true })(i18nInstance.appWithTranslation(MyApp)));
在我的index.js我有：
// index.js
const mapStateToProps = (state) => ({ …我正在尝试使用 useTranslation() 挂钩在我的 create-react-app 应用程序上实现 react-i18next。
但是，在控制台中，调试模式显示
i18next::backendConnector: 为语言加载命名空间 billingAddress 失败，将 /locales/en/billingAddress.json 解析为 json
和
i18next::translator: missingKey en billingAddress Form.email 客户电子邮件（默认）
i18next.ts
import {initReactI18next} from "react-i18next";
import i18next from "i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import Backend from 'i18next-xhr-backend';
import XHR from "i18next-xhr-backend";
i18next
// .use(Backend)
.use(LanguageDetector)
.use(XHR)
.use(initReactI18next) // passes i18n down to react-i18next
.init({
lng: "en",
fallbackLng: {
'en-US':['en'],
'zh-CN':['cn'],
default:['en']
},
debug: true,
ns: ['billingAddress'],
defaultNS: 'billingAddress',
// load: "currentOnly",
interpolation: {
escapeValue: false // react already safes …我的 React 组件使用 i18next 的翻译，我正在尝试使用 JEST 为其创建测试。但是，没有任何内容被翻译，我尝试模拟下面的 useTranslation 函数：
const useMock : any = [(k: any) => k, {}];
useMock.t = (k: any) => k;
useMock.i18n = {};
jest.mock('react-i18next', () => ({
// this mock makes sure any components using the translate HoC receive the t function as a prop
/* tslint:disable-next-line:variable-name */
useTranslation: () => useMock,
}));
我究竟做错了什么？
您好，我正在构建一个演示应用程序只是为了学习 React，但我对翻译过程有点困惑。我想要做的是拥有一个多语言网站，默认语言为“希腊语”，辅助语言为“英语”。当启用希腊语时，URL 不应在 URL 中包含任何区域设置，但当启用英语时，应使用 /en/ 重写 URL。
i18n 配置
import translationEn from './locales/en/translation';
import translationEl from './locales/el/translation';
import Constants from './Utility/Constants';
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'el',
debug: true,
ns: ['translations'],
defaultNS: 'translations',
detection: {
order: ['path'],
lookupFromPathIndex: 0,
},
resources: {
el: {
translations: translationEl
},
en: {
translations: translationEn
}
},
interpolation: {
escapeValue: false, // not needed for react as it escapes by default
}
}, () => {
// Why the fuck this doesnt …我使用 React+i18next 并且我的网站上有两种语言。
如何更改我的页面上的 HTML 'lang' 属性？
我使用 i18next-browser-languageDetector 但 lang attr 没有改变
我使用 nextJS 10，我选择 nextJS 10 的主要原因是我可以做 SSR 并使用 i18n。 国际化路由是一个新的下一个 js 10 功能，并且只有一个页面到该功能。
但是当我要进行部署时，会出现此错误：i18n 支持与下一次导出不兼容。 在国际化路由页面中没有任何相关内容。
下一个.config.js
const withImages = require('next-images')
const path = require('path')
module.exports = withImages({
esModule: false,
i18n: {
locales: ['en-US', 'pt-BR', 'pt-PT', 'es-ES'],
defaultLocale: 'pt-BR',
},
});
我创建了一个翻译存档，使下一个路由器 obs 成为条件：PT 和 EN 是带有文本的 JSON 文件
import * as pt from "./pt";
import * as en from './en';
import { useRouter } from "next/router"
export const traducao = …react-i18next:: 你需要使用 initReactI18next 传入一个 i18next 实例
我最近添加了该包并出现此错误。据我所知，我已按照所有步骤进行操作。
我将 Next.js 与next-i18next通常自动初始化的包一起使用。
i18next ×10
reactjs ×5
javascript ×4
html ×2
next.js ×2
typescript ×2
attributes ×1
deployment ×1
jestjs ×1
jquery ×1
json ×1
lang ×1
marionette ×1
multilingual ×1
react-hooks ×1
react-router ×1
redux ×1
ts-jest ×1