Electron অ্যাপ্লিকেশনে External CSS এবং JavaScript ফাইল সংযোগ করতে আপনি সাধারণত HTML ফাইলের <link> এবং <script> ট্যাগ ব্যবহার করবেন। এটি আপনাকে সঠিক স্টাইলিং এবং স্ক্রিপ্ট কার্যকারিতা যোগ করতে সাহায্য করবে। নিচে বিস্তারিতভাবে দেখানো হলো কীভাবে External CSS এবং JavaScript ফাইল সংযোগ করবেন।
১. External CSS ফাইল সংযোগ
CSS (Cascading Style Sheets) ফাইলগুলি আপনার অ্যাপের UI ডিজাইন এবং লেআউট নিয়ন্ত্রণ করে। আপনি External CSS ফাইল ব্যবহার করতে পারেন, যেগুলি আলাদা ফাইল হিসেবে থাকবে এবং HTML ফাইলে link ট্যাগ ব্যবহার করে যুক্ত করা হবে।
উদাহরণ: External CSS ফাইল সংযোগ
CSS ফাইল তৈরি করা
প্রথমে একটি CSS ফাইল তৈরি করুন, যেমনstyles.css:styles.css:
body { background-color: #f4f4f4; font-family: Arial, sans-serif; } h1 { color: #3498db; } button { background-color: #3498db; color: white; padding: 10px; border: none; cursor: pointer; } button:hover { background-color: #2980b9; }HTML ফাইলে CSS ফাইল সংযোগ করা
তারপর,index.htmlফাইলের<head>ট্যাগের মধ্যেlinkট্যাগ ব্যবহার করে styles.css ফাইল সংযোগ করুন:index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Electron App</title> <link rel="stylesheet" href="styles.css"> <!-- External CSS ফাইল সংযোগ --> </head> <body> <h1>Welcome to my Electron App!</h1> <button id="clickButton">Click Me</button> </body> </html>
২. External JavaScript ফাইল সংযোগ
JavaScript ফাইলগুলি আপনার অ্যাপের ইন্টারঅ্যাকশন এবং লজিক পরিচালনা করে। আপনি External JavaScript ফাইল ব্যবহার করতে পারেন, যেগুলি আলাদা ফাইল হিসেবে থাকবে এবং HTML ফাইলে <script> ট্যাগ ব্যবহার করে যুক্ত করা হবে।
উদাহরণ: External JavaScript ফাইল সংযোগ
JavaScript ফাইল তৈরি করা
প্রথমে একটি JavaScript ফাইল তৈরি করুন, যেমনmain.js:main.js:
document.getElementById('clickButton').addEventListener('click', () => { alert('Button Clicked!'); });HTML ফাইলে JavaScript ফাইল সংযোগ করা
তারপর,index.htmlফাইলের শেষে<script>ট্যাগ ব্যবহার করে main.js ফাইল সংযোগ করুন:index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Electron App</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Welcome to my Electron App!</h1> <button id="clickButton">Click Me</button> <script src="main.js"></script> <!-- External JavaScript ফাইল সংযোগ --> </body> </html>
৩. CSS এবং JavaScript ফাইল আলাদা ফোল্ডারে রাখা
যদি আপনার প্রজেক্ট বড় হয় এবং আরও ফাইল যুক্ত করেন, তাহলে CSS এবং JavaScript ফাইলগুলিকে পৃথক ফোল্ডারে রাখতে পারেন। উদাহরণস্বরূপ:
my-electron-app/
├── package.json
├── main.js
├── index.html
└── assets/
├── css/
│ └── styles.css
└── js/
└── main.js
এখন, আপনার HTML ফাইলে CSS এবং JavaScript ফাইলগুলিকে নতুন পাথ থেকে লোড করতে হবে।
উদাহরণ: নতুন ফোল্ডারে CSS এবং JS ফাইল সংযোগ
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Electron App</title>
<link rel="stylesheet" href="assets/css/styles.css"> <!-- CSS ফাইল নতুন ফোল্ডার থেকে -->
</head>
<body>
<h1>Welcome to my Electron App!</h1>
<button id="clickButton">Click Me</button>
<script src="assets/js/main.js"></script> <!-- JavaScript ফাইল নতুন ফোল্ডার থেকে -->
</body>
</html>
৪. এলেকট্রন অ্যাপের জন্য পরিবেশ বান্ধব ফোল্ডার স্ট্রাকচার
আপনি যখন অ্যাপ্লিকেশনটি বড় করবেন, তখন এটি আরও সুসংগঠিত ফোল্ডার স্ট্রাকচার ব্যবহার করা উচিত। উদাহরণস্বরূপ:
my-electron-app/
├── package.json
├── main.js
├── index.html
└── assets/
├── css/
│ └── styles.css
└── js/
└── main.js
এভাবে ফাইল এবং ফোল্ডারগুলি সুসংগঠিত রাখলে কোডের পরিচালনা এবং ডেভেলপমেন্ট আরো সহজ হবে।
সারাংশ
- External CSS ফাইল সংযোগ করতে
<link>ট্যাগ ব্যবহার করুন এবং এটিheadট্যাগের মধ্যে রাখুন। - External JavaScript ফাইল সংযোগ করতে
<script>ট্যাগ ব্যবহার করুন এবং এটি সাধারণতbodyট্যাগের শেষে রাখুন। - বড় অ্যাপ্লিকেশনের ক্ষেত্রে, CSS এবং JavaScript ফাইলগুলো আলাদা ফোল্ডারে সংরক্ষণ করতে পারেন।
এই পদ্ধতিগুলি ব্যবহার করে আপনি সহজেই আপনার Electron অ্যাপ্লিকেশনে External CSS এবং JavaScript ফাইল সংযোগ করতে পারবেন।
Read more
