只需要在html页面中写几行代码,即可实现中文简体,中文繁体,英文三种语言的切换(注意是在线引入,确保电脑有网络的情况下)
1
在head标签中写:
<!-- 引入翻译包 --> <script src="https://res.zvo.cn/translate/translate.js"></script>
2
在body标签中写:
<!-- ignore 此类名下的内容不会被翻译 --> <ul class="ignore"> <li><a href="javascript:translate.changeLanguage('chinese_simplified');">简体中文</a></li>| <li><a href="javascript:translate.changeLanguage('chinese_traditional');">繁體中文</a></li>| <li><a href="javascript:translate.changeLanguage('english');">English</a></li>| </ul>
ok,现在刷新网页看下,应该已经可以了。
以上三种是默认的,更多语言需要再引入多语言的包,加上下面代码即可
<!-- 引入多语言切换的js --> <script src="https://cdn.staticfile.net/translate.js/3.2.1/translate.js"></script> <script> translate.selectLanguageTag.show = true; //是否显示select的选择语言框 translate.service.use('client.edge'); translate.execute(); </script>
案例源码
下面是我写的个小案例,你可以一键复制看看效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入翻译包 --> <script src="https://res.zvo.cn/translate/translate.js"></script> <style> body { width: 1200px; margin: 0 auto; } nav { height: 60px; background-color: #f8f8f8; } ul { display: flex; align-items: center; height: 100%; } li { list-style-type: none; } nav a { text-decoration: none; font-weight: 700; color: #333; font-size: 15px; display: block; width: auto; padding: 0 20px; box-sizing: border-box; } p { line-height: 26px; } .ignore li a { margin: 0 10px; font-size: 15px; display: block; width: auto; } </style> </head> <body> <!-- ignore 此类名下的内容不会被翻译 --> <ul class="ignore"> <li><a href="javascript:translate.changeLanguage('chinese_simplified');">简体中文</a></li>| <li><a href="javascript:translate.changeLanguage('chinese_traditional');">繁體中文</a></li>| <li><a href="javascript:translate.changeLanguage('english');">English</a></li>| <li><a href="javascript:translate.changeLanguage('korean');">korean</a></li> </ul> <nav> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">产品中心</a> </li> <li> <a href="#">成功案例</a> </li> <li> <a href="#">关于我们</a> </li> <li> <a href="#">联系我们</a> </li> </ul> </nav> <img style="width: 100%;height: 300px; object-fit: cover;" src="https://images.pexels.com/photos/5075320/pexels-photo-5075320.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" alt=""> <section class="about"> <h3>互联网公司</h3> <p> 互联网公司是指专门从事互联网相关业务的公司。这些公司的业务范围涵盖互联网技术、 互联网服务、互联网平台等领域,例如电子商务、社交媒体、在线广告、云计算、搜索引擎、 在线支付等。互联网公司利用互联网技术和平台,为用户提供各种在线服务和产品, 以满足人们的信息获取、交流、购物、娱乐等需求。这些公司通常具有创新性、快速发展和全球化特点,成为当今科技产业中的主要力量。 互联网公司是致力于利用互联网技术和数字化平台,提供创新服务和产品的企业。这些公司以在线商务、 数字内容、信息传播、社交互动等为主要业务领域,通过互联网连接用户与服务的桥梁,满足用户需求并创 造商业价值。互联网公司的特点包括快速迭代、用户体验优化、数据驱动等,具有颠覆传统产业,推动社会 变革的潜力。在数字经济时代,互联网公司不断挑战传统商业模式,引领着未来的创新发展方向。 </p> </section> <!-- 加上下面这几行代码 即可翻译几十种语言 --> <!-- 引入多语言切换的js --> <script src="https://cdn.staticfile.net/translate.js/3.2.1/translate.js"></script> <script> translate.selectLanguageTag.show = true; //是否显示select的选择语言框 translate.service.use('client.edge'); translate.execute(); </script> </body> </html>
translate.js,实现html页面的多语言
两行js实现html全自动翻译。无需改动页面、无语言配置文件、无API Key、对SEO友好!
更多使用方法,到项目地址:
https://gitee.com/mail_osc/translate