google插件实现页面的自动翻译admin4个月前更新关注私信05413 百度已收录 广告 广告 广告 公告:荻酷网每天不定时为大家更新各种实用技术教程、编曲资源,脚本源代码,插件,软件应用等资讯、绝大部分资源都包更新及经过亲测演示,下载荻酷网客户端、获取最新资源不迷路。 下载说明:如果是种子链接请下载专用工具进行下载,其它网盘链接可直接访问下载。 现状 后台自定义输入的字段,目前是没有办法做多语言的。比如:商家在B端商品详情页用中文编辑了商品详情,C端商品详情即使店铺语言设置成了英文,商品详情还是显示的是中文。 解决方案: 使用google 插件自动翻译整个页面 在c端使用google插件,翻译整个页面。 技术实现 1. 在公共的入口文件引入google插件 markdown 复制代码 1. 初始化google插件的时候,有一个很重要配置:`pageLanguage`(页面语言); 1. 插件会以`pageLanguage`为`current language`,将页面内容翻译成`target language`; xml 复制代码 <div id="google_translate_element"></div> <script type="text/javascript"> function googleTranslateElementInit() { var language = 'en'; try { var cache = window.localStorage.getItem('MULTI_LANGUAGE_PREFIX'); if (cache) { language = JSON.parse(cache).data; } else if (window.globalData.dealedBrowserLanguage) { language = window.globalData.dealedBrowserLanguage; } else if (window.globalData.shopSetting.language) { language = window.globalData.shopSetting.language; } } catch (err) { console.log(err); } console.log('googleTranslateElementInit', language); new google.translate.TranslateElement({ pageLanguage: language }, 'google_translate_element'); } </script> <script type="text/javascript" src="https://translate.google.com/translate_a/element.js? cb=googleTranslateElementInit" ></script> 2. pageLanguage如何取值? 3. 隐藏默认样式 使用的google插件有一个缺点,就是会在页面中插件对应的dom,并且,这些没办法做到自定义。 所以解决方案是隐藏google插件自带的样式; css 复制代码 // google自动翻译的一些样式 .goog-te-banner-frame { display: none !important; } #google_translate_element, #goog-gt-tt { display: none !important; } body { top: 0 !important; } 因为我们的页面本来就已经做了多语言处理并且本身已经支持了多语言切换,只是部分通过自定义编辑的内容没有做多语言处理,我们只需要处理这一小部分没有经过多语言处理的地方就可以了。 所以: 页面一进来的时候:店铺初始化好的语言之后,根据当前语言触发google自动翻译 手动切换语言的之后,缓存当前选择的语言->刷新页面—>按照缓存的语言重新初始化google翻译插件,再执行1里面的逻辑。 4. 触发方式: ini 复制代码 export const changeGoogleLanguage = (language) => { const googTeCombo = document.querySelector('.goog-te-combo'); // 有可能执行这个逻辑的时候,google插件内容还没有初始化好,那就走else里面的逻辑,延迟500ms重新执行 if (googTeCombo && googTeCombo.children.length > 0) { const children = Array.prototype.slice.call(googTeCombo.children || []); let idx = children.findIndex((item) => item.getAttribute('value') === language); // 有可能google插件初始化好的语言列表里面没有目标语音,需要先动态的添加,不然语言无法切换 if (idx === -1) { const optionItem = document.createElement('option'); optionItem.setAttribute('value', language); optionItem.textContent = language; googTeCombo.appendChild(optionItem); idx = children.length; } googTeCombo.selectedIndex = idx; googTeCombo.dispatchEvent(new Event('change')); } else { setTimeout(() => { changeGoogleLanguage(language); }, 500); } }; 5. 不允许被自动翻译的模块 有些内容我们既没有做多语言,也不希望google api自动帮我们翻译。所以我们需要对这些内容做单独的处理。 解决方式 在不希望被自动翻译的模块的标签上面添加skiptranslate类名 ini 复制代码 <View className='title skiptranslate'>{title}</View> 不允许被自动翻译的模块 价格展示 地址 个人信息 语言/货币切换的选项 评论 系统语言(已校验过的) 按钮:例如登录、立即购买、继续购物 筛选项 默认语言 会员模块:用户信息(个人主页&首页组件综合导航) 社交媒体分享名称 存在问题 页面展示的时候,内容会先呈现默认语言,再切换成指定的语言,会闪一下。 感觉很被动,所有的翻译结果都依赖google插件,某些翻译不准,没有翻译的地方,我们无法操作。 app,微信小程序不支持 温馨提示:本文最后更新于2024-05-27 14:17:52,某些文章具有时效性,若有错误或已失效,请在下方留言 ©版权声明 相关声明 1 本站名称:荻酷网 2 本站永久网址:https://cndkk.com/ 3 本文内容仅为技术科普,请勿用于非法用途。 4本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 5 根据《计算机软件保护条例》第十七条,本站所有软件请仅用于学习研究用途。 6 本文内容未隐讳任何个人、群体、公司。非文学作品,请勿用于阅读理解的练习。 7 本网站的文章部分内容收集来源于网络,仅供大家研究学习与参考,如有侵权,请联系站长djxinhai@gmail.com进行删除处理。 感谢您的阅读代码分享# 翻译# 谷歌 五月 27 本站历史上的今天 "吼吼~~~,往年的今天站长不知道跑哪里偷懒去了~~~" 点个小爱心支持一下吧点赞13赞赏 分享QQ空间微博QQ好友海报分享复制链接收藏