যদিও GatsbyJS একটি React ফ্রেমওয়ার্ক, আপনার Gatsby প্রজেক্টে কাস্টম জাভাস্ক্রিপ্ট যোগ করার পদ্ধতি জানা উপকারী হতে পারে। হয়তো আপনি আপনার পুরনো ওয়েবসাইট Gatsby-এ সরিয়ে আনা হয়েছে, এবং আপনার কাছে অনেক কাস্টম ভ্যানিলা জাভাস্ক্রিপ্ট আছে যা আপনি ReactJS সিনট্যাক্সে কনভার্ট করার খুব আগ্রহী নন — আমি বুঝি।
সৌভাগ্যয়, Gatsby-এ প্লেইন জাভাস্ক্রিপ্ট যোগ করা কঠিন নয়, আপনাকে শুধু একটি সিম্পল ফাইল এক্সপোজ করতে হবে, html.js, যা ডিফল্টভাবে আপনার Gatsby প্রজেক্টে দৃশ্যমান নয়।
html.js ফাইলটি এক্সপোজ (উপলব্ধ) করতে, আপনার টার্মিনাল খুলুন, আপনার Gatsby প্রজেক্ট ফোল্ডারের রুটে নেভিগেট করুন, এবং নিচের কমান্ডটি এন্টার করুন:
cp .cache/default-html.js src/html.jsএখন html.js আপনার Gatsby প্রজেক্টের src ফোল্ডারে উপলব্ধ।
html.js ফাইলের ভিতরে কিছু HTML সিনট্যাক্স আছে যা আপনি সম্ভবত চেনেন। বিদ্যমান কোডের যেকোনো অংশ ছুঁওয়া না, কিন্তু div এলিমেন্টটিতে লক্ষ্য করুন যেটির dangerouslySetInnerHTML অ্যাট্রিবিউট আছে। আমাদের <script> এলিমেন্টের সাথে একই অ্যাট্রিবিউট ব্যবহার করতে হবে।
নিচের স্নিপেটটি কপি-পেস্ট করুন আপনার html.js ফাইলটির ক্লোজিং বডি ট্যাগ </body>-র ঠিক উপরে:
<script dangerouslySetInnerHTML={{ __html: ` console.log('Plain JavaScript inside Gatsby!'); ` }} />পরিবর্তনগুলো সেভ করুন, এবং আপনার Gatsby সার্ভার স্টার্ট করুন, বা ব্রাউজার ট্যাব রিফ্রেশ করুন যদি Gatsby ইতিমধ্যে চলছে। আপনি যদি সঠিকভাবে করছেন, তবে আপনাকে আপনার Chrome কনসোলে নিচের মেসেজটি দেখতে হবে:
Plain JavaScript inside Gatsby!আপনার স্ক্রিপ্ট এলিমেন্টের ভিতরে একটি ক্লিক ইভেন্ট সাথে এলার্ট মেসেজ যোগ করার চেষ্টা করুন:
document.body.addEventListener('click', function() { alert('JavaScript!') })এখন আপনি আপনার পেজের যেকোনো জায়গায় ক্লিক করলে, একটি এলার্ট পপ আপ হবে, "JavaScript!" বলে।
রিসোর্স:
অফিসিয়াল GatsbyJS ডকস চেক করুন (কাস্টম জাভাস্ক্রিপ্ট যোগ করার জন্য)[https://www.gatsbyjs.org/docs/custom-html/#adding-custom-javascript]
