吃瓜不打烊 – 八卦爆料、在线吃瓜,黑料不打烊

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

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

预览:

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

特性

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

直接上代码:

底部添加 js:

  1. <script async src="https://cdn.jsdelivr.net/gh/Ice-Hazymoon/blog-hugo-pages@latest/translate-google_.js"></script>
  2. <script type="text/javascript">
  3. function googleTranslateElementInit(){
  4. new google.translate.TranslateElement({
  5. pageLanguage: 'zh-CN',
  6. 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',
  7. autoDisplay:false
  8. },'google_translate_element');
  9. }
  10. </script>

本站谷歌翻译组件 CSS :

  1. /* google translate */
  2. .border {
  3. border-width: .0625rem;
  4. }
  5. .rounded {
  6. border-radius: .25rem;
  7. }
  8. .overflow-hidden {
  9. overflow: hidden;
  10. }
  11. .ml-2 {
  12. margin-left: .5rem;
  13. }
  14. #google_translate_element {
  15. overflow: hidden;
  16. border-width: 1px;
  17. border-radius: 0.25rem;
  18. background: white;
  19. }
  20. .goog-te-gadget {
  21. font-size: 0 !important;
  22. }
  23. .goog-te-combo {
  24. margin-top: 0 !important;
  25. padding-top: 0 !important;
  26. font-size: 0.75rem !important;
  27. line-height: 1rem !important;
  28. outline: 2px solid transparent !important;
  29. outline-offset: 2px !important;
  30. }
  31. .goog-logo-link {
  32. display: none !important;
  33. }
  34. .goog-te-banner-frame {
  35. display: none !important;
  36. position: fixed !important;
  37. }
  38. .goog-te-gadget .goog-te-combo {
  39. font-size: .75rem!important;
  40. line-height: 1rem!important;
  41. margin: 0!important;
  42. outline: .125rem solid #0000!important;
  43. outline-offset: .125rem!important;
  44. padding: .25rem!important;
  45. }

入口 html,你可以加到自己想加的地方:

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

然后就搞定啦~~


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

  1. 7b2 主题为例:

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

  1. <div class="footer-bottom-left">
  2. ...
  3. <div id="google_translate_element" class="ml-2 rounded border overflow-hidden"></div>
  4. </div>
声明:本站内容原创部分,版权归吃瓜不打烊所有,转载请注明出处;非原创部分,搜集整理自微博/知乎/虎扑等站,版权归原作者所有。
全网热点精选

【自荐】用爱发电的内容型app-大自然声音,催眠减压,放松身心

2021-10-15 9:17:49

全网热点精选

《爱情公寓》被翻拍成人版?没有一个原班人马回归,全都是新人演技派

2021-10-15 22:08:00

重要说明

本站资源大多来自网络,如有侵犯你的权益请联系管理员 邮箱:baiddiz221@gmail.com  或给邮箱发送邮件welnn@outlook.com 我们会第一时间进行审核删除。 站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果你遇到支付完成,找不到下载链接,或者不能下载,或者解压失败,先不要忙,提交工单,我们会尽快处理 (博主有可能有事情或者在睡觉不能及时的回复您,邮箱留言后,请耐心等待即可!)

0 条回复 A文章作者 M管理员
欢迎您,新朋友,感谢参与互动!
    暂无讨论,说说你的看法吧
个人中心
今日签到
私信列表
搜索