目录
使用 Google Translate 为站点添加自助翻译功能
对于单一语言的 Web 应用，使用 Google Translate 增加几行代码就能实现网页内容的一键翻译，可以有效的提升用户友好度，又不必去做繁琐的多语言配置。
代码配置
<!--
网页内容区域创建一个div，用于给 Translate 自动加载使用，id 名称不可随意
-->
<div id='google_translate_element'></div>
<!--
在 Javascript 块中创建一个初始化配置的方法，注意方法名称
和下面依赖JS的参数cb一致，可放在网页的Footer 处
-->
<script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'zh',
includedLanguages: 'en,it,fr,ru,tr',
layout: google.translate.TranslateElement.FloatPosition.BOTTOM_LEFT
}, 'google_translate_element');
}
</script>
<!-- 引入 Google Translate 依赖，可放在网页的 Footer 处，避免堵塞正文加载 -->
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
</script>
效果演示
布局配置
Google Translate Element 提供了几种不同的布局样式供选择。以下是一些常用的布局样式：
- google.translate.TranslateElement.InlineLayout.SIMPLE：简单的内联布局，翻译工具以简洁的形式显示在页面上
- google.translate.TranslateElement.InlineLayout.VERTICAL：垂直内联布局，翻译工具以垂直列表的形式显示在页面上
- google.translate.TranslateElement.InlineLayout.HORIZONTAL：水平内联布局，翻译工具以水平列表的形式显示在页面上
- google.translate.TranslateElement.InlineLayout.MOBILE：适用于移动设备的内联布局，翻译工具以简洁的形式显示在移动页面上
- google.translate.TranslateElement.FloatPosition.TOP_LEFT：浮动布局，翻译工具以浮动在页面左上角的形式显示
- google.translate.TranslateElement.FloatPosition.TOP_RIGHT：浮动布局，翻译工具以浮动在页面右上角的形式显示
- google.translate.TranslateElement.FloatPosition.BOTTOM_RIGHT：浮动布局，翻译工具以浮动在页面右下角的形式显示
- google.translate.TranslateElement.FloatPosition.BOTTOM_LEFT：浮动布局，翻译工具以浮动在页面左下角的形式显示