【转载】一串代码给网站添加中英繁语言切换功能

原文标题：一串代码给网站添加多语言功能

作者：夏末笔记

小功能 适合个人博客使用！喜欢折腾的拿去玩玩吧！

<!-- 浮动代码开始 -->
<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>

此版本为夏末笔记二次改写的版本,可直接复制使用！喜欢折腾的可以改改样式玩玩！
原文链接：https://www.xiamo.cc/1174.html