नक्सट ३ बेस ब्लॉग टेम्पलेट – Bfotool नक्सटजेएस बेस ब्लॉग(व्ह्यू ३ + टाइपस्क्रिप्ट + टेलविंड)

जर तुम्ही आधुनिक Nuxt 3 ब्लॉग स्टार्टर टेम्पलेट शोधत असाल, तर Bfotool Nuxtjs Base ब्लॉग हा एक उत्तम उपाय आहे. हा Nuxt 3, Vue 3, TypeScript आणि Tailwind CSS वापरून बनवलेला एक पूर्णपणे कार्यशील ब्लॉग अॅप्लिकेशन आहे, जो डेव्हलपमेंट दरम्यान बॅकएंडची आवश्यकता न पडता डेव्हलपर्सना त्वरित व्यावसायिक ब्लॉग तयार करण्यास मदत करण्यासाठी डिझाइन केलेला आहे.

या प्रकल्पात अ‍ॅक्सिओस इंटरसेप्टर्सद्वारे समर्थित एक बनावट एपीआय लेयर समाविष्ट आहे, जो वास्तविक REST एपीआयचे अनुकरण करतो. हे नक्सट आर्किटेक्चर शिकण्यासाठी, प्रोटोटाइपिंग अॅप्लिकेशन्स किंवा उत्पादन-तयार ब्लॉग प्लॅटफॉर्म तयार करण्यासाठी ते परिपूर्ण बनवते.

तुम्ही येथे रिपॉझिटरी एक्सप्लोर करू शकता: 👉 https://github.com/bfotool/nuxtjs-base-blog

Bfotool Nuxtjs बेस ब्लॉग म्हणजे काय?

Bfotool Nuxtjs बेस ब्लॉग हा एक आधुनिक ब्लॉग अॅप्लिकेशन टेम्पलेट आहे जो नवीनतम फ्रंटएंड तंत्रज्ञानाचा वापर करून बनवला आहे. हे पोस्ट, श्रेणी, शोध कार्यक्षमता आणि संपर्क पृष्ठांसह संपूर्ण ब्लॉगिंग इंटरफेस प्रदान करते.

हा प्रकल्प स्वच्छ Nuxt 3 आर्किटेक्चरसह डिझाइन केला आहे, ज्यामुळे तो समजणे आणि विस्तारणे सोपे होते.

प्रमुख ठळक बाबींमध्ये हे समाविष्ट आहे:

प्रतिसादात्मक डिझाइनसह संपूर्ण ब्लॉग UI
बॅकएंडशिवाय डेव्हलपमेंटसाठी मॉक REST API
आधुनिक Vue 3 Composition API सह तयार केलेले
टाइपस्क्रिप्टसह टाइप-सेफ डेव्हलपमेंट
एसइओ-रेडी मेटा कॉन्फिगरेशन
गडद आणि हलक्या थीमसाठी समर्थन

हे भांडार येथे आढळू शकते:

👉 https://github.com/bfotool/nuxtjs-base-blog

हे टेम्पलेट यासाठी आदर्श आहे:

वैयक्तिक ब्लॉग
कंपनी ब्लॉग
डेव्हलपर पोर्टफोलिओ
नक्स्ट ३ आर्किटेक्चर शिकणे
सामग्री वेबसाइट्सचे जलद प्रोटोटाइपिंग

महत्वाची वैशिष्टे

C class="ac-h3"पूर्ण ब्लॉग पेज

या टेम्पलेटमध्ये ब्लॉग प्लॅटफॉर्ममध्ये आवश्यक असलेल्या पूर्णपणे अंमलात आणलेल्या पृष्ठांचा संच समाविष्ट आहे.

मुख्य पृष्ठांमध्ये हे समाविष्ट आहे:

मुख्यपृष्ठ- वैशिष्ट्यीकृत हिरो पोस्ट, श्रेणी फिल्टर आणि पृष्ठांकित पोस्ट प्रदर्शित करते.
ब्लॉग पोस्ट पेज- सामग्री सारणी आणि संबंधित पोस्टसह संपूर्ण लेख दृश्य
श्रेणी पृष्ठ- श्रेणीनुसार फिल्टर केलेल्या पोस्ट ब्राउझ करा
शोध पृष्ठ- डिबाउंस कार्यक्षमतेसह रिअल-टाइम शोध
पृष्ठाबद्दल- तुमच्या टीम, ध्येय किंवा ब्रँडची ओळख करून द्या
संपर्क पृष्ठ- प्रमाणीकरण आणि टोस्ट अभिप्रायासह संपर्क फॉर्म
त्रुटी पृष्ठ- कस्टम त्रुटी हाताळणी UI

ही रचना वापरकर्त्यांना वापरण्यास तयार ब्लॉग अनुभव प्रदान करते.

<class="ac-h3"h3>डेव्हलपमेंटसाठी बनावट API लेयर

या प्रकल्पातील सर्वात शक्तिशाली वैशिष्ट्यांपैकी एक म्हणजे मॉक एपीआय सिस्टम .

वास्तविक बॅकएंडशी कनेक्ट होण्याऐवजी, प्रकल्प अ‍ॅक्सिओस इंटरसेप्टर्स वापरून एपीआय प्रतिसादांचे अनुकरण करतो .

हा दृष्टिकोन विकासकांना हे करण्यास अनुमती देतो:

बॅकएंड अवलंबित्वांशिवाय फ्रंटएंड वैशिष्ट्ये तयार करा
चाचणी पृष्ठांकन, फिल्टरिंग आणि सॉर्टिंग
वास्तविक API प्रतिसाद विलंबांचे अनुकरण करा
नंतर सहजपणे वास्तविक बॅकएंडवर स्विच करा

मॉक एपीआयमध्ये एंडपॉइंट्स समाविष्ट आहेत जसे की:

/posts
/posts/featured
/posts/:slug
/categories
/authors
/contact

API हे useApi कंपोजेबल द्वारे अ‍ॅबस्ट्रॅक्ट केलेले असल्याने, रिअल बॅकएंडवर स्विच करण्यासाठी किमान कॉन्फिगरेशन आवश्यक आहे.

मॉडर्न नक्सट ३ आर्किटेक्चर

हा प्रकल्प शिफारस केलेल्या Nuxt 3 विकास नमुन्यांचे अनुसरण करतो, ज्यामुळे तो फ्रेमवर्क शिकणाऱ्या विकासकांसाठी एक उत्तम संदर्भ बनतो.

महत्वाच्या वास्तुशिल्पीय वैशिष्ट्यांमध्ये हे समाविष्ट आहे:

स्वयंचलितपणे आयात केलेले घटक आणि कंपोझेबल
टाइपस्क्रिप्ट-प्रथम विकास
कंपोजेबल API सेवा स्तर
मॉड्यूलर फोल्डर रचना
एसइओ मेटा कॉन्फिगरेशन
पृष्ठ संक्रमणे

अनुप्रयोग देखील वापरतो:

useSeoMeta()एसइओ टॅग्जसाठी
useColorMode()थीम स्विचिंगसाठी
useRoute()आणि इतर बिल्ट-इन नक्सट कंपोझेबल्स

<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- श्रेणी पृष्ठ

कॉम वर्ग="एसी-एच३"घटक

पुन्हा वापरता येणारे UI घटक तार्किक श्रेणींमध्ये गटबद्ध केले आहेत:

layout- शीर्षलेख आणि तळटीप
common- पृष्ठांकन, स्केलेटन लोडर्स, टोस्ट सूचना
blog– ब्लॉग-विशिष्ट घटक जसे की पोस्ट कार्ड आणि सामग्री सारणी

कॉम्प क्लास="एसी-एच३"ओसेबल्स

कंपोजेबल्स डायरेक्टरीमध्ये पुन्हा वापरता येणारे लॉजिक असते.

महत्त्वाच्या संयुगांमध्ये हे समाविष्ट आहे:

useApi()- टाइप केलेला API सेवा स्तर
useDebounce()- प्रतिक्रियाशील मूल्ये काढून टाका

<class="ac-h3"h3>मॉक API लेयर

मॉक सिस्टम डायरेक्टरीमध्ये स्थित आहे mocks.

त्यात समाविष्ट आहे:

handlers.ts- API विनंती इंटरसेप्टर्स
posts.ts– नमुना ब्लॉग पोस्ट
authors.ts- लेखकाचा डेटा
categories.ts- श्रेणी डेटा

या रचनेमुळे प्रकल्पात बदल करणे आणि विस्तार करणे सोपे होते .

प्रोजेक्ट कसा इन्स्टॉल करायचा आणि चालवायचा

प्रकल्प स्थानिक पातळीवर चालवण्यासाठी या चरणांचे अनुसरण करा.

प्रीरेक वर्ग="एसी-एच३"यूआयएसईटी

तुला पाहिजे:

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

फाइल्स बदलल्यावर नक्सट डेव्हलपमेंट सर्व्हर आपोआप रीलोड होईल.

मॉक एपीआय वरून रिअल एपीआय वर स्विच करणे

या प्रकल्पातील सर्वोत्तम डिझाइन निर्णयांपैकी एक म्हणजे सोपे 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

हे नक्सट ब्लॉग टेम्पलेट का वापरावे?

हा प्रकल्प विकासकांसाठी एक उत्तम पर्याय आहे कारण तो प्रदान करतो:

क्लीन नक्सट ३ आर्किटेक्चर
उत्पादन-स्तरीय कोड रचना
फ्रंटएंड डेव्हलपमेंटसाठी मॉक एपीआय
टेलविंड सीएसएससह आधुनिक यूआय
एसइओ-तयार पेज
वास्तविक API सह सोपे एकत्रीकरण

हे शिक्षण प्रकल्प आणि उत्पादनासाठी तयार ब्लॉग फाउंडेशन म्हणून काम करते .

गिटहब रिपॉझिटरी

तुम्ही संपूर्ण सोर्स कोड येथे एक्सप्लोर करू शकता: 👉 https://github.com/bfotool/nuxtjs-base-blog

जर तुम्हाला प्रकल्प उपयुक्त वाटला, तर रिपॉझिटरीमध्ये तारांकन करण्याचा आणि सुधारणा करण्याचा विचार करा.