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

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

如果你也像我一样,懒得做网站多语言,那么就往下看~

大部分做网站多语言的都是通过 i18n 来做的,每一个字符串都要翻译成多种语言,工作量实在大,且修改诸多不便,但随着谷歌翻译进入中国市场,我们可以直接使用谷歌翻译来解决网站多语言需求。

预览:

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

特性

  • 使用 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>

给TA打赏
共{{data.count}}人
人已打赏
前端/移动技术活

真正的猛士,每天干一碗毒鸡汤! 开放API

2021-9-29 15:06:16

前端/移动技术活

教你用电脑刷酷安

2021-10-12 20:04:27

2 条回复 A文章作者 M管理员
  1. 怎么没有反应呢

    • 什么没有反应

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索