一串代码给网站添加多语言功能

提示：本文共计 1603 字，阅读大概需要 6 分钟。

之前一直想给网站添加一个多语言切换的功能，虽然网站也没啥人看，更别说外国友人了🤣

后面折腾了好多插件，要么就是收费，要么就是要手动翻译啥的，比较麻烦🥲

前几天在新锐博客看见关于多语言功能的教程，学习了一下，感觉非常不错，分享给大家⌯oᴗo⌯

开源地址

gitee：https://gitee.com/mail_osc/translate

调用代码

<!-- 浮动代码开始 -->
<div id="left_layer" style="position:fixed; top:150px; right:0px;z-index:999;">
<!-- 增加语言选择的下拉框 -->
<select id="language-select" onchange="changeLanguage()">
    <option value="english">English</option>
    <option value="chinese_simplified">简体中文</option>
    <option value="chinese_traditional">繁體中文</option>
</select>

<!-- 引入多语言切换的js -->
<script src="https://cdn.staticfile.net/translate.js/3.2.1/translate.js"></script>
<script>
    translate.selectLanguageTag.show = false; // 不出现的select的选择语言
    translate.service.use('client.edge'); // 设置机器翻译服务通道

    function changeLanguage() {
        const selectedLanguage = document.getElementById('language-select').value;
        translate.changeLanguage(selectedLanguage);
        translate.execute();
        localStorage.setItem('selectedLanguage', selectedLanguage); // 保存选择的语言
    }

    // 页面加载时设置选择框的值和语言
    document.addEventListener('DOMContentLoaded', function() {
        const savedLanguage = localStorage.getItem('selectedLanguage') || 'chinese_simplified'; // 默认选择英文
        document.getElementById('language-select').value = savedLanguage; // 设置选择框的值
        translate.changeLanguage(savedLanguage); // 设置翻译语言
        translate.execute(); // 执行翻译
    });
</script>
<a href="javascript:;" onclick="javascript:document.getElementById('left_layer').style.display='none';">关闭</a>
</div>

由于直接引用会影响前台显示效果，所以夏末加了一段靠右侧的浮动代码，默认语言也改成了中文，不喜欢的可以直接去掉哈⁄(⁄⁄•⁄ω⁄•⁄⁄)⁄

显示效果