यदि तपाईं आधुनिक 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 Base Blog भनेको के हो?
Bfotool Nuxtjs Base Blog एउटा आधुनिक ब्लग एप्लिकेसन टेम्प्लेट हो जुन नवीनतम फ्रन्टएन्ड प्रविधिहरू प्रयोग गरेर बनाइएको हो। यसले पोस्टहरू, कोटीहरू, खोज कार्यक्षमता, र सम्पर्क पृष्ठहरू सहितको पूर्ण ब्लगिङ इन्टरफेस प्रदान गर्दछ।
यो परियोजना सफा Nuxt 3 वास्तुकलाको साथ डिजाइन गरिएको छ, जसले यसलाई बुझ्न र विस्तार गर्न सजिलो बनाउँछ।
मुख्य हाइलाइटहरू समावेश छन्:
उत्तरदायी डिजाइनको साथ पूर्ण ब्लग UI
ब्याकएन्ड बिना विकासको लागि नक्कली REST API
आधुनिक Vue 3 Composition API सँग निर्मित
टाइपस्क्रिप्टको साथ टाइप-सुरक्षित विकास
SEO-तयार मेटा कन्फिगरेसन
गाढा र हल्का विषयवस्तु समर्थन
भण्डार यहाँ पाउन सकिन्छ:
👉 https://github.com/bfotool/nuxtjs-base-blog
यो टेम्प्लेट निम्नका लागि उपयुक्त छ:
व्यक्तिगत ब्लगहरू
कम्पनी ब्लगहरू
विकासकर्ता पोर्टफोलियोहरू
नक्सट ३ वास्तुकला सिक्दै
सामग्री वेबसाइटहरूको द्रुत प्रोटोटाइपिङ
प्रमुख विशेषताहरू
C class="ac-h3"पूरा ब्लग पृष्ठहरू
टेम्प्लेटमा ब्लग प्लेटफर्ममा सामान्यतया आवश्यक पर्ने पूर्ण रूपमा कार्यान्वयन गरिएका पृष्ठहरूको सेट समावेश छ।
मुख्य पृष्ठहरूमा समावेश छन्:
गृह पृष्ठ- विशेष हिरो पोस्ट, कोटी फिल्टरहरू, र पृष्ठांकित पोस्टहरू प्रदर्शन गर्दछ।
ब्लग पोस्ट पृष्ठ- सामग्री तालिका र सम्बन्धित पोस्टहरूको साथ पूर्ण लेख दृश्य
श्रेणी पृष्ठ- श्रेणी अनुसार फिल्टर गरिएका पोस्टहरू ब्राउज गर्नुहोस्
खोज पृष्ठ- डिबाउन्स कार्यक्षमताको साथ वास्तविक-समय खोजी
पृष्ठको बारेमा- आफ्नो टोली, मिसन, वा ब्रान्डको परिचय दिनुहोस्
सम्पर्क पृष्ठ- प्रमाणीकरण र टोस्ट प्रतिक्रिया सहितको सम्पर्क फारम
त्रुटि पृष्ठ- अनुकूलन त्रुटि ह्यान्डलिंग UI
यो संरचनाले प्रयोगकर्ताहरूलाई प्रयोग गर्न तयार ब्लग अनुभव प्रदान गर्दछ।
<class="ac-h3"h3>विकासको लागि नक्कली API तह
यस परियोजनाको सबैभन्दा शक्तिशाली विशेषताहरू मध्ये एक मक एपीआई प्रणाली हो ।
वास्तविक ब्याकएन्डमा जडान गर्नुको सट्टा, परियोजनाले Axios इन्टरसेप्टरहरू प्रयोग गरेर API प्रतिक्रियाहरूको नक्कल गर्दछ ।
यो दृष्टिकोणले विकासकर्ताहरूलाई निम्न गर्न अनुमति दिन्छ:
ब्याकएन्ड निर्भरता बिना फ्रन्टएन्ड सुविधाहरू निर्माण गर्नुहोस्
परीक्षण पृष्ठांकन, फिल्टरिङ, र क्रमबद्ध गर्ने
वास्तविक API प्रतिक्रिया ढिलाइहरू अनुकरण गर्नुहोस्
पछि सजिलै वास्तविक ब्याकएन्डमा स्विच गर्नुहोस्
नक्कली API मा अन्तिम बिन्दुहरू समावेश छन् जस्तै:
/posts/posts/featured/posts/:slug/categories/authors/contact
API लाई useApi कम्पोजेबल मार्फत सारांशित गरिएको हुनाले, वास्तविक ब्याकएन्डमा स्विच गर्न न्यूनतम कन्फिगरेसन आवश्यक पर्दछ।
आधुनिक नक्सट ३ वास्तुकला
यो परियोजनाले सिफारिस गरिएका Nuxt 3 विकास ढाँचाहरू पछ्याउँछ, जसले गर्दा यो फ्रेमवर्क सिक्ने विकासकर्ताहरूको लागि एक उत्कृष्ट सन्दर्भ हो।
महत्त्वपूर्ण वास्तुकला विशेषताहरू समावेश छन्:
स्वतः आयात गरिएका कम्पोनेन्टहरू र कम्पोजेबलहरू
टाइपस्क्रिप्ट-पहिलो विकास
कम्पोजेबल API सेवा तह
मोड्युलर फोल्डर संरचना
SEO मेटा कन्फिगरेसन
पृष्ठ संक्रमणहरू
अनुप्रयोगले पनि प्रयोग गर्दछ:
useSeoMeta()SEO ट्यागहरूको लागिuseColorMode()विषयवस्तु परिवर्तनको लागिuseRoute()र अन्य बिल्ट-इन नक्सट कम्पोजेबलहरू
<class="ac-h3"h3>डार्क मोड र उत्तरदायी डिजाइन
UI ले अँध्यारो र हल्का विषयवस्तुहरूलाई प्रयोग गरेर समर्थन गर्दछ @nuxtjs/color-mode।
सुविधाहरू समावेश:
स्वचालित प्रणाली विषयवस्तु पत्ता लगाउने
म्यानुअल थिम टगल गर्नुहोस्
टेलविन्ड CSS स्टाइलिङ
मोबाइल-पहिलो उत्तरदायी लेआउट
यसले ब्लगले निम्न ठाउँमा निर्बाध रूपमा काम गर्छ भनी सुनिश्चित गर्दछ:
डेस्कटप
ट्याब्लेटहरू
मोबाइल उपकरणहरू
P class="ac-h3"owerful ब्लग सुविधाहरू
ब्लग टेम्प्लेटमा उत्पादन ब्लग प्लेटफर्महरूमा सामान्यतया पाइने धेरै उन्नत सुविधाहरू समावेश छन्।
यसमा समावेश छन्:
मार्कडाउन शीर्षकहरूबाट उत्पन्न सामग्री तालिका
सम्बन्धित पोस्ट सुझावहरू
अनुमानित पढ्ने समय
कोटी फिल्टरिङ
पूर्ण-पाठ खोजलाई खारेज गरियो
स्मार्ट पृष्ठांकन
टोस्ट सूचनाहरू
स्केलेटन कम्पोनेन्टहरू लोड गर्दै
एनिमेटेड पृष्ठ संक्रमणहरू
यी सुविधाहरूले ब्लग आगन्तुकहरूको लागि आधुनिक पठन अनुभव सिर्जना गर्दछ।
प्रविधि स्ट्याक
यो परियोजना आधुनिक फ्रन्टएन्ड स्ट्याक प्रयोग गरेर बनाइएको हो।
| तह | प्रविधि |
|---|---|
| फ्रेमवर्क | नक्सट ३.१५ |
| UI पुस्तकालय | भ्यू ३.५ |
| भाषा | टाइपस्क्रिप्ट ५.७ |
| स्टाइलिङ | टेलविन्ड CSS ३.४ |
| राज्य व्यवस्थापन | पिनिया |
| HTTP क्लाइन्ट | एक्सियोस |
| आइकनहरू | @nuxt/आइकन मार्फत आइकन गर्नुहोस् |
| विषयवस्तु | @nuxtjs/रङ-मोड |
| लिन्टिङ | ESLintName |
| ढाँचाबद्ध गर्दै | प्रिटियर |
यो स्ट्याकले कार्यसम्पादन, स्केलेबिलिटी, र मर्मतसम्भार प्रदान गर्दछ ।
परियोजना संरचना सिंहावलोकन
भण्डारले सफा र व्यवस्थित संरचना पछ्याउँछ।
महत्त्वपूर्ण निर्देशिकाहरूमा समावेश छन्:
पृष्ठहरू
निर्देशिकाले pagesमुख्य मार्गहरू परिभाषित गर्दछ:
index.vue- गृहपृष्ठabout.vue- पृष्ठको बारेमाcontact.vue- सम्पर्क फारमsearch.vue- खोज इन्टरफेसblog/[slug].vue– ब्लग पोस्ट पृष्ठblog/category/[slug].vue- श्रेणी पृष्ठ
कम वर्ग="ac-h3"घटकहरू
पुन: प्रयोग गर्न मिल्ने UI कम्पोनेन्टहरूलाई तार्किक कोटीहरूमा समूहबद्ध गरिएको छ:
layout- हेडर र फुटरcommon- पृष्ठांकन, स्केलेटन लोडरहरू, टोस्ट सूचनाहरूblog– ब्लग-विशिष्ट घटकहरू जस्तै पोस्ट कार्ड र सामग्री तालिका
कम्प वर्ग="ac-h3"ओसेबलहरू
कम्पोजेबल डाइरेक्टरीमा पुन: प्रयोग गर्न मिल्ने तर्क हुन्छ।
महत्त्वपूर्ण कम्पोजेबलहरू समावेश छन्:
useApi()- टाइप गरिएको API सेवा तहuseDebounce()- प्रतिक्रियाशील मानहरूलाई डिबाउन्स गर्नुहोस्
<class="ac-h3"h3>मक एपीआई तह
नक्कली प्रणाली 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 बाट वास्तविक API मा स्विच गर्दै
यस परियोजनामा सबैभन्दा राम्रो डिजाइन निर्णयहरू मध्ये एक सजिलो 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 ब्लग टेम्प्लेट किन प्रयोग गर्ने?
यो परियोजना विकासकर्ताहरूको लागि एक राम्रो विकल्प हो किनभने यसले प्रदान गर्दछ:
क्लिन नक्सट ३ आर्किटेक्चर
उत्पादन-स्तर कोड संरचना
फ्रन्टएन्ड विकासको लागि नक्कली API
टेलविन्ड CSS सहितको आधुनिक UI
SEO-तयार पृष्ठहरू
वास्तविक API हरूसँग सजिलो एकीकरण
यो सिकाइ परियोजना र उत्पादन-तयार ब्लग फाउन्डेसनको रूपमा काम गर्दछ ।
GitHub भण्डार
तपाईं यहाँ पूरा स्रोत कोड अन्वेषण गर्न सक्नुहुन्छ: 👉 https://github.com/bfotool/nuxtjs-base-blog
यदि तपाईंलाई परियोजना उपयोगी लाग्छ भने, भण्डारलाई ताराङ्कित गर्ने र सुधारहरूमा योगदान गर्ने विचार गर्नुहोस्।