यदि आप आधुनिक Nuxt 3 ब्लॉग स्टार्टर टेम्पलेट की तलाश में हैं, तो Bfotool Nuxtjs बेस ब्लॉग एक उत्कृष्ट विकल्प है। यह Nuxt 3, Vue 3, TypeScript और Tailwind CSS का उपयोग करके बनाया गया एक पूर्णतः कार्यात्मक ब्लॉग एप्लिकेशन है, जिसे डेवलपर्स को विकास के दौरान बैकएंड की आवश्यकता के बिना तेजी से एक पेशेवर ब्लॉग बनाने में मदद करने के लिए डिज़ाइन किया गया है।
इस प्रोजेक्ट में Axios इंटरसेप्टर द्वारा संचालित एक नकली API लेयर शामिल है, जो एक वास्तविक REST API का अनुकरण करती है। यह Nuxt आर्किटेक्चर सीखने, एप्लिकेशन प्रोटोटाइप बनाने या प्रोडक्शन के लिए तैयार ब्लॉग प्लेटफॉर्म बनाने के लिए एकदम सही है।
आप यहां रिपॉजिटरी देख सकते हैं: 👉 https://github.com/bfotool/nuxtjs-base-blog
Bfotool Nuxtjs बेस ब्लॉग क्या है?
Bfotool Nuxtjs बेस ब्लॉग एक आधुनिक ब्लॉग एप्लिकेशन टेम्पलेट है जिसे नवीनतम फ्रंटएंड तकनीकों का उपयोग करके बनाया गया है। यह पोस्ट, श्रेणियां, खोज सुविधा और संपर्क पृष्ठों के साथ एक संपूर्ण ब्लॉगिंग इंटरफ़ेस प्रदान करता है।
यह प्रोजेक्ट एक साफ-सुथरे Nuxt 3 आर्किटेक्चर के साथ डिजाइन किया गया है, जिससे इसे समझना और विस्तारित करना आसान हो जाता है।
मुख्य विशेषताएं इस प्रकार हैं:
रिस्पॉन्सिव डिज़ाइन के साथ संपूर्ण ब्लॉग यूआई
बैकएंड के बिना विकास के लिए मॉक रेस्ट एपीआई
आधुनिक Vue 3 कंपोज़िशन API का उपयोग करके निर्मित।
टाइपस्क्रिप्ट के साथ टाइप-सुरक्षित विकास
एसईओ-तैयार मेटा कॉन्फ़िगरेशन
डार्क और लाइट थीम सपोर्ट
आप इस रिपॉजिटरी को यहाँ पा सकते हैं:
👉 https://github.com/bfotool/nuxtjs-base-blog
यह टेम्पलेट इसके लिए आदर्श है:
व्यक्तिगत ब्लॉग
कंपनी ब्लॉग
डेवलपर पोर्टफोलियो
Nuxt 3 आर्किटेक्चर सीखना
कंटेंट वेबसाइटों का तीव्र प्रोटोटाइपिंग
प्रमुख विशेषताऐं
C class="ac-h3"पूर्ण ब्लॉग पृष्ठ
इस टेम्पलेट में ब्लॉग प्लेटफॉर्म के लिए आमतौर पर आवश्यक पेजों का एक पूर्ण रूप से कार्यान्वित सेट शामिल है।
मुख्य पृष्ठों में शामिल हैं:
होम पेज – इसमें एक विशेष हीरो पोस्ट, श्रेणी फ़िल्टर और पेज के अनुसार विभाजित पोस्ट प्रदर्शित होते हैं।
ब्लॉग पोस्ट पेज – विषय-सूची और संबंधित पोस्ट सहित पूरा लेख देखें
श्रेणी पृष्ठ – श्रेणी के अनुसार फ़िल्टर किए गए पोस्ट ब्राउज़ करें
खोज पृष्ठ – डिबाउंस कार्यक्षमता के साथ रीयल-टाइम खोज
परिचय पृष्ठ – अपनी टीम, मिशन या ब्रांड का परिचय दें
संपर्क पृष्ठ – सत्यापन और टोस्ट प्रतिक्रिया सुविधा वाला संपर्क फ़ॉर्म
त्रुटि पृष्ठ – कस्टम त्रुटि प्रबंधन यूआई
यह संरचना उपयोगकर्ताओं को उपयोग में आसान ब्लॉग अनुभव प्रदान करती है।
<class="ac-h3"h3>विकास के लिए नकली एपीआई परत</class>
इस परियोजना की सबसे शक्तिशाली विशेषताओं में से एक मॉक एपीआई प्रणाली है ।
वास्तविक बैकएंड से कनेक्ट करने के बजाय, यह प्रोजेक्ट एक्सियोस इंटरसेप्टर का उपयोग करके एपीआई प्रतिक्रियाओं का अनुकरण करता है ।
यह दृष्टिकोण डेवलपर्स को निम्नलिखित की अनुमति देता है:
बैकएंड निर्भरताओं के बिना फ्रंटएंड सुविधाएँ बनाएँ
पेजिंग, फ़िल्टरिंग और सॉर्टिंग का परीक्षण करें
वास्तविक API प्रतिक्रिया विलंब का अनुकरण करें
बाद में आसानी से असली बैकएंड पर स्विच किया जा सकता है।
मॉक एपीआई में निम्नलिखित एंडपॉइंट शामिल हैं:
/posts/posts/featured/posts/:slug/categories/authors/contact
क्योंकि API को useApi कंपोजेबल के माध्यम से एब्स्ट्रैक्ट किया गया है, इसलिए वास्तविक बैकएंड पर स्विच करने के लिए न्यूनतम कॉन्फ़िगरेशन की आवश्यकता होती है।
आधुनिक नुक्स्ट 3 आर्किटेक्चर
यह प्रोजेक्ट Nuxt 3 के अनुशंसित विकास पैटर्न का अनुसरण करता है, जिससे यह फ्रेमवर्क सीखने वाले डेवलपर्स के लिए एक बेहतरीन संदर्भ बन जाता है।
महत्वपूर्ण वास्तुशिल्पीय विशेषताओं में शामिल हैं:
स्वतः आयातित घटक और संयोजनीय
टाइपस्क्रिप्ट-प्रथम विकास
कंपोजेबल एपीआई सेवा परत
मॉड्यूलर फ़ोल्डर संरचना
SEO मेटा कॉन्फ़िगरेशन
पृष्ठ संक्रमण
यह एप्लिकेशन निम्नलिखित का भी उपयोग करता है:
useSeoMeta()एसईओ टैग के लिएuseColorMode()थीम बदलने के लिएuseRoute()और अन्य अंतर्निहित Nuxt कंपोज़ेबल
<class="ac-h3"h3>डार्क मोड और रिस्पॉन्सिव डिज़ाइन</class>
यूआई डार्क और लाइट थीम को सपोर्ट करता है @nuxtjs/color-mode।
विशेषताओं में शामिल हैं:
स्वचालित सिस्टम थीम पहचान
मैन्युअल थीम टॉगल
टेलविंड सीएसएस स्टाइलिंग
मोबाइल-फर्स्ट रिस्पॉन्सिव लेआउट
इससे यह सुनिश्चित होता है कि ब्लॉग सभी प्लेटफॉर्म पर सुचारू रूप से काम करे:
डेस्कटॉप
गोलियाँ
मोबाइल उपकरणों
P class="ac-h3" शक्तिशाली ब्लॉग विशेषताएँ
इस ब्लॉग टेम्पलेट में कई उन्नत सुविधाएँ शामिल हैं जो आमतौर पर प्रोडक्शन ब्लॉग प्लेटफॉर्म में पाई जाती हैं।
इसमे शामिल है:
मार्कडाउन शीर्षकों से तैयार की गई विषय-सूची
संबंधित पोस्ट सुझाव
अनुमानित पठन समय
श्रेणी फ़िल्टरिंग
डिबाउंस्ड पूर्ण-पाठ खोज
स्मार्ट पेजिंग
टोस्ट सूचनाएं
कंकाल घटकों को लोड करना
एनिमेटेड पेज ट्रांज़िशन
ये विशेषताएं ब्लॉग पर आने वाले पाठकों के लिए एक आधुनिक पठन अनुभव प्रदान करती हैं।
टेक्नोलॉजी स्टैक
यह प्रोजेक्ट आधुनिक फ्रंटएंड स्टैक का उपयोग करके बनाया गया है।
| परत | तकनीकी |
|---|---|
| रूपरेखा | नुक्स्ट 3.15 |
| यूआई लाइब्रेरी | व्यू 3.5 |
| भाषा | टाइपस्क्रिप्ट 5.7 |
| स्टाइल | टेलविंड सीएसएस 3.4 |
| राज्य प्रबंधन | पिनिया |
| HTTP क्लाइंट | एक्सियोस |
| माउस | @nuxt/icon के माध्यम से आइकन बनाएं |
| विषय | @nuxtjs/color-mode |
| लिंटिंग | ईएसएलिंट |
| का प्रारूपण | खूबसूरत |
यह स्टैक प्रदर्शन, स्केलेबिलिटी और रखरखाव क्षमता प्रदान करता है ।
परियोजना संरचना का अवलोकन
इस रिपॉजिटरी की संरचना स्वच्छ और सुव्यवस्थित है।
महत्वपूर्ण निर्देशिकाओं में निम्नलिखित शामिल हैं:
पृष्ठों
यह pagesडायरेक्टरी मुख्य मार्गों को परिभाषित करती है:
index.vue– होमपेजabout.vue– हमारे बारे में पृष्ठcontact.vue- संपर्क करें प्रपत्रsearch.vue– खोज इंटरफ़ेसblog/[slug].vue– ब्लॉग पोस्ट पृष्ठblog/category/[slug].vue– श्रेणी पृष्ठ
कॉम क्लास="ac-h3"घटक
पुन: प्रयोज्य यूआई घटकों को तार्किक श्रेणियों में समूहीकृत किया गया है:
layout- शीर्षक और पृष्ठांकcommon– पेजिंग, स्केलेटन लोडर, टोस्ट नोटिफिकेशनblog– ब्लॉग से संबंधित घटक जैसे पोस्टकार्ड और विषय-सूची
Comp class="ac-h3"osables
कंपोजेबल्स डायरेक्टरी में पुन: प्रयोज्य लॉजिक होता है।
महत्वपूर्ण कंपोजेबल में शामिल हैं:
useApi()– टाइप्ड एपीआई सेवा परतuseDebounce()– प्रतिक्रियाशील मानों को डिबाउंस करें
< class="ac-h3"h3>मॉक एपीआई लेयर</ class>
मॉक सिस्टम mocksडायरेक्टरी के अंदर स्थित है।
इसमें है:
handlers.ts– एपीआई अनुरोध अवरोधकposts.ts– नमूना ब्लॉग पोस्टauthors.ts– लेखक डेटाcategories.ts– श्रेणी डेटा
यह संरचना परियोजना को संशोधित और विस्तारित करना आसान बनाती है ।
प्रोजेक्ट को इंस्टॉल और रन कैसे करें
प्रोजेक्ट को स्थानीय रूप से चलाने के लिए इन चरणों का पालन करें।
पूर्वापेक्षा class="ac-h3"uisites
आप की जरूरत है:
Node.js 18.17 या बाद का संस्करण
npm, yarn, या 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_PUBLIC_USE_MOCK_API=false
अपनी एपीआई बेस यूआरएल को कॉन्फ़िगर करें:
NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com
सुनिश्चित करें कि आपका बैकएंड रिस्पॉन्स इसमें परिभाषित प्रकारों से मेल खाता हो:
types/index.ts
किसी अतिरिक्त कोड परिवर्तन की आवश्यकता नहीं है।
ब्लॉग को अनुकूलित करना
डेवलपर आसानी से टेम्पलेट को अनुकूलित कर सकते हैं।
थीम या स्टाइल बदलें
Tailwind कॉन्फ़िगरेशन को संपादित करें:
tailwind.config.ts
वैश्विक शैलियाँ यहाँ स्थित हैं:
assets/css/main.css
ब्लॉग सामग्री में बदलाव करें
मॉक कंटेंट को निम्नलिखित में अपडेट किया जा सकता है:
mocks/posts.ts
mocks/categories.ts
mocks/authors.ts
इससे आप विभिन्न ब्लॉग डेटासेट का त्वरित प्रोटोटाइप बना सकते हैं।
ऐप सेटिंग्स अपडेट करें
नेविगेशन, ब्रांडिंग और सोशल लिंक जैसे एप्लिकेशन स्थिरांक निम्न स्थानों में संग्रहीत हैं:
utils/constants.ts
इस Nuxt ब्लॉग टेम्पलेट का उपयोग क्यों करें?
यह प्रोजेक्ट डेवलपर्स के लिए एक बेहतरीन विकल्प है क्योंकि यह निम्नलिखित सुविधाएं प्रदान करता है:
स्वच्छ Nuxt 3 आर्किटेक्चर
उत्पादन-स्तर कोड संरचना
फ्रंटएंड डेवलपमेंट के लिए मॉक एपीआई
टेलविंड सीएसएस के साथ आधुनिक यूआई
एसईओ-तैयार पृष्ठ
वास्तविक API के साथ आसान एकीकरण
यह एक शिक्षण परियोजना और उत्पादन के लिए तैयार ब्लॉग की नींव दोनों के रूप में काम करता है ।
GitHub रिपॉजिटरी
आप यहां पूरा सोर्स कोड देख सकते हैं: 👉 https://github.com/bfotool/nuxtjs-base-blog
यदि आपको यह प्रोजेक्ट उपयोगी लगे, तो रिपॉजिटरी को स्टार रेटिंग देने और इसमें सुधार करने में योगदान देने पर विचार करें।