మీరు ఆధునిక 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 బేస్ బ్లాగ్ అనేది తాజా ఫ్రంటెండ్ టెక్నాలజీలను ఉపయోగించి నిర్మించబడిన ఆధునిక బ్లాగ్ అప్లికేషన్ టెంప్లేట్. ఇది పోస్ట్లు, వర్గాలు, శోధన కార్యాచరణ మరియు కాంటాక్ట్ పేజీలతో పూర్తి బ్లాగింగ్ ఇంటర్ఫేస్ను అందిస్తుంది.
ఈ ప్రాజెక్ట్ క్లీన్ నక్స్ట్ 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
useApi composable ద్వారా API సంగ్రహించబడినందున, నిజమైన బ్యాకెండ్కి మారడానికి కనీస కాన్ఫిగరేషన్ అవసరం.
ఆధునిక నక్స్ట్ 3 ఆర్కిటెక్చర్
ఈ ప్రాజెక్ట్ సిఫార్సు చేయబడిన Nuxt 3 డెవలప్మెంట్ నమూనాలను అనుసరిస్తుంది, ఇది ఫ్రేమ్వర్క్ నేర్చుకునే డెవలపర్లకు గొప్ప సూచనగా మారుతుంది.
ముఖ్యమైన నిర్మాణ లక్షణాలు:
స్వయంచాలకంగా దిగుమతి చేసుకున్న భాగాలు మరియు కంపోజిబుల్స్
టైప్స్క్రిప్ట్-మొదటి అభివృద్ధి
కంపోజబుల్ API సర్వీస్ లేయర్
మాడ్యులర్ ఫోల్డర్ నిర్మాణం
SEO మెటా కాన్ఫిగరేషన్
పేజీ పరివర్తనాలు
అప్లికేషన్ కూడా ఉపయోగిస్తుంది:
useSeoMeta()SEO ట్యాగ్ల కోసంuseColorMode()థీమ్ మార్పిడి కోసంuseRoute()మరియు ఇతర అంతర్నిర్మిత నక్స్ట్ కంపోజబుల్స్
<class="ac-h3"h3>డార్క్ మోడ్ మరియు రెస్పాన్సివ్ డిజైన్
UI ఉపయోగించి చీకటి మరియు తేలికపాటి థీమ్లకు@nuxtjs/color-mode మద్దతు ఇస్తుంది .
ఫీచర్లు:
ఆటోమేటిక్ సిస్టమ్ థీమ్ గుర్తింపు
మాన్యువల్ థీమ్ టోగుల్
టెయిల్విండ్ CSS స్టైలింగ్
మొబైల్-మొదటి ప్రతిస్పందనాత్మక లేఅవుట్
ఇది బ్లాగ్ కింది వాటిలో సజావుగా పనిచేస్తుందని నిర్ధారిస్తుంది:
డెస్క్టాప్
మాత్రలు
మొబైల్ పరికరాలు
P class="ac-h3"ప్రతిష్టాత్మక బ్లాగ్ ఫీచర్లు
బ్లాగ్ టెంప్లేట్ ప్రొడక్షన్ బ్లాగ్ ప్లాట్ఫామ్లలో సాధారణంగా కనిపించే అనేక అధునాతన లక్షణాలను కలిగి ఉంటుంది.
వీటిలో ఇవి ఉన్నాయి:
మార్క్డౌన్ శీర్షికల నుండి రూపొందించబడిన విషయ సూచిక
సంబంధిత పోస్ట్ల సూచనలు
అంచనా పఠన సమయం
వర్గం ఫిల్టరింగ్
పూర్తి-టెక్స్ట్ శోధన తొలగించబడింది
స్మార్ట్ పేజీనేషన్
టోస్ట్ నోటిఫికేషన్లు
అస్థిపంజరం భాగాలను లోడ్ చేస్తోంది
యానిమేటెడ్ పేజీ పరివర్తనాలు
ఈ లక్షణాలు బ్లాగ్ సందర్శకులకు ఆధునిక పఠన అనుభవాన్ని సృష్టిస్తాయి.
టెక్నాలజీ స్టాక్
ఈ ప్రాజెక్ట్ ఆధునిక ఫ్రంటెండ్ స్టాక్ ఉపయోగించి నిర్మించబడింది.
| పొర | టెక్నాలజీ |
|---|---|
| ముసాయిదా | నక్స్ట్ 3.15 |
| UI లైబ్రరీ | వీక్షణ 3.5 |
| భాష | టైప్స్క్రిప్ట్ 5.7 |
| స్టైలింగ్ | టెయిల్విండ్ CSS 3.4 |
| రాష్ట్ర నిర్వహణ | పినియా |
| HTTP క్లయింట్ | ఆక్సియోస్ |
| చిహ్నాలు | @nuxt/icon ద్వారా ఐకానిఫై చేయండి |
| థీమ్ | @nuxtjs/రంగు-మోడ్ |
| లైనింగ్ | ESLint తెలుగు in లో |
| ఫార్మాటింగ్ | ప్రెట్టియర్ |
ఈ స్టాక్ పనితీరు, స్కేలబిలిటీ మరియు నిర్వహణ సామర్థ్యాన్ని అందిస్తుంది .
ప్రాజెక్ట్ నిర్మాణం అవలోకనం
రిపోజిటరీ శుభ్రమైన మరియు వ్యవస్థీకృత నిర్మాణాన్ని అనుసరిస్తుంది.
ముఖ్యమైన డైరెక్టరీలలో ఇవి ఉన్నాయి:
పేజీలు
డైరెక్టరీ 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>మాక్ API లేయర్
మాక్ సిస్టమ్ డైరెక్టరీ లోపల ఉంది mocks.
ఇందులో ఇవి ఉన్నాయి:
handlers.ts– API అభ్యర్థన ఇంటర్సెప్టర్లుposts.ts– నమూనా బ్లాగ్ పోస్ట్లుauthors.ts– రచయిత డేటాcategories.ts– వర్గం డేటా
ఈ నిర్మాణం ప్రాజెక్ట్ను సవరించడం మరియు విస్తరించడం సులభం చేస్తుంది .
ప్రాజెక్ట్ను ఎలా ఇన్స్టాల్ చేయాలి మరియు అమలు చేయాలి
స్థానికంగా ప్రాజెక్టును అమలు చేయడానికి ఈ దశలను అనుసరించండి.
ప్రీరెక్ క్లాస్="ac-h3"యూసైట్స్
నీకు అవసరం:
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
ఈ ప్రాజెక్ట్ మీకు ఉపయోగకరంగా అనిపిస్తే, రిపోజిటరీకి స్టార్ గుర్తు పెట్టడం మరియు మెరుగుదలలను అందించడం పరిగణించండి.