Преобразовать код jQuery для реализации в Gatsby - PullRequest
Новая
       8

Преобразовать код jQuery для реализации в Gatsby

0 голосов
/ 01 августа 2020

Я работаю над сайтом gatsby, и у меня есть код jQuery. Я не знаю, как реализовать это на моем веб-сайте: (

$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
    target: '.navbar-fixed-top'
})

// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
    $('.navbar-toggle:visible').click();
});

Заранее спасибо,

1 Ответ

0 голосов
/ 04 августа 2020

Вы можете предотвратить код jQuery на стороне Gatsby, добавив собственный html.js.

https://www.gatsbyjs.org/docs/custom-html/

В файле html.js вы можете import jQuery или Bootstrap вот так. 

// html.js
import React from 'react'
import PropTypes from 'prop-types'

export default class HTML extends React.Component {
  render() {
    return (
      <html {...this.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"
          />

          {/* Bootstrap */}
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossOrigin="anonymous" />

          {/* Root Styles */}
          <link rel="stylesheet" href="/styles/app.css" />
          <link rel="stylesheet" href="/styles/typography.css" />

          {/* 3rd-party plugin Styles */}
          <link rel="stylesheet" href="/styles/plugins/slick.min.css" />
          <link rel="stylesheet" href="/styles/plugins/slick-theme.min.css" />

          {/* jQuery */}
          <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

          {this.props.headComponents}
        </head>
        <body {...this.props.bodyAttributes}>
          {this.props.preBodyComponents}
          <div
            key="body"
            id="___gatsby"
            dangerouslySetInnerHTML={{ __html: this.props.body }}
          />
          {this.props.postBodyComponents}
        </body>
      </html>
    )
  }
}

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

И вы можете импортировать свои jQuery функции в свой компонент.

...