如何将 Google 翻译元素添加到 GatsbyJS 网站答案

【问题标题】：How to add a Google Translate Element to a GatsbyJS website如何将 Google 翻译元素添加到 GatsbyJS 网站
【发布时间】：2021-02-23 15:21:24
【问题描述】：

我正在尝试将谷歌翻译元素添加到我的 Gatsby 网站。本质上，我试图让以下代码在 Gatsby 中工作：

<div id="google_translate_element"></div>

<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

我对 Gatsby 比较陌生，想知道实现这一目标的正确（或至少是可行的）方法。

我尝试过的

在装载时调用 Javascript 代码

const Footer = () => {

    useEffect(() => {
        const script = document.createElement("script")
        script.src = "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
        script.async = true
        document.body.appendChild(script)

        googleTranslateElementInit(() => {
            new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element')
        })

        return () => {
            document.body.removeChild(script)
        }
    }, [])

    return <div id="google_translate_element"></div>
}

这不起作用，因为 googleTranslateElementInit 和 google 未定义。

将<script 移动到<Helmet> 组件

<Helmet>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
    <script type="text/javascript">
        {googleTranslateElementInit(() => {
             new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element')
        })}
    </script>
</Helmet>

产生与 (1) 相同的错误

将 Javascript 添加到 html.js 的 <body> 标记的开头

 <body {...props.bodyAttributes}>
     <script 
          dangerouslySetInnerHTML={{
            __html: `
            function googleTranslateElementInit() {
                new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
            }
            `
          }}
    />
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

这在我第一次加载网站时起作用。刷新后，按钮不见了。它仅在我启动开发服务器后第一次加载页面时出现。我还尝试制作具有相同结果的生产版本。

我已经被这个问题困扰了很长时间，如果有任何建议，我将不胜感激。

【问题讨论】：

标签： javascript gatsby google-translate

【解决方案1】：

以下内容对我有用：

const GoogleTranslate = () => {

const googleTranslateElementInit = () => {
    new window.google.translate.TranslateElement({ pageLanguage: 'en', layout: window.google.translate.TranslateElement.FloatPosition.TOP_LEFT }, 'google_translate_element')
   }

   useEffect(() => {
    var addScript = document.createElement('script');
    addScript.setAttribute('src', '//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit');
    document.body.appendChild(addScript);
    window.googleTranslateElementInit = googleTranslateElementInit;
  }, []);

return (
  <>
   <div id="google_translate_element"></div>
  </>
);

} 
export default GoogleTranslate

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

看起来您没有使用基于 React 的方法，因此您的翻译脚本将始终缺少范围（它将异步加载或永远不会按需加载）。我的建议是使用一个react依赖，比如react-google-translate，另外clean会更干净。

设置好环境（环境变量等）后，您只需：

import React, { useState, useEffect } from 'react'
 
import { useLazyTranslate } from 'react-google-translate'
 
const Example = () => {
 
  const [text] = useState('test');
  const [language] = useState('zh-CN');
 
  const [translate, { data, loading }] = useLazyTranslate({
    language 
  })
 
  useEffect(() => {
    if (text) {
      translate(text, language);
    }
  }, [translate, text])
 
  render() {
    return (
      <div>{loading ? 'Loading...' : data}</div>
    )
  }
}

如您所见，有一些自定义挂钩 (useLazyTranslate) 允许您按需使用翻译，确保正确加载库。

【讨论】：

我正在寻找翻译整个网站，这是相当大的。有没有一种方法可以在不将每一段文本包装在translate 中的情况下实现这一目标？我在 npm 上搜索了一个基于 React 的包，但没有找到。
可以，只要内容保持在该状态即可。你甚至可以解析 HTML 标签