Nuxt 3 Base ბლოგის შაბლონი – Bfotool Nuxtjs Base ბლოგი(Vue 3 + TypeScript + Tailwind)

თუ თქვენ ეძებთ თანამედროვე 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 ბლოგი?

Bfotool Nuxtjs Base Blog არის თანამედროვე ბლოგის აპლიკაციის შაბლონი, რომელიც შექმნილია უახლესი ფრონტენდ ტექნოლოგიების გამოყენებით. ის უზრუნველყოფს სრულ ბლოგინგ ინტერფეისს პოსტებით, კატეგორიებით, ძიების ფუნქციონალით და საკონტაქტო გვერდებით.

პროექტი შექმნილია Nuxt 3-ის სუფთა არქიტექტურით, რაც მის გაგებასა და გაფართოებას აადვილებს.

ძირითადი მაჩვენებლები მოიცავს:

სრული ბლოგის ინტერფეისი რესპონსიული დიზაინით
იმიტირებული REST API განვითარებისთვის ბექენდის გარეშე
შექმნილია თანამედროვე Vue 3 Composition API-ით
TypeScript-ის გამოყენებით ტიპებისადმი უსაფრთხო შემუშავება
SEO-მზად მეტა კონფიგურაცია
მუქი და ღია თემების მხარდაჭერა

რეპოზიტორი შეგიძლიათ იხილოთ აქ:

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

ეს შაბლონი იდეალურია:

პირადი ბლოგები
კომპანიის ბლოგები
დეველოპერების პორტფოლიოები
Nuxt 3 არქიტექტურის შესწავლა
კონტენტის ვებსაიტების სწრაფი პროტოტიპების შექმნა

ძირითადი მახასიათებლები

C class="ac-h3" ბლოგის სრული გვერდები

შაბლონი მოიცავს სრულად დანერგილ გვერდების ნაკრებს, რომელიც ჩვეულებრივ საჭიროა ბლოგის პლატფორმაში.

მთავარ გვერდებს შორისაა:

მთავარი გვერდი – აჩვენებს მთავარ პოსტს, კატეგორიის ფილტრებს და გვერდებად დაყოფილ პოსტებს
ბლოგ პოსტის გვერდი – სტატიის სრული ხედი შინაარსისა და მასთან დაკავშირებული პოსტების ცხრილით
კატეგორიის გვერდი – დაათვალიერეთ კატეგორიის მიხედვით გაფილტრული პოსტები, რომლებიც დაათვალიერეთ.
ძიების გვერდი – რეალურ დროში ძიება დებოუნს ფუნქციონალით
გვერდის შესახებ – წარმოადგინეთ თქვენი გუნდი, მისია ან ბრენდი
საკონტაქტო გვერდი – საკონტაქტო ფორმა დადასტურებით და გამოხმაურებით
შეცდომის გვერდი – შეცდომების დამუშავების მორგებული ინტერფეისი

ეს სტრუქტურა მომხმარებლებს მზა ბლოგის გამოცდილებას სთავაზობს.

< class="ac-h3"h3>ყალბი API ფენა განვითარებისთვის

ამ პროექტის ერთ-ერთი ყველაზე ძლიერი მახასიათებელი არის mock API სისტემა .

რეალურ ბექენდთან დაკავშირების ნაცვლად, პროექტი Axios ინტერცეპტორების გამოყენებით ახდენს API პასუხების სიმულირებას .

ეს მიდგომა დეველოპერებს საშუალებას აძლევს:

შექმენით ფრონტ-ენდის ფუნქციები backend-ზე დამოკიდებულებების გარეშე
სატესტო გვერდების დახარისხება, ფილტრაცია და დახარისხება
რეალური API რეაგირების დაგვიანების სიმულირება
მარტივად გადადით რეალურ ბექენდზე მოგვიანებით

მოჩვენებითი API მოიცავს ისეთ საბოლოო წერტილებს, როგორიცაა:

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

რადგან API აბსტრაგირებულია useApi composable-ის მეშვეობით, რეალურ ბექენდზე გადასვლა მინიმალურ კონფიგურაციას მოითხოვს.

თანამედროვე Nuxt 3 არქიტექტურა

პროექტი მიჰყვება Nuxt 3-ის რეკომენდებულ განვითარების შაბლონებს, რაც მას შესანიშნავ ცნობარად აქცევს დეველოპერებისთვის, რომლებიც ფრეიმვორკს სწავლობენ.

მნიშვნელოვანი არქიტექტურული მახასიათებლები მოიცავს:

ავტომატურად იმპორტირებული კომპონენტები და კომპოზირებადი მასალები
TypeScript-ის პირველი შემუშავება
კომპოზირებადი API სერვისის ფენა
მოდულური საქაღალდის სტრუქტურა
SEO მეტა კონფიგურაცია
გვერდის გადასვლები

აპლიკაცია ასევე იყენებს:

useSeoMeta()SEO ტეგებისთვის
useColorMode()თემის გადართვისთვის
useRoute()და სხვა ჩაშენებული Nuxt კომპოზიტორები

< class="ac-h3"h3>ბნელი რეჟიმი და რეაგირებადი დიზაინი

ინტერფეისი მხარს უჭერს მუქ და ღია თემებს .- ის გამოყენებით @nuxtjs/color-mode.

მახასიათებლები მოიცავს:

სისტემის თემის ავტომატური ამოცნობა
თემის ხელით გადართვა
Tailwind CSS სტილი
მობილურზე ორიენტირებული რეაგირებადი განლაგება

ეს უზრუნველყოფს ბლოგის შეუფერხებელ მუშაობას შემდეგ სფეროებში:

სამუშაო მაგიდა
ტაბლეტები
მობილური მოწყობილობები

P class="ac-h3"owerful ბლოგის ფუნქციები

ბლოგის შაბლონი მოიცავს რამდენიმე გაფართოებულ ფუნქციას, რომლებიც ჩვეულებრივ გვხვდება საწარმოო ბლოგ პლატფორმებში.

ესენია:

Markdown-ის სათაურებიდან გენერირებული შინაარსი
დაკავშირებული პოსტების შემოთავაზებები
სავარაუდო კითხვის დრო
კატეგორიის ფილტრაცია
გაუქმებული სრული ტექსტის ძიება
ჭკვიანი გვერდების დალაგება
სადღეგრძელო შეტყობინებები
ჩონჩხის კომპონენტების ჩატვირთვა
ანიმაციური გვერდის გადასვლები

ეს ფუნქციები ბლოგის ვიზიტორებისთვის თანამედროვე კითხვის გამოცდილებას ქმნის.

ტექნოლოგიების დასტა

პროექტი აგებულია თანამედროვე ფრონტენდ სტეკის გამოყენებით.

ფენა	ტექნოლოგია
ჩარჩო	Nuxt 3.15
ინტერფეისის ბიბლიოთეკა	Vue 3.5
ენა	TypeScript 5.7
სტილი	Tailwind CSS 3.4
სახელმწიფო მენეჯმენტი	პინია
HTTP კლიენტი	აქსიოსი
ხატები	ხატულიზაცია @nuxt/icon-ის საშუალებით
თემა	@nuxtjs/ფერის რეჟიმი
ლინტინგი	ESLint
ფორმატირება	უფრო ლამაზი

ეს დასტა უზრუნველყოფს შესრულებას, მასშტაბირებას და შენარჩუნებას .

პროექტის სტრუქტურის მიმოხილვა

საცავი მიჰყვება სუფთა და ორგანიზებულ სტრუქტურას.

მნიშვნელოვანი დირექტორიები მოიცავს:

გვერდები

დირექტორია pagesგანსაზღვრავს მთავარ მარშრუტებს:

index.vue– მთავარი გვერდი
about.vue– გვერდის შესახებ
contact.vue– საკონტაქტო ფორმა
search.vue– ძიების ინტერფეისი
blog/[slug].vue– ბლოგ პოსტის გვერდი
blog/category/[slug].vue– კატეგორიის გვერდი

Com class="ac-h3" ponents

მრავალჯერადი გამოყენების UI კომპონენტები დაჯგუფებულია ლოგიკურ კატეგორიებად:

layout– სათაური და ქვედა კოლონტიტული
common– გვერდების დახარისხება, ჩონჩხის ჩამტვირთავები, ტოსტის შეტყობინებები
blog– ბლოგისთვის სპეციფიკური კომპონენტები, როგორიცაა საფოსტო ბარათები და შინაარსი

Comp class="ac-h3"osables

composables დირექტორია შეიცავს განმეორებით გამოყენებად ლოგიკას.

მნიშვნელოვანი კომპოზიტური მასალები მოიცავს:

useApi()– აკრეფილი API სერვისის ფენა
useDebounce()– რეაქტიული მნიშვნელობების დებოუნსირება

<class="ac-h3"h3>API ფენის იმიტაცია

იმიტირებული სისტემა დირექტორიაში მდებარეობს mocks.

ის შეიცავს:

handlers.ts– API მოთხოვნის ინტერცეპტორები
posts.ts– ბლოგ პოსტების ნიმუშები
authors.ts– ავტორის მონაცემები
categories.ts– კატეგორიის მონაცემები

ეს სტრუქტურა პროექტს მარტივად ცვლის და გაფართოვდება .

როგორ დააინსტალიროთ და გაუშვათ პროექტი

პროექტის ლოკალურად გასაშვებად, მიჰყევით ამ ნაბიჯებს.

წინაპირობა class="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

Nuxt-ის განვითარების სერვერი ავტომატურად გადაიტვირთება ფაილების შეცვლისას.

Mock API-დან რეალურ API-ზე გადასვლა

ამ პროექტში ერთ-ერთი საუკეთესო დიზაინის გადაწყვეტილება მარტივი API გადართვაა .

რეალური ბექენდის დასაკავშირებლად:

გარემოს ცვლადის დაყენება:

NUXT_PUBLIC_USE_MOCK_API=false

დააკონფიგურირეთ თქვენი API ბაზის URL:

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

დარწმუნდით, რომ თქვენი backend პასუხი შეესაბამება შემდეგში განსაზღვრულ ტიპებს:

types/index.ts

დამატებითი კოდის ცვლილებები არ არის საჭირო.

ბლოგის პერსონალიზაცია

დეველოპერებს შეუძლიათ შაბლონის მარტივად პერსონალიზაცია.

თემის ან სტილის შეცვლა

Tailwind კონფიგურაციის რედაქტირება:

tailwind.config.ts

გლობალური სტილები განლაგებულია:

assets/css/main.css

ბლოგის კონტენტის შეცვლა

იმიტირებული შინაარსის განახლება შესაძლებელია:

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

ეს საშუალებას გაძლევთ სწრაფად შექმნათ სხვადასხვა ბლოგის მონაცემთა ნაკრებების პროტოტიპი.

აპლიკაციის პარამეტრების განახლება

აპლიკაციის კონსტანტები, როგორიცაა ნავიგაცია, ბრენდინგი და სოციალური ბმულები, ინახება:

utils/constants.ts

რატომ გამოვიყენოთ ეს Nuxt ბლოგის შაბლონი?

ეს პროექტი შესანიშნავი არჩევანია დეველოპერებისთვის, რადგან ის უზრუნველყოფს:

სუფთა Nuxt 3 არქიტექტურა
წარმოების დონის კოდის სტრუქტურა
ფრონტენდის შემუშავებისთვის განკუთვნილი Mock API
თანამედროვე ინტერფეისი Tailwind CSS-ით
SEO-სთვის მზა გვერდები
მარტივი ინტეგრაცია რეალურ API-ებთან

ის მუშაობს როგორც სასწავლო პროექტის, ასევე წარმოებისთვის მზა ბლოგის საძირკვლის სახით .

GitHub-ის საცავი

სრული საწყისი კოდის დათვალიერება შეგიძლიათ აქ: 👉 https://github.com/bfotool/nuxtjs-base-blog

თუ პროექტი სასარგებლოდ მიგაჩნიათ, განიხილეთ რეპოზიტორიის ვარსკვლავით მონიშვნა და გაუმჯობესებების შეტანა.