Как включить код встраивания с помощью внешнего скрипта в тело сайта Gatsby? - PullRequest
Новая
       69

Как включить код встраивания с помощью внешнего скрипта в тело сайта Gatsby?

2 голосов
/ 17 марта 2020

Я работаю над своим первым сайтом в Гэтсби, и у меня хорошо получается go, за исключением кода для встраивания, который необходимо разместить в теле одной из страниц. Я посмотрел документацию по SSR API и не могу найти какой-либо четкой документации о том, как это делается. Код, который необходимо встроить, приведен ниже. Буду признателен за любую помощь.

Для встраиваемого кода ниже нужно только go в теле одной страницы (не на каждой странице сайта)? 

<style>.vagaro a {font-size:10px; color:#AAA; text-decoration:none;}</style>
<script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC30tDZCcT3q"></script>
</div>

1 Ответ

0 голосов
/ 17 марта 2020

Если вам нужно добавить этот материал на каждую страницу, вы можете сделать это с помощью html.js.

Сначала сделайте копию существующего html.js, чтобы вы могли вносить постоянные изменения: 

cp .cache/default-html.js src/html.js

Затем очистите кэш и публичные c папки: gatsby clean

Затем отредактируйте src/html.js с помощью требуемого кода до закрытия <head>. 

import React from "react"
import PropTypes from "prop-types"

export default function HTML(props) {
  return (
    <html {...props.htmlAttributes}>
      <head>
        <meta charSet="utf-8" />
        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />
        {props.headComponents}
        <style>{`.vagaro a {font-size:10px; color:#AAA; text-decoration:none;}`}</style>
        <script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC30tDZCcT3q"></script>
      </head>
      <body {...props.bodyAttributes}>
        {props.preBodyComponents}
        <div
          key={`body`}
          id="___gatsby"
          dangerouslySetInnerHTML={{ __html: props.body }}
        />
        {props.postBodyComponents}
      </body>
    </html>
  )
}

HTML.propTypes = {
  htmlAttributes: PropTypes.object,
  headComponents: PropTypes.array,
  bodyAttributes: PropTypes.object,
  preBodyComponents: PropTypes.array,
  body: PropTypes.string,
  postBodyComponents: PropTypes.array,
}

Если вам нужно добавить его только на одну страницу, используйте ответный шлем 

import React from 'react';
import Helmet from 'react-helmet';

const SecondPage = () => {
  return (
    <>
      <Helmet>
        <title>Page Two</title>
        <style>{`.vagaro a {font-size:10px; color:#AAA; text-decoration:none;}`}</style>
        <script type="text/javascript" src="https://www.vagaro.com//resources/WidgetEmbeddedLoader/OZqnC30tDZCcT3q"></script>
      </Helmet>
      <h1>Page Two</h1>
      <p>Welcome to page 2</p>
    </>
  );
};

export default SecondPage;
...