如何向Hexo的Next主题添加谷歌翻译

发表于 | 分类于 |

摘要：本文详细记录如何向Hexo的Next主题添加谷歌翻译，其中涉及的 Google 翻译组件的配置推荐以及 Next 主题的 CSS 调整。

使用 Google 翻译网站是一种让博客支持多语言的简单的做法（不需要自己翻译…），而且 Google 翻译的效果还是不错的（当然国内可能需要使用其他翻译）。

在尝试在 Hexo Next Theme 上增加谷歌翻译组件的时候遇到了一些 CSS 的问题，需要自行进行调整来优化显示效果。

CSS 显示问题

实际上主要问题在于 Next 主题的 基础 CSS 有一条约束图片：

位于 /themes/next/source/css/_common/scaffolding/base.styl 大约60行左右

1
2
3
4
5
6
img {
  display: block;
  margin: auto;
  max-width: 100%;
  height: auto;
}

导致所有图片都是 block，这样一旦添加谷歌翻译组建后导致谷歌的那个 Logo 也是 block，从而让后面的内容全部错位，无论把组件放在哪个地方，效果十分不好。截然知道了原因我们就调整一下 CSS。

CSS 调整

为了不影响其他的 CSS 样式，我们根据谷歌翻译组件创建的 div的 id 为：google_translate_element，从而约束该 id 下的 img 样式，代码如下，在原来的 img 的 CSS 并列添加一条：

1
2
3
4
5
6
7
8
#google_translate_element {
  img {
    display: inline;
    margin: auto;
    max-width: 100%;
    height: auto;
  }
}

其他属性不变，只把 display 更改为 inline 即可。

这样无论将谷歌组件加入到任何位置，都可以显示正常了。

组件配置推荐

谷歌翻译组件生成链接

谷歌翻译组件在添加的时候需要进行配置，这里给出一个个人推荐的配置，当然这个配置还是需要根据自己的喜好，这里仅供参考：

enter description here

当然你也可以创建一个 Google 追踪获取其 ID 填入配置从而追踪用户使用翻译的情况。

添加位置推荐

在 Next 主题添加位置同样仅为参考，个人把该翻译下拉列表放在了 logo 和导航栏之间（这里采用的是 NexT.Pisces 样式），感觉上能够最好的融入其中，不算突兀。

enter description here

具体配置需要在模板 swig 文件 /themes/next/layout/_partials/header.swig 的大约 34 行位置，是在<nav class="site-nav"> 这个标签之上添加对应的谷歌翻译空间代码，当然你可以任意添加其他的 CSS 样式：

1
2
3
4
5
<div class="site-nav" id="google_translate_element"></div><script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>