আপনার GatsbyJS সাইটে কাস্টম জাভাস্ক্রিপ্ট কিভাবে যোগ করবেন

যদিও GatsbyJS হল একটি React ফ্রেমওয়ার্ক, এটি আপনার Gatsby প্রোজেক্টে কাস্টম জাভাস্ক্রিপ্ট কিভাবে যোগ করতে হয় তা জানা উপযোগী হতে পারে। সম্ভবত আপনি আপনার পুরানো ওয়েবসাইটটি Gatsby-এ স্থানান্তরিত করেছেন, এবং আপনার কাছে একগুচ্ছ কাস্টম ভ্যানিলা জাভাস্ক্রিপ্ট রয়েছে যা আপনি এই মুহূর্তে ReactJS সিনট্যাক্সে রূপান্তর করতে পছন্দ করেন না — আমার মনে হয়।

সৌভাগ্যবশত গ্যাটসবিতে প্লেইন জাভাস্ক্রিপ্ট যোগ করা মোটেও কঠিন নয়, আপনাকে শুধু একটি সাধারণ ফাইল প্রকাশ করতে হবে, html.js , যা ডিফল্টরূপে আপনার Gatsby প্রকল্পে দৃশ্যমান নয়৷

html.js প্রকাশ করতে (উপলব্ধ করতে) ফাইল, আপনার টার্মিনাল খুলুন, আপনার গ্যাটসবি প্রোজেক্ট ফোল্ডারের রুটে নেভিগেট করুন এবং নিম্নলিখিতটি লিখুন:

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

এখন html.js আপনার src এ উপলব্ধ আপনার গ্যাটসবি প্রজেক্টের ফোল্ডার।

html.js এর ভিতরে ফাইলে এইচটিএমএল সিনট্যাক্সের একটি গুচ্ছ রয়েছে যা আপনি সম্ভবত চিনতে পারেন। বিদ্যমান কোডের কোনোটি স্পর্শ করবেন না, তবে একটি dangerouslySetInnerHTML দিয়ে div উপাদানের দিকে মনোযোগ দিন বৈশিষ্ট্য আমাদের <script> এর সাথে একই বৈশিষ্ট্য ব্যবহার করতে হবে উপাদান

নিচের স্নিপেটটি কপি করে পেস্ট করুন ডানদিকে উপরে আপনার html.js ফাইলের ক্লোজিং বডি ট্যাগ </body> :

<script
  dangerouslySetInnerHTML={{
    __html: `
    console.log('Plain JavaScript inside Gatsby!');
`
  }}
/>

আপনার পরিবর্তনগুলি সংরক্ষণ করুন, এবং আপনার Gatsby সার্ভার শুরু করুন, অথবা যদি Gatsby ইতিমধ্যেই চলছে তাহলে আপনার ব্রাউজার ট্যাব রিফ্রেশ করুন৷ আপনি যদি এটি সঠিকভাবে করেন তবে আপনার ক্রোম কনসোলে নিম্নলিখিত বার্তাটি দেখতে হবে:

Plain JavaScript inside Gatsby!

আপনার স্ক্রিপ্ট উপাদানের ভিতরে একটি সতর্কতা বার্তা সহ একটি ক্লিক ইভেন্ট যোগ করার চেষ্টা করুন:

document.body.addEventListener('click', function() {
  alert('JavaScript!')
})

এখন আপনি যখন আপনার পৃষ্ঠার যেকোনো জায়গায় ক্লিক করেন, তখন এটি একটি সতর্কতা বার্তার সাথে পপ আপ করা উচিত, "জাভাস্ক্রিপ্ট!" বলে।

সম্পদ:

(কাস্টম জাভাস্ক্রিপ্ট যোগ করা)[https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript]