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

Question

我正在尝试向我的 Gatsby 网站添加一个 google 翻译元素。本质上，我试图让以下代码在 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>

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

我已经坚持了很长时间，非常感谢任何建议。

Answer 1

看起来您没有使用基于 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)，允许您按需使用翻译，确保正确加载库。

Answer 2

以下对我有用：

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

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

How to add a Google Translate Element to a GatsbyJS website

javascript

google-translate

gatsby

我试过的