网站多语言？添加谷歌翻译到你的网站

预览：

可以查看本站底部，翻译组件

特性

• 使用 translate.google.cn 资源，大陆地区也能使用
• 自动判断浏览器语言
• 支持 Google 翻译支持的所有语言
• 隐藏谷歌翻译的样式，更美观
• 代码实现简洁，复制粘贴就能用

直接上代码：

底部添加 js：

<script async src="https://cdn.jsdelivr.net/gh/Ice-Hazymoon/blog-hugo-pages@latest/translate-google_.js"></script>
<script type="text/javascript">
function googleTranslateElementInit(){
new google.translate.TranslateElement({
pageLanguage: 'zh-CN',
includedLanguages: 'af,ga,sq,it,ar,ja,az,kn,eu,ko,bn,la,be,lv,bg,lt,ca,mk,zh-CN,ms,zh-TW,mt,hr,no,cs,fa,da,pl,nl,pt,en,ro,eo,ru,et,sr,tl,sk,fi,sl,fr,es,gl,sw,ka,sv,de,ta,el,te,gu,th,ht,tr,iw,uk,hi,ur,hu,vi,is,cy,id,yi',
autoDisplay:false
},'google_translate_element');
}
</script>

本站谷歌翻译组件 CSS ：

/* google translate */

.border {

border-width: .0625rem;

}

.rounded {

border-radius: .25rem;

}

.overflow-hidden {

overflow: hidden;

}

.ml-2 {

margin-left: .5rem;

}

#google_translate_element {

overflow: hidden;

border-width: 1px;

border-radius: 0.25rem;

background: white;

}

.goog-te-gadget {

font-size: 0 !important;

}

.goog-te-combo {

margin-top: 0 !important;

padding-top: 0 !important;

font-size: 0.75rem !important;

line-height: 1rem !important;

outline: 2px solid transparent !important;

outline-offset: 2px !important;

}

.goog-logo-link {

display: none !important;

}

.goog-te-banner-frame {

display: none !important;

position: fixed !important;

}

.goog-te-gadget .goog-te-combo {

font-size: .75rem!important;

line-height: 1rem!important;

margin: 0!important;

outline: .125rem solid #0000!important;

outline-offset: .125rem!important;

padding: .25rem!important;

}

入口 html，你可以加到自己想加的地方：

<div id="google_translate_element" class="ml-2 rounded border overflow-hidden"></div>

然后就搞定啦~~

介绍部分主体的实现方式：

1. 7b2 主题为例：

js 代码可以加到b2 常规设置，综合设置的底部 HTML 标签。CSS 可以放到style.css 或者子主题里。html 代码可以加到 footer.php 里的：

<div class="footer-bottom-left">

...

<div id="google_translate_element" class="ml-2 rounded border overflow-hidden"></div>

</div>