close

Shablloni i Blogut Bazë Nuxt 3 – Bfotool Blogu Bazë Nuxtjs(Vue 3 + TypeScript + Tailwind)

Nëse jeni duke kërkuar një shabllon modern për nisjen e blogut Nuxt 3, Bfotool Nuxtjs Base Blog është një zgjidhje e shkëlqyer. Është një aplikacion blogu plotësisht funksional i ndërtuar me Nuxt 3, Vue 3, TypeScript dhe Tailwind CSS, i projektuar për të ndihmuar zhvilluesit të ndërtojnë shpejt një blog profesional pa pasur nevojë për një backend gjatë zhvillimit.

Projekti përfshin një shtresë API të rreme të mundësuar nga interceptorët Axios, e cila simulon një API të vërtetë REST. Kjo e bën atë të përsosur për të mësuar arkitekturën Nuxt, për të krijuar prototipa aplikacionesh ose për të ndërtuar platforma blogu të gatshme për prodhim.

Mund ta eksploroni depon këtu: 👉 https://github.com/bfotool/nuxtjs-base-blog

Çfarë është Bfotool Nuxtjs Base Blog?

Bfotool Nuxtjs Base Blog është një shabllon modern aplikacioni për blogje i ndërtuar duke përdorur teknologjitë më të fundit të frontend-it. Ai ofron një ndërfaqe të plotë blogimi me postime, kategori, funksionalitet kërkimi dhe faqe kontakti.

Projekti është hartuar me një arkitekturë të pastër Nuxt 3, duke e bërë të lehtë për t’u kuptuar dhe zgjeruar.

Pikat kryesore përfshijnë:

  • Ndërfaqe e plotë e përdoruesit të blogut me dizajn që i përshtatet nevojave të përdoruesit

  • API-ja simuluese REST për zhvillim pa backend

  • Ndërtuar me API-në moderne të Kompozimit Vue 3

  • Zhvillim i sigurt për tipet me TypeScript

  • Konfigurimi meta i gatshëm për SEO

  • Mbështetje për tema të errëta dhe të lehta

Depozitori mund të gjendet këtu:

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

Ky shabllon është ideal për:

  • Blogje personale

  • Blogjet e kompanisë

  • Portofolet e zhvilluesve

  • Mësimi i arkitekturës Nuxt 3

  • Prototipizim i shpejtë i faqeve të internetit me përmbajtje

Karakteristikat kryesore

Faqet e plota të blogut C class="ac-h3"

Shablloni përfshin një grup faqesh të implementuara plotësisht që zakonisht kërkohen në një platformë blogu.

Faqet kryesore përfshijnë:

  • Faqja Kryesore – Shfaq një postim kryesor të paraqitur, filtra kategorish dhe postime të faqosura

  • Faqja e Postimeve në Blog – Pamje e plotë e artikullit me tabelën e përmbajtjes dhe postimet përkatëse

  • Faqja e Kategorisë – Shfletoni postimet e filtruara sipas kategorisë

  • Faqja e Kërkimit – Kërkim në kohë reale me funksionalitetin e debounce-it

  • Faqja Rreth Nesh – Prezantoni ekipin, misionin ose markën tuaj

  • Faqja e Kontaktit – Formular kontakti me vlerësim dhe reagime nga dolli

  • Faqja e Gabimeve – Ndërfaqe e Personalizuar për Trajtimin e Gabimeve

Kjo strukturë ofron një përvojë blogu të gatshme për përdorim për përdoruesit.

< class="ac-h3"h3>Shtresë API e rreme për zhvillim

Një nga karakteristikat më të fuqishme të këtij projekti është sistemi i improvizuar i API-t .

Në vend që të lidhet me një backend të vërtetë, projekti simulon përgjigjet e API-t duke përdorur interceptorët Axios .

Kjo qasje u lejon zhvilluesve të:

  • Ndërtoni veçori të frontend-it pa varësi nga backend-i

  • Testimi i faqezimit, filtrimit dhe renditjes

  • Simuloni vonesat reale të përgjigjes së API-t

  • Kaloni lehtësisht në një backend të vërtetë më vonë

API-ja simuluese përfshin pika fundore të tilla si:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Meqenëse API është abstraktuar përmes useApi composable, kalimi në një backend të vërtetë kërkon konfigurim minimal.

Arkitektura Moderne Nuxt 3

Projekti ndjek modelet e rekomanduara të zhvillimit të Nuxt 3, duke e bërë atë një referencë të shkëlqyer për zhvilluesit që mësojnë framework-un.

Karakteristikat e rëndësishme arkitekturore përfshijnë:

  • Komponentë dhe materiale të përbëra të importuara automatikisht

  • Zhvillimi i TypeScript-it në radhë të parë

  • Shtresa e shërbimit të API-t të kompozueshëm

  • Struktura modulare e dosjeve

  • Konfigurimi i meta-ve të SEO-së

  • Kalimet e faqeve

Aplikacioni përdor gjithashtu:

  • useSeoMeta()për etiketat SEO

  • useColorMode()për ndërrimin e temës

  • useRoute()dhe elementë të tjerë të integruar të Nuxt-it

< class="ac-h3"h3>Modaliteti i Errët dhe Dizajni Responsiv

Ndërfaqja e përdoruesit mbështet tema të errëta dhe të çelëta duke përdorur @nuxtjs/color-mode.

Karakteristikat përfshijnë:

  • Zbulimi automatik i temës së sistemit

  • Ndërrues manual i temës

  • Stilimi CSS i Tailwind

  • Paraqitje që i përshtatet celularëve

Kjo siguron që blogu të funksionojë pa probleme në:

  • Desktop

  • Tableta

  • Pajisjet mobile

Karakteristikat e Blogut P class="ac-h3"owerful

Shablloni i blogut përfshin disa veçori të përparuara që zakonisht gjenden në platformat e blogjeve të prodhimit.

Këto përfshijnë:

  • Tabela e përmbajtjes së gjeneruar nga titujt e uljes së çmimeve

  • Sugjerime për postime të ngjashme

  • Koha e parashikuar e leximit

  • Filtrimi i kategorive

  • Kërkim me tekst të plotë i anuluar

  • Faqezim inteligjent

  • Njoftimet e Toast-it

  • Ngarkimi i komponentëve të skeletit

  • Kalimet e faqeve të animuara

Këto karakteristika krijojnë një përvojë moderne leximi për vizitorët e blogut.

Stack i Teknologjisë

Projekti është ndërtuar duke përdorur një frontend stack modern.

Shtresa Teknologji
Kornizë Nuxt 3.15
Biblioteka e ndërfaqes së përdoruesit Vue 3.5
Gjuha TypeScript 5.7
Stilimi Tailwind CSS 3.4
Menaxhimi i Shtetit Pinia
Klient HTTP Axios
Ikona Ikonifiko nëpërmjet @nuxt/icon
Tema @nuxtjs/modaliteti-i-ngjyrës
Linting ESLint
Formatimi Më e bukur

Ky grumbull ofron performancë, shkallëzueshmëri dhe mirëmbajtje të mirë .

Përmbledhje e Strukturës së Projektit

Depozita ndjek një strukturë të pastër dhe të organizuar.

Drejtoritë e rëndësishme përfshijnë:

Faqet

Drejtoria pagespërcakton rrugët kryesore:

  • index.vue– Faqja Kryesore

  • about.vue– Faqja Rreth Nesh

  • contact.vue– Formulari i kontaktit

  • search.vue– Ndërfaqja e kërkimit

  • blog/[slug].vue– Faqja e postimeve në blog

  • blog/category/[slug].vue– Faqja e kategorisë

Com class="ac-h3"poents

Komponentët e ripërdorshëm të ndërfaqes së përdoruesit grupohen në kategori logjike:

  • layout– Koka dhe fundi i faqes

  • common– Faqet, ngarkuesit e skeletit, njoftimet e toast-it

  • blog– Komponentë specifikë për blogun si kartolina dhe tabela e përmbajtjes

Comp class="ac-h3"osables

Drejtoria composables përmban logjikë të ripërdorshme.

Materialet e rëndësishme të përbëra përfshijnë:

  • useApi()– Shtresa e shërbimit API e tipizuar

  • useDebounce()– Vlerat reaktive të debouncimit

Shtresa e API-t të simuluar

Sistemi simulues ndodhet brenda mocksdirektorisë.

Ai përmban:

  • handlers.ts– Ndërprerësit e kërkesave API

  • posts.ts– Shembuj të postimeve në blog

  • authors.ts– Të dhënat e autorit

  • categories.ts– Të dhënat e kategorisë

Kjo strukturë e bën projektin të lehtë për t'u modifikuar dhe zgjeruar .

Si ta instaloni dhe ekzekutoni projektin

Ndiqni këto hapa për të ekzekutuar projektin në nivel lokal.

Parakusht class="ac-h3"uisites

Ju nevojitet:

  • Node.js 18.17 ose më i ri

  • npm, fije ose pnpm

Klononi Depozitën

git clone https://github.com/bfotool/nuxtjs-base-blog.git 
cd nuxtjs-base-blog

class="ac-h3"Instalo Varësitë

npm install

Nis Serverin e Zhvillimit

npm run dev

Pastaj hapni shfletuesin tuaj në:

http://localhost:3000

Serveri i zhvillimit Nuxt do të ringarkohet automatikisht kur skedarët ndryshojnë.

Kalimi nga Mock API në Real API

Një nga vendimet më të mira të dizajnit në këtë projekt është ndërrimi i lehtë i API-t .

Për të lidhur një backend të vërtetë:

  1. Vendosni variablin e mjedisit:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Konfiguro URL-në bazë të API-t tënd:

NUXT_PUBLIC_API_BASE_URL=https://your-api-server.com

  1. Sigurohuni që përgjigjja juaj në backend përputhet me llojet e përcaktuara në:

types/index.ts

Nuk kërkohen ndryshime shtesë në kod.

Përshtatja e Blogut

Zhvilluesit mund ta personalizojnë lehtësisht shabllonin.

Ndrysho temën ose stilet

Modifikoni konfigurimin e Tailwind:

tailwind.config.ts

Stilet globale ndodhen në:

assets/css/main.css

Modifiko Përmbajtjen e Blogut

Përmbajtja simuluese mund të përditësohet në:

mocks/posts.ts 
mocks/categories.ts 
mocks/authors.ts

Kjo ju lejon të krijoni shpejt prototipa të grupeve të ndryshme të të dhënave të blogut.

Përditëso Cilësimet e Aplikacionit

Konstantet e aplikacionit, të tilla si navigimi, krijimi i markës dhe lidhjet sociale, ruhen në:

utils/constants.ts

Pse të përdorni këtë shabllon blogu Nuxt?

Ky projekt është një zgjedhje e shkëlqyer për zhvilluesit sepse ofron:

  • Arkitektura e pastër e Nuxt 3

  • Struktura e kodit në nivel prodhimi

  • API simuluese për zhvillimin e frontend-it

  • Ndërfaqe moderne e përdoruesit me Tailwind CSS

  • Faqe të gatshme për SEO

  • Integrim i lehtë me API-të reale

Funksionon si një projekt mësimor dhe si një themel blogu i gatshëm për prodhim .

Depozita e GitHub

Mund ta eksploroni kodin burimor të plotë këtu: 👉 https://github.com/bfotool/nuxtjs-base-blog

Nëse e shihni projektin të dobishëm, merrni në konsideratë vendosjen e yllit në depo dhe kontributin për përmirësime.