close

Nuxt 3 Tabanlı Blog Şablonu – Bfotool Nuxtjs Tabanlı Blog(Vue 3 + TypeScript + Tailwind)

Modern bir Nuxt 3 blog başlangıç ​​şablonu arıyorsanız, Bfotool Nuxtjs Base Blog mükemmel bir çözümdür. Nuxt 3, Vue 3, TypeScript ve Tailwind CSS ile oluşturulmuş, geliştiricilerin geliştirme sırasında bir arka uca ihtiyaç duymadan hızlı bir şekilde profesyonel bir blog oluşturmalarına yardımcı olmak için tasarlanmış, tamamen işlevsel bir blog uygulamasıdır.

Proje, gerçek bir REST API'yi simüle eden, Axios interceptor'ları tarafından desteklenen sahte bir API katmanı içeriyor. Bu da onu Nuxt mimarisini öğrenmek, uygulama prototipleri oluşturmak veya üretime hazır blog platformları geliştirmek için mükemmel kılıyor.

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

Bfotool Nuxtjs Tabanlı Blog nedir?

Bfotool Nuxtjs Base Blog, en yeni ön uç teknolojileri kullanılarak oluşturulmuş modern bir blog uygulaması şablonudur. Gönderiler, kategoriler, arama işlevi ve iletişim sayfaları içeren eksiksiz bir blog arayüzü sunar.

Proje, anlaşılması ve genişletilmesi kolay, sade bir Nuxt 3 mimarisiyle tasarlanmıştır.

Öne çıkan başlıca noktalar şunlardır:

  • Duyarlı tasarıma sahip eksiksiz blog arayüzü.

  • Arka uç gerektirmeyen geliştirme için sahte REST API.

  • Modern Vue 3 Composition API ile geliştirilmiştir.

  • TypeScript ile tür güvenli geliştirme

  • SEO uyumlu meta yapılandırması

  • Koyu ve açık tema desteği

Depoya buradan ulaşabilirsiniz:

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

Bu şablon şunlar için idealdir:

  • Kişisel bloglar

  • Şirket blogları

  • Geliştirici portföyleri

  • Nuxt 3 mimarisini öğrenmek

  • İçerik web sitelerinin hızlı prototiplemesi

Başlıca Özellikler

C class="ac-h3"omplete Blog Pages

Şablon, bir blog platformunda tipik olarak ihtiyaç duyulan sayfaların eksiksiz bir setini içermektedir.

Ana sayfalar şunları içerir:

  • Ana Sayfa – Öne çıkan bir ana gönderi, kategori filtreleri ve sayfalandırılmış gönderiler görüntüler.

  • Blog Yazısı Sayfası – İçindekiler tablosu ve ilgili yazılarla birlikte makalenin tamamının görünümü

  • Kategori Sayfası – Gönderileri kategoriye göre filtreleyerek inceleyin.

  • Arama Sayfası – Gecikmeli arama özelliğiyle gerçek zamanlı arama

  • Hakkımızda Sayfası – Ekibinizi, misyonunuzu veya markanızı tanıtın

  • İletişim Sayfası – Doğrulama ve bildirim içeren iletişim formu

  • Hata Sayfası – Özel hata işleme arayüzü

Bu yapı, kullanıcılara kullanıma hazır bir blog deneyimi sunar.

< class="ac-h3"h3>Geliştirme için Sahte API Katmanı</ class>

Bu projenin en güçlü özelliklerinden biri de sahte API sistemidir .

Proje, gerçek bir arka uca bağlanmak yerine, Axios interceptor'larını kullanarak API yanıtlarını simüle eder .

Bu yaklaşım geliştiricilere şunları sağlar:

  • Arka uç bağımlılıkları olmadan ön uç özellikleri oluşturun.

  • Sayfalama, filtreleme ve sıralama testleri

  • Gerçek API yanıt gecikmelerini simüle edin

  • Daha sonra kolayca gerçek bir arka uç sistemine geçiş yapabilirsiniz.

Örnek API, aşağıdaki gibi uç noktalar içermektedir:

  • /posts

  • /posts/featured

  • /posts/:slug

  • /categories

  • /authors

  • /contact

API, useApi bileşeni aracılığıyla soyutlandığı için, gerçek bir arka uca geçiş minimum düzeyde yapılandırma gerektirir.

Modern Nuxt 3 Mimarisi

Proje, önerilen Nuxt 3 geliştirme kalıplarını takip ediyor ve bu da onu çerçeveyi öğrenen geliştiriciler için harika bir referans haline getiriyor.

Önemli mimari özellikler şunlardır:

  • Otomatik olarak içe aktarılan bileşenler ve birleştirilebilir öğeler

  • TypeScript öncelikli geliştirme

  • Birleştirilebilir API servis katmanı

  • Modüler klasör yapısı

  • SEO meta yapılandırması

  • Sayfa geçişleri

Uygulama ayrıca şunları da kullanıyor:

  • useSeoMeta()SEO etiketleri için

  • useColorMode()tema değiştirme için

  • useRoute()ve diğer yerleşik Nuxt bileşenleri

< class="ac-h3"h3>Karanlık Mod ve Duyarlı Tasarım</ class>

Kullanıcı arayüzü , koyu ve açık temaları@nuxtjs/color-mode desteklemektedir .

Özellikler şunları içerir:

  • Otomatik sistem teması tespiti

  • Manuel tema değiştirme

  • Tailwind CSS stillendirmesi

  • Mobil öncelikli, duyarlı tasarım

Bu, blogun aşağıdaki platformlarda sorunsuz bir şekilde çalışmasını sağlar:

  • Masaüstü

  • Tabletler

  • Mobil cihazlar

P class="ac-h3"Güçlü Blog Özellikleri

Bu blog şablonu, genellikle üretim amaçlı blog platformlarında bulunan çeşitli gelişmiş özellikler içermektedir.

Bunlar arasında şunlar yer almaktadır:

  • Markdown başlıklarından oluşturulan içindekiler tablosu

  • İlgili gönderi önerileri

  • Tahmini okuma süresi

  • Kategori filtreleme

  • Gecikmeli tam metin arama

  • Akıllı sayfalama

  • Bildirimler

  • İskelet bileşenleri yükleniyor

  • Hareketli sayfa geçişleri

Bu özellikler, blog ziyaretçileri için modern bir okuma deneyimi yaratır.

Teknoloji Yığını

Proje, modern bir ön uç geliştirme yığını kullanılarak oluşturulmuştur.

Katman Teknoloji
Çerçeve Nuxt 3.15
Kullanıcı Arayüzü Kütüphanesi Vue 3.5
Dil TypeScript 5.7
Stil Tailwind CSS 3.4
Devlet Yönetimi Pinia
HTTP İstemcisi Axios
Simgeler Iconify via @nuxt/icon
Tema @nuxtjs/renk-modu
Tüylenme ESLint
Biçimlendirme Daha güzel

Bu teknoloji yığını performans, ölçeklenebilirlik ve sürdürülebilirlik sağlar .

Proje Yapısı Genel Bakışı

Depo, temiz ve düzenli bir yapıya sahiptir.

Önemli dizinler şunlardır:

Sayfalar

Bu pagesdizin ana rotaları tanımlar:

  • index.vue– Ana Sayfa

  • about.vue– Hakkımızda sayfası

  • contact.vue– İletişim formu

  • search.vue– Arama arayüzü

  • blog/[slug].vue– Blog yazısı sayfası

  • blog/category/[slug].vue– Kategori sayfası

Com class="ac-h3"ponents

Yeniden kullanılabilir kullanıcı arayüzü bileşenleri mantıksal kategorilere ayrılmıştır:

  • layout– Başlık ve altbilgi

  • common– Sayfalama, iskelet yükleyiciler, bildirim mesajları

  • blog– Bloga özgü bileşenler, örneğin kartpostallar ve içindekiler tablosu.

Comp class="ac-h3"osables

`composables` dizini yeniden kullanılabilir mantık içerir.

Önemli bileşenler şunlardır:

  • useApi()– Türlü API servis katmanı

  • useDebounce()– Reaktif değerlerin gecikmesini giderme

< class="ac-h3"h3>Sahte API Katmanı</ ...>

Sahte sistem, mocksdizin içerisinde yer almaktadır.

İçeriğinde şunlar bulunur:

  • handlers.ts– API istek engelleyicileri

  • posts.ts– Örnek blog yazıları

  • authors.ts– Yazar verileri

  • categories.ts– Kategori verileri

Bu yapı, projenin kolayca değiştirilmesini ve genişletilmesini sağlar .

Proje Nasıl Kurulur ve Çalıştırılır

Projeyi yerel olarak çalıştırmak için şu adımları izleyin.

Önkoşul dersi="ac-h3"uisites

Şunlara ihtiyacınız var:

  • Node.js 18.17 veya üzeri

  • npm, yarn veya pnpm

Depoyu Klonla

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

class="ac-h3"Bağımlılıkları Yükle

npm install

Geliştirme Sunucusunu Başlat

npm run dev

Ardından tarayıcınızı şu adreste açın:

http://localhost:3000

Dosyalarda değişiklik olduğunda Nuxt geliştirme sunucusu otomatik olarak yeniden yüklenir.

Mock API'den Real API'ye Geçiş

Bu projedeki en iyi tasarım kararlarından biri, API'ye kolayca geçiş yapılabilmesidir .

Gerçek bir arka uç bağlamak için:

  1. Ortam değişkenini ayarlayın:

NUXT_PUBLIC_USE_MOCK_API=false

  1. API temel URL'nizi yapılandırın:

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

  1. Arka uç yanıtınızın, şu bölümde tanımlanan türlerle eşleştiğinden emin olun:

types/index.ts

Ek kod değişikliğine gerek yoktur.

Blogu Özelleştirme

Geliştiriciler şablonu kolayca özelleştirebilirler.

Tema veya Stilleri Değiştir

Tailwind ayarlarını düzenleyin:

tailwind.config.ts

Küresel stiller şurada bulunur:

assets/css/main.css

Blog İçeriğini Değiştir

Örnek içerik şu şekilde güncellenebilir:

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

Bu sayede farklı blog veri kümelerinin prototiplerini hızlıca oluşturabilirsiniz.

Uygulama Ayarlarını Güncelle

Gezinti, marka kimliği ve sosyal medya bağlantıları gibi uygulama sabitleri şu konumlarda saklanır:

utils/constants.ts

Bu Nuxt Blog Şablonunu Neden Kullanmalısınız?

Bu proje, geliştiriciler için harika bir seçimdir çünkü şunları sağlar:

  • Temiz Nuxt 3 mimarisi

  • Üretim seviyesinde kod yapısı

  • Ön uç geliştirme için sahte API

  • Tailwind CSS ile modern kullanıcı arayüzü

  • SEO uyumlu sayfalar

  • Gerçek API'lerle kolay entegrasyon

Hem bir öğrenme projesi hem de üretime hazır bir blog altyapısı olarak işlev görüyor .

GitHub Deposu

Kaynak kodunun tamamına buradan ulaşabilirsiniz: 👉 https://github.com/bfotool/nuxtjs-base-blog

Eğer projeyi faydalı buluyorsanız, lütfen depoyu yıldızlayın ve iyileştirmeler için katkıda bulunun.