网站的中英文切换--i18next

妖狐艹你老母 2022-05-29 13:17 328阅读 0赞

这两天公司让我做公司官网，就是几个静态页面。我都不好意思说自己是Java开发了，年后来公司基本上自己做毕业设计才写Java代码。在公司基本没有写过Java的东西，我都怀疑公司是不是看我Java太菜，让我以后就做前端了。。。然后我前端也很菜。页面做完之后要实现一个中英文切换

目录结构：

![70][]

效果图：

![70 1][]

![70 2][]

这里使用的是i18next.js:一个用来支持应用国际化的javascript库

代码：

![70 3][]

![70 4][]

![70 5][]

![70 6][]

这里可以代码有些不美观应该可以单独提取出来，这里只做演示。

实现它就这么简单，但是原理我也不太清楚（首先引入JS，然后html中用到data-i18n：感觉像angular的双向绑定，JS去加载json文件即可，JSON文件：locales/文件路径\_lan.json，\_ns会被namespace自动替换;组件默认是：resGetPath: 'locales/\_\_lng\_\_/\_\_ns\_\_.json',）

这里是使用手册：[点击打开链接][Link 1]

可以在里面模仿实现中英文的切换。

[70]: /images/20220529/8762cceb57ce4f39b7c275216423c999.png
[70 1]: /images/20220529/fe0f79f7a01942779dddc277707917ea.png
[70 2]: /images/20220529/3e2a4575210946e0b2cb5f5ddfda7c33.png
[70 3]: /images/20220529/c02d9ff8de1745f8a5f325306abbd93d.png
[70 4]: /images/20220529/b714784b9cef44808c605a8dc7aaa1fb.png
[70 5]: /images/20220529/8723041632114672905c07dcb8d76fde.png
[70 6]: /images/20220529/8273cbdc1b2e49c69b83743c07c2e17d.png
[Link 1]: https://www.i18next.com/getting-started.html

发表评论取消回复

表情：

评论列表（有 0 条评论，328人围观）

还没有评论，来说两句吧...

相关阅读

相关 uni-app 中英文切换

先看下图片代码结构 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

女爷i/ 2023年03月13日 06:40/ 0 赞/ 75 阅读

相关 Qt国际化（中英文切换）

> 这里讲一讲我实现中英文切换的过程。。。 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib

秒速五厘米/ 2023年01月01日 13:54/ 0 赞/ 150 阅读

相关 web页面国际化，web页面中英文切换，vue项目国际化----------vue-i18n详细用法。

什么是web页面国际化 web页面国际化页面国际化，就是可以让网页的文字信息，根据用户的选择，显示中文、英文、韩语、等等。如下图举例：第一张用户选择中文

╰半夏微凉°/ 2022年12月15日 11:24/ 0 赞/ 452 阅读

相关使用 vue-i18n 切换中英文

vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n 兼容性：支持 Vue.js 2.x 以上版本安装方法：

不念不忘少年蓝@/ 2022年12月13日 14:29/ 0 赞/ 203 阅读

相关 Vue-i18n 实现中英文切换

中英文切换先安装依赖 `npm install vue-i18n` 创建文件在根目录新建i18n文件 `langs/cn.js` mo

雨点打透心脏的1/2处/ 2022年10月19日 12:59/ 0 赞/ 148 阅读

相关【vue系列】i18n监听中英文变化

watch: { '$i18n.locale'(newValue) { console.log('zha') i

绝地灬酷狼/ 2022年10月08日 00:45/ 0 赞/ 287 阅读

相关网站的中英文切换--i18next

这两天公司让我做公司官网，就是几个静态页面。我都不好意思说自己是Java开发了，年后来公司基本上自己做毕业设计才写Java代码。在公司基本没有写过Java的东西，我都怀疑公司是

妖狐艹你老母/ 2022年05月29日 13:17/ 0 赞/ 329 阅读

相关 Qt 国际化（中英文切换）

1. 在工程中，新建一个资源文件，命名为translator ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

柔情只为你懂/ 2022年03月16日 09:14/ 0 赞/ 556 阅读

相关 vue中使用 vue-i18n 切换中英文

兼容性：支持 Vue.js 2.x 以上版本安装方法： npm install vue-i18n 1、准备本地的翻译信息 const messag

小灰灰/ 2021年12月19日 23:51/ 0 赞/ 252 阅读

相关 vue 中英文切换

vue2.X版本中在build/webpack.config.js文件中在属性pulgins中设置如下属性： plugins: [ new web

左手的ㄟ右手/ 2021年10月18日 16:24/ 0 赞/ 501 阅读