close

„Nuxt 3“ bazinio tinklaraščio šablonas – „Bfotool“ „Nuxtjs“ bazinis tinklaraštis(„Vue 3“ + „TypeScript“ + „Tailwind“)

Jei ieškote modernaus „Nuxt 3“ tinklaraščio pradžios šablono, „ Bfotool Nuxtjs Base Blog“ yra puikus sprendimas. Tai visiškai funkcionali tinklaraščio programa, sukurta naudojant „Nuxt 3“, „Vue 3“, „TypeScript“ ir „Tailwind CSS“, skirta padėti kūrėjams greitai sukurti profesionalų tinklaraštį, nereikalaujant serverio kūrimo metu.

Projekte yra netikras API sluoksnis, kurį palaiko „Axios“ perėmėjai, imituojantys tikrą REST API. Dėl to jis puikiai tinka mokytis „Nuxt“ architektūros, kurti prototipines programas arba kurti gamybai paruoštas tinklaraščių platformas.

Saugyklą galite peržiūrėti čia: 👉 https://github.com/bfotool/nuxtjs-base-blog

Kas yra „Bfotool Nuxtjs“ bazinis tinklaraštis?

„Bfotool Nuxtjs Base Blog“ yra modernus tinklaraščio programos šablonas, sukurtas naudojant naujausias sąsajos technologijas. Jis suteikia pilną tinklaraščio sąsają su įrašais, kategorijomis, paieškos funkcijomis ir kontaktų puslapiais.

Projektas sukurtas naudojant švarią „Nuxt 3“ architektūrą, todėl jį lengva suprasti ir išplėsti.

Svarbiausi akcentai:

  • Pilna tinklaraščio vartotojo sąsaja su reaguojančiu dizainu

  • Mock REST API kūrimas be serverio

  • Sukurta naudojant modernią „Vue 3 Composition API“

  • Saugus tipo kūrimas naudojant „TypeScript“

  • SEO paruošta meta konfigūracija

  • Tamsios ir šviesios temos palaikymas

Saugyklą galima rasti čia:

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

Šis šablonas idealiai tinka:

  • Asmeniniai tinklaraščiai

  • Įmonės tinklaraščiai

  • Kūrėjų portfeliai

  • Mokymasis „Nuxt 3“ architektūros

  • Greitas turinio svetainių prototipų kūrimas

Pagrindinės savybės

C class="ac-h3" pilni tinklaraščio puslapiai

Šablone yra visiškai įdiegtas puslapių rinkinys, paprastai reikalingas tinklaraščių platformoje.

Pagrindiniai puslapiai apima:

  • Pagrindinis puslapis – rodomas pagrindinis įrašas, kategorijų filtrai ir puslapiuoti įrašai

  • Tinklaraščio įrašo puslapis – viso straipsnio rodinys su turiniu ir susijusiais įrašais

  • Kategorijos puslapis – naršykite įrašus, filtruotus pagal kategoriją

  • Paieškos puslapis – paieška realiuoju laiku su grįžtamojo ryšio kompensavimo funkcija

  • Apie puslapį – pristatykite savo komandą, misiją ar prekės ženklą

  • Kontaktų puslapis – kontaktinė forma su patvirtinimu ir atsiliepimais

  • Klaidos puslapis – pasirinktinė klaidų tvarkymo vartotojo sąsaja

Ši struktūra suteikia vartotojams paruoštą naudoti tinklaraščio patirtį .

< class="ac-h3"h3>Netikras API sluoksnis kūrimui

Viena galingiausių šio projekto savybių yra bandomoji API sistema .

Užuot jungęsis prie tikro serverio, projektas imituoja API atsakymus naudodamas „Axios“ perėmėjus .

Šis metodas leidžia kūrėjams:

  • Kurkite priekinės dalies funkcijas be vidinės dalies priklausomybių

  • Puslapiavimo, filtravimo ir rūšiavimo bandymas

  • Imituokite realius API atsako vėlavimus

  • Vėliau lengvai perjunkite į tikrąją serverio sistemą

Mock API apima tokius galinius taškus kaip:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

Kadangi API yra abstrahuojama per „useApi“ komponuojamą elementą, perjungimas į tikrą posistemę reikalauja minimalios konfigūracijos.

Moderni „Nuxt 3“ architektūra

Projektas atitinka rekomenduojamus „Nuxt 3“ kūrimo šablonus, todėl tai puiki nuoroda kūrėjams, besimokantiems šios sistemos.

Svarbios architektūrinės savybės apima:

  • Automatiškai importuoti komponentai ir komponuojami elementai

  • „TypeScript“ pagrindu sukurta programa

  • Sukuriamas API paslaugų sluoksnis

  • Modulinė aplankų struktūra

  • SEO meta konfigūracija

  • Puslapių perėjimai

Programa taip pat naudoja:

  • useSeoMeta()SEO žymoms

  • useColorMode()temos perjungimui

  • useRoute()ir kiti integruoti „Nuxt“ komponuojami failai

Tamsusis režimas ir reaguojantis dizainas

Vartotojo sąsaja palaiko tamsias ir šviesias temas, naudodama @nuxtjs/color-mode.

Funkcijos apima:

  • Automatinis sistemos temos aptikimas

  • Rankinis temos perjungimas

  • „Tailwind“ CSS stilius

  • Mobiliesiems pritaikytas prisitaikantis išdėstymas

Tai užtikrina sklandų tinklaraščio veikimą:

  • Darbalaukis

  • Tabletės

  • Mobilieji įrenginiai

P class="ac-h3" galingos tinklaraščio funkcijos

Tinklaraščio šablone yra keletas išplėstinių funkcijų, kurios paprastai randamos gamybinėse tinklaraščių platformose.

Tai apima:

  • Turinys, sugeneruotas iš „Markdown“ antraščių

  • Susijusių įrašų pasiūlymai

  • Numatomas skaitymo laikas

  • Kategorijų filtravimas

  • Atšaukta viso teksto paieška

  • Išmanusis puslapiavimas

  • Pranešimai apie skrebučius

  • Kraunami karkaso komponentai

  • Animuoti puslapių perėjimai

Šios funkcijos sukuria modernią skaitymo patirtį tinklaraščio lankytojams.

Technologijų rinkinys

Projektas sukurtas naudojant modernų front-end steck.

Sluoksnis Technologijos
Sistema Nuxt 3.15
UI biblioteka 3.5 vaizdas
Kalba „TypeScript 5.7“
Stilius „Tailwind CSS 3.4“
Valstybės valdymas Pinia
HTTP klientas Axios
Piktogramos „Iconify“ per @nuxt/icon
Tema @nuxtjs/spalvų-režimas
Pūkeliai ESLint
Formatavimas Gražesnis

Šis paketas užtikrina našumą, mastelio keitimą ir priežiūrą .

Projekto struktūros apžvalga

Saugykla laikosi švarios ir organizuotos struktūros.

Svarbūs katalogai apima:

Puslapiai

Katalogas pagesapibrėžia pagrindinius maršrutus:

  • index.vue– Pradinis puslapis

  • about.vue– Apie puslapį

  • contact.vue– Kontaktinė forma

  • search.vue– Paieškos sąsaja

  • blog/[slug].vue– Tinklaraščio įrašo puslapis

  • blog/category/[slug].vue– Kategorijos puslapis

Com class="ac-h3" komponentai

Daugkartinio naudojimo vartotojo sąsajos komponentai yra suskirstyti į logines kategorijas:

  • layout– Antraštė ir poraštė

  • common– Puslapiavimas, skeleto krautuvai, pranešimai apie skrebučius

  • blog– Tinklaraščiui būdingi komponentai, pvz., atvirukai ir turinys

Suderinimo klasė="ac-h3"įrašams

„Composables“ kataloge yra daugkartinio naudojimo logika.

Svarbios sudėtinės dalys apima:

  • useApi()– Įvestas API paslaugų sluoksnis

  • useDebounce()– Reaktyviųjų verčių debounce

< class="ac-h3"h3>Modifikacinis API sluoksnis

Mokomoji sistema yra kataloge mocks.

Jame yra:

  • handlers.ts– API užklausų perėmėjai

  • posts.ts– Pavyzdiniai tinklaraščio įrašai

  • authors.ts– Autoriaus duomenys

  • categories.ts– Kategorijos duomenys

Ši struktūra leidžia projektą lengvai modifikuoti ir išplėsti .

Kaip įdiegti ir paleisti projektą

Norėdami paleisti projektą lokaliai, atlikite šiuos veiksmus.

Būtina sąlyga: class="ac-h3"uites

Jums reikia:

  • „Node.js 18.17“ arba naujesnė versija

  • npm, siūlai arba pnpm

Klonuoti saugyklą

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

class="ac-h3"Įdiegimo priklausomybės

npm install

Paleisti kūrimo serverį

npm run dev

Tada atidarykite naršyklę adresu:

http://localhost:3000

„Nuxt“ kūrimo serveris automatiškai perkraus, kai pasikeis failai.

Perėjimas nuo bandomosios API prie tikrosios API

Vienas geriausių šio projekto sprendimų yra paprastas API jungiklis .

Norėdami prijungti tikrą serverio sistemą:

  1. Nustatykite aplinkos kintamąjį:

NUXT_PUBLIC_USE_MOCK_API=false

  1. Konfigūruokite savo API bazinį URL:

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

  1. Įsitikinkite, kad jūsų vidinis atsakas atitinka tipus, apibrėžtus:

types/index.ts

Papildomų kodo pakeitimų nereikia.

Tinklaraščio tinkinimas

Kūrėjai gali lengvai pritaikyti šabloną.

Keisti temą arba stilius

Redaguokite „Tailwind“ konfigūraciją:

tailwind.config.ts

Visuotiniai stiliai yra:

assets/css/main.css

Tinklaraščio turinio modifikavimas

Bandomojo turinio atnaujinimas gali būti atliekamas:

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

Tai leidžia greitai sukurti skirtingų tinklaraščių duomenų rinkinių prototipus.

Atnaujinti programos nustatymus

Programos konstantos, tokios kaip navigacija, prekės ženklo kūrimas ir socialinės nuorodos, saugomos:

utils/constants.ts

Kodėl verta naudoti šį „Nuxt“ tinklaraščio šabloną?

Šis projektas yra puikus pasirinkimas kūrėjams, nes jis suteikia:

  • Švari „Nuxt 3“ architektūra

  • Gamybos lygio kodo struktūra

  • Mock API front-end kūrimui

  • Moderni vartotojo sąsaja su „Tailwind CSS“

  • SEO paruošti puslapiai

  • Paprasta integracija su realiomis API

Tai veikia ir kaip mokymosi projektas, ir kaip gamybai paruoštas tinklaraščio pagrindas .

„GitHub“ saugykla

Visą šaltinio kodą galite peržiūrėti čia: 👉 https://github.com/bfotool/nuxtjs-base-blog

Jei projektas jums naudingas, apsvarstykite galimybę jį pažymėti saugykloje ir prisidėti prie patobulinimų.