标签: i18next
制作一个简单的静态网站多语言有哪些选择？
我正在建立一个静态网站，我想以两种语言显示。
我找不到不同选项的全面概述（例如，服务器端加载、前端加载、使用不同的文件夹。每个选项的优点是什么（例如对于 SEO、可维护性、可扩展性等）？
理想情况下，翻译将存储在单独的 json 文件中。我最关心的是翻译——不太关心 i18n 和 l10n 的其他方面。
例如，我该如何翻译：
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Welcome</h1>
<p>Here's a website</p>
<p>Here's a <a href="https://www.google.com/">Link</a> to language specific Google</p>
<button>Click here</button>
</body>
</html>
到目前为止我遇到的许多选项中的一些：
- i18next - 最标准的选项。支持大量框架，但不清楚哪一个适合大多数基本用法。i18nextify ? jquery-i18next？
- i18js - 简单，但对于 Rails？
- i18n - 在 npm 上最受欢迎，但具有构建状态
- i18n-2 - 以上的更新版本
我觉得 i18next 是最标准的方式，但它适合简单的网站吗？
推荐指数
解决办法
查看次数
i18next未加载翻译文件
我正在开发一些基于Backbone的项目,我正在使用i18next进行语言环境.
以下是我的app.js代码:
/*
This file is used to initialize your application.
*/
require(['i18n','application','handlebars_Helpers'], function(i18n, Application) {
i18n.init({
lng: 'en',
debug: true,
fallbackLng: false,
load:'unspecific',
resGetPath: "locales/__lng__/__ns__.json",
ns: {
namespaces: ['translation']
}
});
(new Application()).initialize();
});
翻译文件:
{
"loginModule": {
"signin": "Sign In"
}
}
以下是我的帮助文件:
/**
* Set of generic handlebars helpers
*/
define(['i18n'], function(i18n) {
/**
* This helper provides i18Next in templates
*
*
* Usage: span {{t "my.key" }}
*/
Handlebars.registerHelper('t', function(i18n_key) {
var result = i18n.t(i18n_key); …推荐指数
解决办法
查看次数
React 中 i18next 翻译文件中的 HTML 标签
我在一个项目中使用i18next并且无法绕过在翻译文件中包含 html 标签并正确呈现它们。
我的.json翻译文件的一个例子：
"en": {
"product": {
"header": "Welcome, <strong>User!</strong>"
}
}
这个问题有一个很好的答案，但与 JQuery 相关。我没有使用 JQuery，我的项目是 React，这是我的设置：
import i18next from 'i18next';
import en from 'locales/en';
i18next.
init({
lng: 'en',
fallbackLng: false,
resources: en,
debug: false,
interpolation: {
escapeValue: false
}
});
export default i18next.t.bind(i18next);
在组件中，我有：
import t from 'i18n';
t('product.header')
我想要的 HTML：
Welcome, <strong>User!</strong>
Html 我得到：
Welcome, <strong>User!</strong>
谢谢
推荐指数
解决办法
查看次数
使用 ReactJs Web 应用程序的 i18next-browser-language detector 检测浏览器的语言
我有一个 ReactJs 应用程序，我想为其添加本地化功能。我以前从未使用过 i18next，但我正在努力习惯它。我的问题是，我无法检测用户浏览器使用的语言。这是我的代码，您可以帮我写一些代码吗？我已经搜索了该主题的所有文档和答案，但找不到任何解决方案。
\n\n这是我的 i18n.js 文件，我将其导入到我想要使用的文件中
\n\nimport i18next from \'i18next\';\nimport languageDetector from \'i18next-browser-languagedetector\';\ni18next\n .use(languageDetector)\n .init({\n debug: true,\n fallbackLng: "en",\n resources: {\n en: {\n translation: {\n "table": {\n "fortuneId": "FortuneId",\n "name": "Name",\n "age": "Age",\n "date": "Date",\n "relationship": "Relationship",\n "note": "Note",\n "topic": "Topic",\n "question": "Question",\n "gender": "Gender",\n "rejected": "Rejected"\n },\n\n "auth": {\n "signIn": "Sign In",\n "signOut": "Sign Out",\n "joinUs": "Join Us",\n "goBack": "Go Back",\n "email": "E-mail",\n "username": "Username",\n "password": "Password",\n },\n\n "admin": {\n "employee": "Employees",\n "moderator": "Moderator",\n "admin": "Admin",\n …推荐指数
解决办法
查看次数
我们如何使用 api 调用加载翻译而不是在静态 json 中定义它们？在 React-i18next 中如何做到这一点？
在 React 应用程序中使用国际化时，需要使用 api 调用按需加载语言翻译文件，而不是预先定义它们。如何使用 React-i18next 来实现这一点？
尝试使用 React-i18next 从静态预定义文件中选取正常翻译。尝试使用 xhr-backend 但无法找到任何示例来实现按需加载翻译相关数据的要求。
推荐指数
解决办法
查看次数
如何禁用 i18next 控制台警告？
我正在使用 i18next 和 React 应用程序，但是：
每次重新渲染时这样的日志确实会减慢我的应用程序的速度：
i18next::languageUtils: rejecting non-whitelisted language code: en
我如何禁用它们？
我已将调试设置为 false。
推荐指数
解决办法
查看次数
如何使用 TypeScript 键入检查 i18n 词典？
是否可以在react-i18next字典中键入检查现有键？因此，如果密钥不存在，TS 会在编译时警告您。
例子。
假设，我们有这本字典：
{
"footer": {
"copyright": "Some copyrights"
},
"header": {
"logo": "Logo",
"link": "Link",
},
}
如果我提供不存在的密钥，TS 应该会爆炸：
const { t } = useTranslation();
<span> { t('footer.copyright') } </span> // this is OK, because footer.copyright exists
<span> { t('footer.logo') } </span> // TS BOOM!! there is no footer.logo in dictionary
这种技术的正确名称是什么？我很确定我不是唯一一个要求这种行为的人。
它是react-i18next开箱即用的吗？是否有 APIreact-i18next以某种方式扩展库以启用它？我想避免创建包装函数。
推荐指数
解决办法
查看次数
如何从 api 端点正确加载 next-i18next 中的 i18n 资源？
我有一个 nextjs 应用程序，我想使用 i18next 和 next-i18next （https://github.com/isaachinman/next-i18next）扩展它。
默认配置是在 下查找 json 文件./public/locales/{lng}/{ns}.json，其中 lng 是语言，ns 是命名空间。
然而，我的要求是，这应该从 api 端点提供。我正在努力寻找正确的配置，因为它next-i18next现在忽略我的设置，并且没有向我的后端发出任何 xhr 请求。
下一个-i18next.config.js：
const HttpApi = require('i18next-http-backend')
module.exports = {
i18n: {
defaultLocale: 'de',
locales: ['en', 'de'],
},
backend: {
referenceLng: 'de',
loadPath: `https://localhost:5001/locales/de/common`,
parse: (data) => {
console.log(data)
return data
}
},
debug: true,
ns: ['common', 'footer', 'second-page'], // the namespaces needs to be listed here, to make sure they got preloaded
serializeConfig: false, // because …推荐指数
解决办法
查看次数
Vue 3 - useI18n - 未捕获的语法错误：必须在“setup”函数的顶部调用
我有一个问题useI18n我有一个无法解决的无论我做什么，我都无法让 i18n 翻译正常工作，并且在我的控制台中永远看到以下消息：
\n\n\n
setup未捕获的语法错误：必须在函数顶部调用
堆栈跟踪显示，useI18n()尽管该函数位于名为 的函数内，但调用该函数时会发生这种情况setup。堆栈跟踪的下一个级别显示，在“useI18n()”函数中，由于未检测到我的应用程序的实例，因此引发了异常。
function useI18n(options = {}) {\n const instance = getCurrentInstance();\n if (instance == null) {\n throw createI18nError(I18nErrorCodes.MUST_BE_CALL_SETUP_TOP);\n }\n...\n我的代码如下：
\nmain.js
\n// frontend/src/main.ts\n\nimport i18n from './i18n';\n\nimport Vue, { createApp } from 'vue';\n\nimport axios from 'axios';\nimport VueAxios from 'vue-axios';\n\nimport App from './App.vue';\n\n//Vue.use(VueI18n);\n\nconst app = createApp(App);\napp.use(VueAxios, axios, i18n);\napp.provide('axios', app.config.globalProperties.axios);\napp.mount('#i-english-editor');\n\nconsole.log(app);\ni18n.ts
\nimport { createI18n } from "vue-i18n";\n\nconst i18n = createI18n({\n legacy: false,\n …推荐指数
解决办法
查看次数
获取当前语言 next-i18next
我正在将 NextJS 与 next-i18next 一起使用。这是我的主页：
import {withTranslation} from '../config/next-i18next';
const Home = function Home() {
return (<div>test</div>)
};
Home.getInitialProps = async () => {
return {namespacesRequired: ['home']}
};
export default withTranslation('home')(Home);
我想要的是在组件/页面中获取当前语言，我该怎么做？
推荐指数
解决办法
查看次数
标签 统计
i18next ×10
reactjs ×6
html ×2
javascript ×2
next.js ×2
backbone.js ×1
localization ×1
multilingual ×1
node.js ×1
requirejs ×1
translation ×1
typescript ×1
vue.js ×1