艺灵设计

全部文章
×

web前端实现网站带多语言切换功能的一次探索

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2018-05-27 16:36:00 - 阅: - 评:0 - 积分:0

摘要:
因工作需要,昨天艺灵折腾了下关于网站多语言切换的功能,然后发现有点小坑爹。本文采用两种方法叙述此次的探索及收获,也希望得到大神们的赐教。

昨天艺灵在网上搜索了一些关于网站国际化(多语言切换)的资料,经过尝试后感觉有些坑!!!下面还是来做个笔记吧。

一、前端采用的国际化解决方案

先奉上一篇前辈的文章《 基于jQuery.i18n.properties 实现前端页面的资源国际化》,然后还有此次用到的 juery库资源文件 jquery-i18n-properties。

上面的文章中有示例demo源码,有兴趣的看官可以复制到本地跑跑。另外,为了让看官有更直接的体验,艺灵也写了一个简单的demo,效果图如下:用jquery-i18n-properties来实现网站多语言切换功能 用jquery-i18n-properties来实现网站多语言切换功能有兴趣的看官可以 戳我体验下。这个案例虽简单,细心的看官一定可以从中学到一些新的东西。再附上面demo语言包的截图,如图:用i18n来实现网站多语言切换功能的语言包截图用jquery-i18n-properties来实现网站多语言切换功能的语言包截图

对于上面的方案,艺灵发表下自己的见解吧!

1.1、优点

因为是人工片段式翻译,所以翻译更精准!(咳咳,为了写demo,示例中的翻译是随便翻译的,不要当真!)

1.2、缺点

1、对于整站资源国际化来说,这无疑是一个非常大的工作量!
2、不利于英文版的seo优化网站收录

1.3、为何不利于seo收录?

虽然用户可以通过页面上的按钮或下拉框来选择英文,并且前台展示的也是英文,但实际的工作流程却是这样的:
初始页面是中文,切换语言后,js去动态查找网页所有要替换的数据,最后将对应的中文替换成英文。但在页面源代码中,展示的依旧是中文。此时搜索引擎过来爬的代码始终是中文,对英文收录没有一丁点儿的帮助!

二、使用成熟的平台提供的翻译api接口

怎么说呢,翻译我只选择谷歌。但用谷歌要翻墙啊!在天朝中,很多事情不是说你想搞就能搞的,所以翻墙你懂的。然后艺灵我在网上搜索到了这个可直接访问的谷歌翻译, 戳我体验下谷歌翻译吧!

虽然翻译是有了,但要和网站连接起来还是有点问题的。总不可能说让用户复制文本到粘贴到这里进行翻译后浏览吧,所以我们要实现类似方法一中的,提供按钮进行自动全文翻译

因为艺灵没有直接申请接口,所以只能走爬虫路线。然后,还是上面的案例,这里使用的是谷歌的全文翻译方法,不用再一个字段一个字段的进行存储了。动态演示图如下: 用爬虫来实现网站多语言切换有兴趣的看官可以 戳我体验下全文翻译吧。

对于上面的全文翻译方案,艺灵也发表下自己的见解吧!

1.1、优点

省时!省时!省时!没有比这个更省的了!你不需要把所有的字段都提前翻译成英文并存储起来,所以工作量可以忽略不计!

1.2、缺点

1、因为是全文翻译,可能翻译的并不是特别精准!但要相信谷歌的实力,在以后会越来越精准的!
2、同样不利于英文版的seo优化英文网站收录
3、对某些使用js进行动态追加的内容,可能会被忽略掉。比如:鼠标滑过时,动态追加的下拉菜单名tips提示层等。

三、到底还能不能愉快的玩耍了?!

抱歉了看官!在前端这方面,艺灵还真没有搜索到更好的解决文案。对于上面提到的不利于seo收录的问题,其实是有解的。那就是:翻译后动态生成一篇文章,访问英文站的时候自动跳转到这个翻译后的文章链接,这样就可以了。

如果是后端解决的话,暂时还不清楚后端用的是啥好方法。

----------完----------

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:/xwzj/2018-05-27/jquery-i18n-properties-web.html

若亲不想直保留地址,含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载,随便修改,但请尊重艺灵的劳动成果!谢谢理解。

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 网站国际化  web前端  解决文案  多国语言  中英切换  jquery  i18n.properties  谷歌翻译  translate.google  api接口  爬虫

上一篇: 老司机福利之2018超强破解百度云限速   下一篇: 淘宝店铺推广防入坑指南

相关文章

工具分享之Vue Devtools 帝国CMS7.5二次开发之制作Ajax版登 帝国CMS7.5二次开发之制作Ajax版注 帝国CMS7.5二次开发之制作Ajax版登 帝国CMS7.5二次开发之制作Ajax版登 帝国CMS7.5二次开发之制作Ajax版密 帝国CMS7.5二次开发之制作Ajax版重 帝国CMS7.5二次开发之制作Ajax版找 帝国CMS7.5二次开发之使用Ajax实现 帝国CMS7.5二次开发之使用Ajax实现

评论区

我要评论

近期更新

权限破解之一键复制某sdn上的代码块 浅聊某sdn是如何实现未登录时屏蔽复制的 bug复盘之如何优雅的实现表格跨页勾选 记一次APP内调起微信支付时首次成功唤醒,后面 记一次注销联通卡的吐血经历 2023年敬业福获取方法 bug复盘之除数为0会怎样? Vite2项目优化之线上功能有异常,如何快速排查 bug复盘之Vite2项目在线上报错,修复后却意外发 工具分享之图片压缩

热门标签

微信小程序 小程序 用户体验 uni-app gulp教程 @vuecli3 vue.js 路由守卫 vuex vue项目实战 路由 自动化构建 破解 网站管理系统 ajax php二次开发 在线生成 京东装修 破解淘宝css权限 jquery插件制作 淘宝店铺装修教程 ie6 bug jquery特效 css3 注册插件 源码分享 悬浮代码 视频教程 全屏模板框架 footer-more-trigger 鼠标滑过特效 sn-simple-logo 淘宝店铺装修经验汇总 喜欢代码 弹出层 宝贝分享代码 购物车代码 登陆插件 宝贝收藏代码 详情页全屏 天猫关注带数字 导航特效 遮罩层特效 修改淘宝销量 flash动画 模块下10px问题 二级下拉菜单 轮播特效 京东店铺装修 插件下载 淘宝漏洞 鼠标跟随 隐藏的店招/模块 css3边框阴影 赚积分

点击排行

为了抓包某app,我折腾了10天,原来他是这样防抓包的 纯css实现超宽图片全屏居中(兼容淘宝店铺) css3边框阴影效果 淘宝店内搜索框代码生成器 淘宝天猫pc端宝贝转无线端链接工具 全屏海报 如何开启HBuilder的javascript语法错误提示功能 淘宝天猫店铺装修问题与技巧性经验汇总 Vue.js实例之v-show用法 Vue.js实例之v-bind:style用法

站长推荐

在线生成软件帮助文档 实现淘宝基础版详情页导航全屏背景的方法 第二期:玩转淘宝店铺装修 网站部分文章更新动态一览表 淘宝天猫店铺装修问题与技巧性经验汇总 淘宝Widget库中轮播特效从入门到精通 曝淘宝网往期改销量多处漏洞 淘宝卖家有无必要开通css 纯css实现超宽图片全屏居中(兼容淘宝店铺) 鼠标滑过图片显示遮罩层特效集合(16种不同特效任你挑选)

代做工资流水公司宿迁贷款工资流水 打印宜春薪资流水单代开徐州查背调流水信阳工资流水代开金华自存银行流水样本上海贷款工资流水 打印北京做薪资银行流水汕头查企业对私流水宁德工资流水图片揭阳银行对公流水办理宜春打企业对私流水佛山开贷款流水黄冈工资银行流水模板保定银行流水账办理青岛银行流水办理宁德对公账户流水费用莆田银行流水账报价淮安查询工资流水账单深圳自存流水图片株洲对公流水公司重庆工资流水app截图样本济南办签证工资流水郑州背调流水价格南通公司银行流水代办中山代开房贷银行流水武汉做薪资银行流水南京企业贷流水费用湖州办背调流水包头打企业银行流水宜昌背调工资流水模板香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

代做工资流水公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化