普通视图

发现新文章,点击刷新页面。
昨天以前首页
  • ✇新锐博客
  • 给自己网站添加多语言功能莫忘
    前言 群里有朋友需要网站适配多语言,但其实一个引用就可以搞定这个问题 开源地址 gitee:https://gitee.com/mail_osc/translate 教程 在需要的地方添加如下代码 <!-- 增加语言选择的下拉框 --> <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">&
     

给自己网站添加多语言功能

作者 莫忘
2024年11月28日 23:47

前言

群里有朋友需要网站适配多语言,但其实一个引用就可以搞定这个问题

开源地址

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

教程

在需要的地方添加如下代码

<!-- 增加语言选择的下拉框 -->
<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') || 'english'; // 默认选择英文
        document.getElementById('language-select').value = savedLanguage; // 设置选择框的值
        translate.changeLanguage(savedLanguage); // 设置翻译语言
        translate.execute(); // 执行翻译
    });
</script>

结语

两行代码就解决了网站需要多语言的问题

❌
❌