નક્સટ ૩ બેઝ બ્લોગ ટેમ્પ્લેટ – Bfotool નક્સટજેએસ બેઝ બ્લોગ(વ્યુ ૩ + ટાઇપસ્ક્રિપ્ટ + ટેલવિન્ડ)

જો તમે આધુનિક Nuxt 3 બ્લોગ સ્ટાર્ટર ટેમ્પ્લેટ શોધી રહ્યા છો, તો Bfotool Nuxtjs Base બ્લોગ એક ઉત્તમ ઉકેલ છે. તે 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

આ નમૂનો આ માટે આદર્શ છે:

વ્યક્તિગત બ્લોગ્સ
કંપની બ્લોગ્સ
ડેવલપર પોર્ટફોલિયો
નક્સ્ટ 3 આર્કિટેક્ચર શીખવું
સામગ્રી વેબસાઇટ્સનું ઝડપી પ્રોટોટાઇપિંગ

મુખ્ય વિશેષતાઓ

C class="ac-h3"પૂર્ણ બ્લોગ પૃષ્ઠો

આ ટેમ્પ્લેટમાં બ્લોગ પ્લેટફોર્મમાં સામાન્ય રીતે જરૂરી પૃષ્ઠોનો સંપૂર્ણ અમલમાં મૂકાયેલ સમૂહ શામેલ છે.

મુખ્ય પૃષ્ઠોમાં શામેલ છે:

હોમ પેજ- ફીચર્ડ હીરો પોસ્ટ, કેટેગરી ફિલ્ટર્સ અને પૃષ્ઠ ક્રમાંકિત પોસ્ટ્સ દર્શાવે છે.
બ્લોગ પોસ્ટ પેજ- સામગ્રી કોષ્ટક અને સંબંધિત પોસ્ટ્સ સાથે સંપૂર્ણ લેખ દૃશ્ય
કેટેગરી પેજ- કેટેગરી દ્વારા ફિલ્ટર કરેલી પોસ્ટ્સ બ્રાઉઝ કરો
શોધ પૃષ્ઠ- ડિબાઉન્સ કાર્યક્ષમતા સાથે રીઅલ-ટાઇમ શોધ
પૃષ્ઠ વિશે- તમારી ટીમ, મિશન અથવા બ્રાન્ડનો પરિચય આપો
સંપર્ક પૃષ્ઠ- માન્યતા અને ટોસ્ટ પ્રતિસાદ સાથે સંપર્ક ફોર્મ
ભૂલ પૃષ્ઠ- કસ્ટમ ભૂલ હેન્ડલિંગ UI

આ માળખું વપરાશકર્તાઓ માટે ઉપયોગમાં લેવા માટે તૈયાર બ્લોગ અનુભવ પૂરો પાડે છે.

<class="ac-h3"h3>વિકાસ માટે નકલી API સ્તર

આ પ્રોજેક્ટની સૌથી શક્તિશાળી વિશેષતાઓમાંની એક મોક API સિસ્ટમ છે .

વાસ્તવિક બેકએન્ડ સાથે કનેક્ટ થવાને બદલે, પ્રોજેક્ટ Axios ઇન્ટરસેપ્ટર્સનો ઉપયોગ કરીને API પ્રતિભાવોનું અનુકરણ કરે છે .

આ અભિગમ વિકાસકર્તાઓને આની મંજૂરી આપે છે:

બેકએન્ડ ડિપેન્ડન્સી વગર ફ્રન્ટએન્ડ ફીચર્સ બનાવો
પરીક્ષણ પૃષ્ઠ ક્રમાંકન, ફિલ્ટરિંગ અને સૉર્ટિંગ
વાસ્તવિક API પ્રતિભાવ વિલંબનું અનુકરણ કરો
પછીથી સરળતાથી વાસ્તવિક બેકએન્ડ પર સ્વિચ કરો

મોક API માં એન્ડપોઇન્ટ્સ શામેલ છે જેમ કે:

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

API ને useApi કમ્પોઝેબલ દ્વારા એબ્સ્ટ્રેક્ટ કરવામાં આવતું હોવાથી, વાસ્તવિક બેકએન્ડ પર સ્વિચ કરવા માટે ન્યૂનતમ ગોઠવણીની જરૂર પડે છે.

આધુનિક નક્સ્ટ 3 આર્કિટેક્ચર

આ પ્રોજેક્ટ ભલામણ કરેલ Nuxt 3 વિકાસ પેટર્નને અનુસરે છે, જે તેને ફ્રેમવર્ક શીખવા માટે વિકાસકર્તાઓ માટે એક ઉત્તમ સંદર્ભ બનાવે છે.

મહત્વપૂર્ણ સ્થાપત્ય સુવિધાઓમાં શામેલ છે:

સ્વતઃ-આયાત કરેલા ઘટકો અને કમ્પોઝેબલ્સ
ટાઇપસ્ક્રિપ્ટ-પ્રથમ વિકાસ
કમ્પોઝેબલ API સેવા સ્તર
મોડ્યુલર ફોલ્ડર માળખું
SEO મેટા રૂપરેખાંકન
પૃષ્ઠ સંક્રમણો

એપ્લિકેશન પણ ઉપયોગ કરે છે:

useSeoMeta()SEO ટૅગ્સ માટે
useColorMode()થીમ સ્વિચિંગ માટે
useRoute()અને અન્ય બિલ્ટ-ઇન નક્સ્ટ કમ્પોઝેબલ્સ

<class="ac-h3"h3>ડાર્ક મોડ અને રિસ્પોન્સિવ ડિઝાઇન

UI ડાર્ક અને લાઇટ થીમ્સને સપોર્ટ કરે છે @nuxtjs/color-mode.

સુવિધાઓમાં શામેલ છે:

સ્વચાલિત સિસ્ટમ થીમ શોધ
મેન્યુઅલ થીમ ટૉગલ
ટેલવિન્ડ CSS સ્ટાઇલ
મોબાઇલ-પ્રથમ રિસ્પોન્સિવ લેઆઉટ

આ ખાતરી કરે છે કે બ્લોગ નીચેના સ્થળોએ સરળતાથી કાર્ય કરે છે:

ડેસ્કટોપ
ગોળીઓ
મોબાઇલ ઉપકરણો

P class="ac-h3"owerful બ્લોગ સુવિધાઓ

બ્લોગ ટેમ્પ્લેટમાં ઘણી અદ્યતન સુવિધાઓ શામેલ છે જે સામાન્ય રીતે પ્રોડક્શન બ્લોગ પ્લેટફોર્મમાં જોવા મળે છે.

આમાં શામેલ છે:

માર્કડાઉન હેડિંગમાંથી જનરેટ થયેલ સામગ્રીનું કોષ્ટક
સંબંધિત પોસ્ટ્સ સૂચનો
અંદાજિત વાંચન સમય
શ્રેણી ફિલ્ટરિંગ
પૂર્ણ-ટેક્સ્ટ શોધને રદિયો આપ્યો
સ્માર્ટ પૃષ્ઠ ક્રમાંકન
ટોસ્ટ સૂચનાઓ
હાડપિંજરના ઘટકો લોડ કરી રહ્યું છે
એનિમેટેડ પૃષ્ઠ સંક્રમણો

આ સુવિધાઓ બ્લોગ મુલાકાતીઓ માટે આધુનિક વાંચન અનુભવ બનાવે છે.

ટેકનોલોજી સ્ટેક

આ પ્રોજેક્ટ આધુનિક ફ્રન્ટએન્ડ સ્ટેકનો ઉપયોગ કરીને બનાવવામાં આવ્યો છે.

સ્તર	ટેકનોલોજી
ફ્રેમવર્ક	નક્સ્ટ ૩.૧૫
UI લાઇબ્રેરી	વ્યુ ૩.૫
ભાષા	ટાઇપસ્ક્રિપ્ટ 5.7
સ્ટાઇલિંગ	ટેલવિન્ડ CSS 3.4
રાજ્ય વ્યવસ્થાપન	પિનિયા
HTTP ક્લાયંટ	એક્સિઓસ
ચિહ્નો	@nuxt/icon દ્વારા આઇકોનાઇફ કરો
થીમ	@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 18.17 અથવા પછીનું
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 થી રીઅલ 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

આ નક્સ્ટ બ્લોગ ટેમ્પલેટનો ઉપયોગ શા માટે કરવો?

આ પ્રોજેક્ટ વિકાસકર્તાઓ માટે એક શ્રેષ્ઠ પસંદગી છે કારણ કે તે પ્રદાન કરે છે:

ક્લીન નક્સ્ટ 3 આર્કિટેક્ચર
ઉત્પાદન-સ્તર કોડ માળખું
ફ્રન્ટએન્ડ ડેવલપમેન્ટ માટે મોક API
ટેલવિન્ડ CSS સાથે આધુનિક UI
SEO-તૈયાર પૃષ્ઠો
વાસ્તવિક API સાથે સરળ એકીકરણ

તે શીખવાના પ્રોજેક્ટ અને ઉત્પાદન માટે તૈયાર બ્લોગ ફાઉન્ડેશન બંને તરીકે કામ કરે છે .

ગિટહબ રિપોઝીટરી

તમે સંપૂર્ણ સોર્સ કોડ અહીં શોધી શકો છો: 👉 https://github.com/bfotool/nuxtjs-base-blog

જો તમને પ્રોજેક્ટ ઉપયોગી લાગે, તો રિપોઝીટરીને સ્ટાર કરવાનું અને સુધારાઓનું યોગદાન આપવાનું વિચારો.