网站多语言（2行js）

雪天前端

于 2024-07-22 10:03:37 发布

阅读量452

点赞数 7

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/qq_43422957/article/details/140601891

版权

本文首发于公众号【雪天前端】

只需要在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