现状

后台自定义输入的字段，目前是没有办法做多语言的。比如：商家在B端商品详情页用中文编辑了商品详情，C端商品详情即使店铺语言设置成了英文，商品详情还是显示的是中文。

解决方案: 使用google 插件自动翻译整个页面

在c端使用google插件，翻译整个页面。

技术实现

1. 在公共的入口文件引入google插件

1.    初始化google插件的时候，有一个很重要配置：`pageLanguage`（页面语言）；
1.    插件会以`pageLanguage`为`current language`，将页面内容翻译成`target language`；

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
        var language = 'en';
        try {
            var cache = window.localStorage.getItem('MULTI_LANGUAGE_PREFIX');
            if (cache) {
                language = JSON.parse(cache).data;
            } else if (window.globalData.dealedBrowserLanguage) {
                language = window.globalData.dealedBrowserLanguage;
            } else if (window.globalData.shopSetting.language) {
                language = window.globalData.shopSetting.language;
            }
        } catch (err) {
            console.log(err);
        }
        console.log('googleTranslateElementInit', language);
        new google.translate.TranslateElement({ pageLanguage: language }, 'google_translate_element');
    }
</script>

<script
    type="text/javascript"
    src="https://translate.google.com/translate_a/element.js?
    cb=googleTranslateElementInit"
></script>

2. pageLanguage如何取值？

3. 隐藏默认样式

使用的google插件有一个缺点，就是会在页面中插件对应的dom，并且，这些没办法做到自定义。

所以解决方案是隐藏google插件自带的样式；

// google自动翻译的一些样式
.goog-te-banner-frame {
    display: none !important;
}

#google_translate_element, #goog-gt-tt {
    display: none !important;
}
body {
    top: 0 !important;
}

因为我们的页面本来就已经做了多语言处理并且本身已经支持了多语言切换，只是部分通过自定义编辑的内容没有做多语言处理，我们只需要处理这一小部分没有经过多语言处理的地方就可以了。

所以：

页面一进来的时候：店铺初始化好的语言之后，根据当前语言触发google自动翻译

手动切换语言的之后，缓存当前选择的语言->刷新页面—>按照缓存的语言重新初始化google翻译插件，再执行1里面的逻辑。

4. 触发方式：

export const changeGoogleLanguage = (language) => {
    const googTeCombo = document.querySelector('.goog-te-combo');
    // 有可能执行这个逻辑的时候，google插件内容还没有初始化好，那就走else里面的逻辑，延迟500ms重新执行
    if (googTeCombo && googTeCombo.children.length > 0) {
        const children = Array.prototype.slice.call(googTeCombo.children || []);
        let idx = children.findIndex((item) => item.getAttribute('value') === language);
        // 有可能google插件初始化好的语言列表里面没有目标语音，需要先动态的添加，不然语言无法切换
        if (idx === -1) {
            const optionItem = document.createElement('option');
            optionItem.setAttribute('value', language);
            optionItem.textContent = language;
            googTeCombo.appendChild(optionItem);
            idx = children.length;
        }
        googTeCombo.selectedIndex = idx;
        googTeCombo.dispatchEvent(new Event('change'));
    } else {
        setTimeout(() => {
            changeGoogleLanguage(language);
        }, 500);
    }
};

5. 不允许被自动翻译的模块

有些内容我们既没有做多语言，也不希望google api自动帮我们翻译。所以我们需要对这些内容做单独的处理。

解决方式

在不希望被自动翻译的模块的标签上面添加skiptranslate类名

<View className='title skiptranslate'>{title}</View>

不允许被自动翻译的模块
1. 价格展示
2. 地址
3. 个人信息
4. 语言/货币切换的选项
5. 评论
6. 系统语言（已校验过的）
  1. 按钮：例如登录、立即购买、继续购物
  2. 筛选项
7. 默认语言
8. 会员模块：用户信息（个人主页&首页组件综合导航）
9. 社交媒体分享名称

存在问题

页面展示的时候，内容会先呈现默认语言，再切换成指定的语言，会闪一下。

感觉很被动，所有的翻译结果都依赖google插件，某些翻译不准，没有翻译的地方，我们无法操作。

app，微信小程序不支持

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

# 前端 # JavaScript # Google

google插件实现页面的自动翻译

现状