আপনি যদি একটি আধুনিক Nuxt 3 ব্লগ স্টার্টার টেমপ্লেট খুঁজছেন, তাহলে Bfotool Nuxtjs Base Blog একটি চমৎকার সমাধান। এটি Nuxt 3, Vue 3, TypeScript এবং Tailwind CSS দিয়ে তৈরি একটি সম্পূর্ণ কার্যকরী ব্লগ অ্যাপ্লিকেশন, যা ডেভেলপারদের ডেভেলপমেন্টের সময় ব্যাকএন্ডের প্রয়োজন ছাড়াই দ্রুত একটি পেশাদার ব্লগ তৈরি করতে সহায়তা করার জন্য ডিজাইন করা হয়েছে।
এই প্রকল্পটিতে Axios ইন্টারসেপ্টর দ্বারা চালিত একটি নকল API স্তর রয়েছে, যা একটি আসল REST API অনুকরণ করে। এটি Nuxt আর্কিটেকচার শেখার, প্রোটোটাইপিং অ্যাপ্লিকেশন, অথবা উৎপাদন-প্রস্তুত ব্লগ প্ল্যাটফর্ম তৈরির জন্য এটিকে নিখুঁত করে তোলে।
আপনি এখানে সংগ্রহস্থলটি অন্বেষণ করতে পারেন: 👉 https://github.com/bfotool/nuxtjs-base-blog
Bfotool Nuxtjs বেস ব্লগ কী?
Bfotool Nuxtjs Base Blog হল একটি আধুনিক ব্লগ অ্যাপ্লিকেশন টেমপ্লেট যা সর্বশেষ ফ্রন্টএন্ড প্রযুক্তি ব্যবহার করে তৈরি করা হয়েছে। এটি পোস্ট, বিভাগ, অনুসন্ধান কার্যকারিতা এবং যোগাযোগ পৃষ্ঠা সহ একটি সম্পূর্ণ ব্লগিং ইন্টারফেস প্রদান করে।
প্রকল্পটি একটি পরিষ্কার Nuxt 3 আর্কিটেকচার দিয়ে ডিজাইন করা হয়েছে, যা এটিকে বোঝা এবং প্রসারিত করা সহজ করে তোলে।
মূল হাইলাইটগুলির মধ্যে রয়েছে:
প্রতিক্রিয়াশীল ডিজাইন সহ সম্পূর্ণ ব্লগ UI
ব্যাকএন্ড ছাড়াই ডেভেলপমেন্টের জন্য মক REST API
আধুনিক Vue 3 কম্পোজিশন API দিয়ে তৈরি
টাইপস্ক্রিপ্টের সাহায্যে টাইপ-নিরাপদ ডেভেলপমেন্ট
SEO-প্রস্তুত মেটা কনফিগারেশন
গাঢ় এবং হালকা থিম সমর্থন
সংগ্রহস্থলটি এখানে পাওয়া যাবে:
👉 https://github.com/bfotool/nuxtjs-base-blog
এই টেমপ্লেটটি এর জন্য আদর্শ:
ব্যক্তিগত ব্লগ
কোম্পানির ব্লগ
ডেভেলপার পোর্টফোলিও
Nuxt 3 স্থাপত্য শেখা
কন্টেন্ট ওয়েবসাইটের দ্রুত প্রোটোটাইপিং
মূল বৈশিষ্ট্য
C class="ac-h3"সম্পূর্ণ ব্লগ পৃষ্ঠা
এই টেমপ্লেটটিতে সম্পূর্ণরূপে বাস্তবায়িত পৃষ্ঠাগুলির একটি সেট অন্তর্ভুক্ত রয়েছে যা সাধারণত একটি ব্লগ প্ল্যাটফর্মে প্রয়োজন হয়।
প্রধান পৃষ্ঠাগুলির মধ্যে রয়েছে:
হোম পেজ – একটি বৈশিষ্ট্যযুক্ত হিরো পোস্ট, বিভাগ ফিল্টার এবং পৃষ্ঠাঙ্কিত পোস্ট প্রদর্শন করে
ব্লগ পোস্ট পৃষ্ঠা- বিষয়বস্তু এবং সম্পর্কিত পোস্ট সহ সম্পূর্ণ নিবন্ধ দৃশ্য
বিভাগ পৃষ্ঠা- বিভাগ অনুসারে ফিল্টার করা পোস্টগুলি ব্রাউজ করুন
অনুসন্ধান পৃষ্ঠা- ডিবাউন্স কার্যকারিতা সহ রিয়েল-টাইম অনুসন্ধান
পৃষ্ঠা সম্পর্কে- আপনার দল, লক্ষ্য বা ব্র্যান্ডের সাথে পরিচয় করিয়ে দিন
যোগাযোগ পৃষ্ঠা – বৈধতা এবং টোস্ট প্রতিক্রিয়া সহ যোগাযোগ ফর্ম
ত্রুটি পৃষ্ঠা- কাস্টম ত্রুটি পরিচালনা UI
এই কাঠামো ব্যবহারকারীদের জন্য একটি ব্যবহারের জন্য প্রস্তুত ব্লগ অভিজ্ঞতা প্রদান করে।
<class="ac-h3"h3>ডেভেলপমেন্টের জন্য জাল API স্তর
এই প্রকল্পের সবচেয়ে শক্তিশালী বৈশিষ্ট্যগুলির মধ্যে একটি হল মক এপিআই সিস্টেম ।
একটি বাস্তব ব্যাকএন্ডের সাথে সংযোগ স্থাপনের পরিবর্তে, প্রকল্পটি Axios ইন্টারসেপ্টর ব্যবহার করে API প্রতিক্রিয়াগুলিকে অনুকরণ করে ।
এই পদ্ধতিটি ডেভেলপারদের অনুমতি দেয়:
ব্যাকএন্ড নির্ভরতা ছাড়াই ফ্রন্টএন্ড বৈশিষ্ট্য তৈরি করুন
পরীক্ষার পৃষ্ঠাঙ্কন, ফিল্টারিং এবং বাছাই
বাস্তব API প্রতিক্রিয়া বিলম্ব অনুকরণ করুন
পরে সহজেই একটি বাস্তব ব্যাকএন্ডে স্যুইচ করুন
মক এপিআইতে এন্ডপয়েন্ট থাকে যেমন:
/posts/posts/featured/posts/:slug/categories/authors/contact
যেহেতু API useApi composable এর মাধ্যমে বিমূর্ত করা হয়, তাই একটি বাস্তব ব্যাকএন্ডে স্যুইচ করার জন্য ন্যূনতম কনফিগারেশন প্রয়োজন।
আধুনিক নক্সট ৩ স্থাপত্য
এই প্রকল্পটি সুপারিশকৃত Nuxt 3 ডেভেলপমেন্ট প্যাটার্ন অনুসরণ করে, যা এটিকে ফ্রেমওয়ার্ক শেখার জন্য ডেভেলপারদের জন্য একটি দুর্দান্ত রেফারেন্স করে তোলে।
গুরুত্বপূর্ণ স্থাপত্য বৈশিষ্ট্যগুলির মধ্যে রয়েছে:
স্বয়ংক্রিয়ভাবে আমদানি করা উপাদান এবং কম্পোজেবল
টাইপস্ক্রিপ্ট-প্রথম ডেভেলপমেন্ট
কম্পোজেবল API পরিষেবা স্তর
মডুলার ফোল্ডার কাঠামো
SEO মেটা কনফিগারেশন
পৃষ্ঠা পরিবর্তন
অ্যাপ্লিকেশনটি আরও ব্যবহার করে:
useSeoMeta()SEO ট্যাগের জন্যuseColorMode()থিম পরিবর্তনের জন্যuseRoute()এবং অন্যান্য অন্তর্নির্মিত Nuxt কম্পোজেবল
<class="ac-h3"h3>ডার্ক মোড এবং রেসপন্সিভ ডিজাইন
UI ব্যবহার করে অন্ধকার এবং হালকা থিম@nuxtjs/color-mode সমর্থন করে ।
বৈশিষ্ট্যগুলির মধ্যে রয়েছে:
স্বয়ংক্রিয় সিস্টেম থিম সনাক্তকরণ
ম্যানুয়াল থিম টগল
টেলউইন্ড সিএসএস স্টাইলিং
মোবাইল-প্রথম প্রতিক্রিয়াশীল লেআউট
এটি নিশ্চিত করে যে ব্লগটি নিম্নলিখিত ক্ষেত্রে নির্বিঘ্নে কাজ করে:
ডেস্কটপ
ট্যাবলেট
মোবাইল ডিভাইস
P class="ac-h3"owerful ব্লগ বৈশিষ্ট্য
ব্লগ টেমপ্লেটে বেশ কিছু উন্নত বৈশিষ্ট্য রয়েছে যা সাধারণত প্রোডাকশন ব্লগ প্ল্যাটফর্মগুলিতে পাওয়া যায়।
এর মধ্যে রয়েছে:
মার্কডাউন শিরোনাম থেকে তৈরি সূচিপত্র
সম্পর্কিত পোস্টের পরামর্শ
আনুমানিক পড়ার সময়
বিভাগ ফিল্টারিং
সম্পূর্ণ-পাঠ্য অনুসন্ধান বাতিল করা হয়েছে
স্মার্ট পৃষ্ঠাকরণ
টোস্ট বিজ্ঞপ্তি
কঙ্কাল উপাদান লোড হচ্ছে
অ্যানিমেটেড পৃষ্ঠা রূপান্তর
এই বৈশিষ্ট্যগুলি ব্লগ দর্শকদের জন্য একটি আধুনিক পড়ার অভিজ্ঞতা তৈরি করে।
প্রযুক্তি স্ট্যাক
প্রকল্পটি একটি আধুনিক ফ্রন্টএন্ড স্ট্যাক ব্যবহার করে তৈরি করা হয়েছে।
| স্তর | প্রযুক্তি |
|---|---|
| কাঠামো | নক্সট ৩.১৫ |
| UI লাইব্রেরি | ভ্যু ৩.৫ |
| ভাষা | টাইপস্ক্রিপ্ট ৫.৭ |
| স্টাইলিং | টেলউইন্ড সিএসএস ৩.৪ |
| রাজ্য ব্যবস্থাপনা | পিনিয়া |
| HTTP ক্লায়েন্ট | অ্যাক্সিওস |
| আইকন | @nuxt/আইকনের মাধ্যমে আইকনিফাই করুন |
| থিম | @nuxtjs/রঙ-মোড |
| লিন্টিং | ইএসলিন্ট |
| বিন্যাসকরণ | প্রিটিয়ার |
এই স্ট্যাকটি কর্মক্ষমতা, স্কেলেবিলিটি এবং রক্ষণাবেক্ষণযোগ্যতা প্রদান করে ।
প্রকল্প কাঠামোর সারসংক্ষেপ
সংগ্রহস্থলটি একটি পরিষ্কার এবং সুসংগঠিত কাঠামো অনুসরণ করে।
গুরুত্বপূর্ণ ডিরেক্টরিগুলির মধ্যে রয়েছে:
পাতা
ডিরেক্টরিটি pagesপ্রধান রুটগুলি সংজ্ঞায়িত করে:
index.vue- হোমপেজabout.vue- পৃষ্ঠা সম্পর্কেcontact.vue- যোগাযোগ ফর্মsearch.vue- অনুসন্ধান ইন্টারফেসblog/[slug].vue– ব্লগ পোস্ট পাতাblog/category/[slug].vue- বিভাগ পৃষ্ঠা
কম ক্লাস="ac-h3" উপাদান
পুনঃব্যবহারযোগ্য UI উপাদানগুলিকে লজিক্যাল বিভাগে ভাগ করা হয়েছে:
layout- হেডার এবং ফুটারcommon- পৃষ্ঠাঙ্কন, কঙ্কাল লোডার, টোস্ট বিজ্ঞপ্তিblog– ব্লগ-নির্দিষ্ট উপাদান যেমন পোস্ট কার্ড এবং বিষয়বস্তুর তালিকা
কম্প ক্লাস="ac-h3"osables
কম্পোজেবল ডিরেক্টরিতে পুনঃব্যবহারযোগ্য লজিক রয়েছে।
গুরুত্বপূর্ণ কম্পোজেবলগুলির মধ্যে রয়েছে:
useApi()- টাইপ করা API পরিষেবা স্তরuseDebounce()– প্রতিক্রিয়াশীল মানগুলিকে বাতিল করুন
<class="ac-h3"h3>মক API লেয়ার
মক সিস্টেমটি ডিরেক্টরির ভিতরে অবস্থিত mocks।
এতে রয়েছে:
handlers.ts- API অনুরোধ ইন্টারসেপ্টরposts.ts– নমুনা ব্লগ পোস্টauthors.ts- লেখকের তথ্যcategories.ts- বিভাগের তথ্য
এই কাঠামোটি প্রকল্পটিকে পরিবর্তন এবং সম্প্রসারণ করা সহজ করে তোলে ।
কিভাবে প্রকল্পটি ইনস্টল এবং চালাবেন
স্থানীয়ভাবে প্রকল্পটি চালানোর জন্য এই পদক্ষেপগুলি অনুসরণ করুন।
প্রি-রেক ক্লাস="ac-h3"uisites
তোমার দরকার:
Node.js ১৮.১৭ বা তার পরবর্তী সংস্করণ
npm, সুতা, অথবা pnpm
রিপোজিটরি ক্লোন করুন
git clone https://github.com/bfotool/nuxtjs-base-blog.git
cd nuxtjs-base-blog
class="ac-h3"নির্ভরতা ইনস্টল করুন
npm install
ডেভেলপমেন্ট সার্ভার শুরু করুন
npm run dev
তারপর আপনার ব্রাউজারটি খুলুন:
http://localhost:3000
ফাইল পরিবর্তন হলে Nuxt ডেভেলপমেন্ট সার্ভার স্বয়ংক্রিয়ভাবে পুনরায় লোড হবে।
মক এপিআই থেকে রিয়েল এপিআইতে স্যুইচ করা
এই প্রকল্পের সেরা ডিজাইনের সিদ্ধান্তগুলির মধ্যে একটি হল সহজ API সুইচ ।
একটি বাস্তব ব্যাকএন্ড সংযোগ করতে:
পরিবেশ পরিবর্তনশীল সেট করুন:
NUXT_PUBLIC_USE_MOCK_API=false
আপনার API বেস URL কনফিগার করুন:
NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com
নিশ্চিত করুন যে আপনার ব্যাকএন্ড প্রতিক্রিয়া নিম্নলিখিত ধরণের সাথে মেলে:
types/index.ts
কোনও অতিরিক্ত কোড পরিবর্তনের প্রয়োজন নেই।
ব্লগ কাস্টমাইজ করা
ডেভেলপাররা সহজেই টেমপ্লেটটি কাস্টমাইজ করতে পারবেন।
থিম বা স্টাইল পরিবর্তন করুন
টেলউইন্ড কনফিগারেশন সম্পাদনা করুন:
tailwind.config.ts
বিশ্বব্যাপী শৈলীগুলি এখানে অবস্থিত:
assets/css/main.css
ব্লগের বিষয়বস্তু পরিবর্তন করুন
নকল কন্টেন্ট আপডেট করা যেতে পারে:
mocks/posts.ts
mocks/categories.ts
mocks/authors.ts
এটি আপনাকে দ্রুত বিভিন্ন ব্লগ ডেটাসেট প্রোটোটাইপ করতে দেয়।
অ্যাপ সেটিংস আপডেট করুন
অ্যাপ্লিকেশন ধ্রুবক যেমন নেভিগেশন, ব্র্যান্ডিং এবং সোশ্যাল লিঙ্কগুলি এখানে সংরক্ষণ করা হয়:
utils/constants.ts
কেন এই Nuxt ব্লগ টেমপ্লেটটি ব্যবহার করবেন?
এই প্রকল্পটি ডেভেলপারদের জন্য একটি দুর্দান্ত পছন্দ কারণ এটি প্রদান করে:
ক্লিন নাক্সট ৩ আর্কিটেকচার
উৎপাদন-স্তরের কোড কাঠামো
ফ্রন্টএন্ড ডেভেলপমেন্টের জন্য মক এপিআই
টেলউইন্ড সিএসএস সহ আধুনিক ইউআই
SEO-প্রস্তুত পৃষ্ঠাগুলি
বাস্তব API গুলির সাথে সহজ ইন্টিগ্রেশন
এটি একটি শিক্ষণ প্রকল্প এবং একটি উৎপাদন-প্রস্তুত ব্লগ ফাউন্ডেশন উভয় হিসেবেই কাজ করে ।
গিটহাব রিপোজিটরি
আপনি এখানে সম্পূর্ণ সোর্স কোডটি অন্বেষণ করতে পারেন: 👉 https://github.com/bfotool/nuxtjs-base-blog
যদি আপনি প্রকল্পটি দরকারী বলে মনে করেন, তাহলে সংগ্রহস্থলটিকে তারকাচিহ্নিত করার এবং উন্নতিতে অবদান রাখার কথা বিবেচনা করুন।