前端网页国际化 translate.js,高效率翻译,傻瓜式教学

这篇具有很好参考价值的文章主要介绍了前端网页国际化 translate.js,高效率翻译,傻瓜式教学。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先实验一下

什么?你不信?

 那先简单实验一下吧,首先我们随便打开一个网站,然后F12——>检查——>控制台,复制以下代码,回车即可

 var head= document.getElementsByTagName('head')[0];
 var script= document.createElement('script');
 script.type= 'text/javascript';
 script.src= 'https://res.zvo.cn/translate/inspector_v2.js';
 head.appendChild(script);

选择一个语种,就翻译成功了

 ok实战开始

在网页底部加上以下代码


		<script src="https://res.zvo.cn/translate/translate.js"></script>
		<script>
		  translate.setUseVersion2(); //设置使用v2.x 版本
		  translate.language.setLocal(''); //设置本地语种(当前网页的语种)。如果不设置,默认自动识别当前网页显示文字的语种。
		  translate.execute();//进行翻译 
		</script>

就像这样get http://res.zvo.cn/translate/js/element.js net::err_abor,前端

 

默认他会给我们加一个id为 translate  的div盒子,我们可以把这个盒子放在我们需要的位置即可

<div id="translate"></div>

这是前后对比的效果

get http://res.zvo.cn/translate/js/element.js net::err_abor,前端

 也是非常的nice,非常的哇塞啊!!!!

发现的一些问题

我们发现加载的时候要好久才能加载出来,如果你的网络很好的话,就不存在这种问题,我昨天也是加载2,3分钟才出来,后来 翻墙 了一下,立马就出来了。

有同样问题的小伙伴,去挂个梯子试试

官网

官网目前还不是很完善,有兴趣的小伙伴,可以去看看

translate.api 开放接口_各项目模块说明_translate  

git库:translate: 两行js实现html全自动翻译,页面无需改动,无语言配置文件,无API Key,对SEO友好!文章来源地址https://www.toymoban.com/news/detail-791236.html

到了这里,关于前端网页国际化 translate.js,高效率翻译,傻瓜式教学的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是前端国际化(internationalization)和本地化(localization)?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月04日
    浏览(44)
  • next.js app目录 i18n国际化简单实现

    最近在用next写一个多语言的项目,找了好久没找到简单实现的教程,实践起来感觉都比较复杂,最后终于是在官方文档找到了,结合网上找到的代码demo,终于实现了,在这里简单总结一下。 此教程适用于比较简单的项目实现,如果你是刚入门next,并且不想用太复杂的方式去

    2024年04月22日
    浏览(38)
  • 【国际化Intl】Flutter 国际化多语言实践

    提示:这里参考一下几个链接 例如: https://github.com/ThinkerWing/language https://juejin.cn/post/6844903823119482888 这篇也很详细,还有包括兼容中文的繁体简体… 可以看看 该分支对应的提交是使用Android Studio 和 Flutter Intl插件 并根据掘金这篇文章的实践,兼容汉字简体和繁体字 https://g

    2023年04月23日
    浏览(59)
  • SpringBoot——国际化

    优质博文:IT-BLOG-CN 【1】编写国际化配置文件; 【2】使用 ResourceBundleMessageSource 管理国际化资源文件; 【3】在页面使用 ftp:message 取出国际化内容; 【1】创建 i18n 目录,并创建 login.properties 国际化默认配置文件,同时创建 login_zh_CN.properties 系统就会自动识别到是配置国际化

    2024年02月05日
    浏览(60)
  • C++国际化编程

    字节(octet)是一个八位的存储单元,取值范围一定是0~255。而字符(character,或者word)为语言意义上的符号,范围就不一定了。例如在UCS-2中定义的字符范围为0~65535,它的一个字符占用两个字节。 字符0xabcd如果存储为 AB CD,则称为Big Endian;如果存储为 CD AB,则称为Litt

    2024年02月10日
    浏览(74)
  • hyperf 十四 国际化

    官方网址:Hyperf 文件结构:         /storage/languages/en/messages.php         /storage/languages/zh_CH/messages.php 创建文件 /config/autoload/translation.php。 多语言的调用从注入开始,即HyperfTranslationTranslator::__construct(TranslatorLoaderInterface $loader, string $locale)方法。根据配置文件Translato

    2024年02月11日
    浏览(57)
  • springcloud微服务国际化

    单体应用完成国际化还是比较简单的,可以看下面的示例代码。 引入必要的依赖 创建一个拦截器 创建一个配置类 然后在 resource 下创建 i18n 目录,选中右键 New = Resource Bundle 填入 base name ,选择 Project locales ,再 Add All ,确定即可。 打开配置文件,填写对应的中英文数据 配置

    2023年04月09日
    浏览(141)
  • SpringBoot复习:(36)国际化

    一、Resources目录下建立一个目录(比如international)来存储资源文件 message.properties 空的,但不能没有 message_zh_CN.properties message_en_us.properties 二、自动配置类MessageSourceAutoConfiguration 常量MESSAGE_SOURCE_BEAN_NAME为messageSource,也就是有这个名字的bean,则自动配置失效。 因为有@Conditional(R

    2024年02月13日
    浏览(51)
  • 微信小程序国际化

    参考文件: 国际化(微信小程序+TS 微信小程序国际化 https://github.com/wechat-miniprogram/miniprogram-i18n 注意:一定要注意项目目录结构,新建文件夹miniprogram,并把前面新建的文件移到这个目录中 在NEW-FAN-CLOCK1 中安装根目录依赖 在NEW-FAN-CLOCK1 / minprogram 中安装依赖 1、初始化仓库: 一

    2023年04月26日
    浏览(42)
  • vue2+element-ui使用vue-i18n进行国际化的多语言/国际化

    注意:vue2.0要用8版本的,使用9版本的会报错 在src目录下,创建新的文件夹,命名为i18n zh.js en.js index.js main.js 使用方式一 效果图 使用方式二 效果图 使用方式三,在 效果图 ` 注意:这种方式存在更新this.$i18n.locale的值时无法自动切换的问题,需要刷新页面才能切换语言。解

    2024年02月07日
    浏览(69)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包