Bets-10
25 Haziran 2021 Cuma

SPA Builder

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

Usage

Aside Menu

  • yeni item eklenilecekse şu adımlar izlenilmeli

    • store/index.js dosyasında state objesinde bulunan aside düzenlenmeli. buraya mevcut version izlenilerek kolaylıkla yeni madde eklenilebilir. önemli olan nokta eklenen yeni madde eğer children içerisinde değilse pages’te aynı isimde sayfası olması gerekir.
    • eklenen madde children ve groups ile eşleştirilebilir. children’ların grupları varsa components klasörü içerisinde sayfaIsmi-childrenIsmi.vue dosyası oluşturulmalı. isimlendirme aşağıdaki fonksiyonun çıktısına göre olmalıdır:
    (pageName + '-' + childrenName).toLowerCase().replace(/[.]|\s|[#]/g, '').trim()
    // general-robottxt.vue
    // general-managetags.vue
    

    bu dosya o children’ın bileşenini getirir. childrenlar grupsuzsa sayfanın tableri gelmezler.

    • liste, childrens ve groups isimleri benzersiz olmalıdır.

Theme

Btn themes

primary, danger, warning & null (default)

Önemli notlar

  • kategori isimleri ‘–’ içermemeli bkz: toSlug() function

  • page-edit sayfasında kategori & slug’da – sonrası post id’dir ve bunu değiştirmeye çalışmayınız

  • page-edit sayfasında kategori & slug’da ‘–’ karakterlerini silmeyiniz

  • page-edit sayfasında yapıştırdıgınız scriptlerin formatlarının bozuk olmadıgına dikkat ediniz.

    storage hakkında

    • medialar sadece library klasöründeki resimleri gösterir.
    • library deki resimler reviews, popups gibi bileşenlerde kullanılabilecek kısa isimlendirme özelliğine sahiptir
    • library dışında, posts, favicons klasörleri vardır. bunlar media’da gösterilmezler.
  • kullanımda olan reviewlar ve popuplar silinirse, hala kullanılıyor görünecekler fakat kullanılmayacaklar. bu verilerin manuel olarak güncellenilmesi gerekir.

  • bir üstteki sorunun sebebi relational db kullanmıyor olmamızdan kaynaklıdır. şimdilik yapabileceğim bir şey yoktur.

  • admin’in kendisini settings>admins arrayinde email’ini tanımlaması gerekir. yoksa admin olarak sayılmaz.

functions ile ilgili notlar

  • root’taki .env dosyasında değişiklik yapıldıysa bu, functions’taki .env dosyasına da aktarılmalıdır.

Built-in Route’lar

  • / -> anasayfa. bloglar kronolojik sırada liste veya özel biçimlerde gelir.
  • /category/_name -> kategorinin ismi eğer panelde tanımlıysa ve bu kategoride post varsa liste şeklinde gösteirlir
  • /blog -> bütün postlar kare olarak listelenir
  • /_category/_name -> post kategorisi ve post slug’ından oluşur. blog sayfasını içerir.
  • /* -> 404 sayfası

built-in routelar dışında herhangi bir sayfa içi url verirseniz hata ekranıyla karşılaşırsınız.

Sitemap Dinamik Route’lar

/, /blog route’ları önceden tanımlanmıştır.
bunun dışında kalan /category/* ve /_category/_slug sayfaları dinamik olarak gelirler.
firebase’de yazdıgım buildSitemap isimli fonksiyon ile her defasında /sitemap.xml manuel veya arama motoru tarafından açılmak istenildiğinde
site içeriğine göre en güncel xml yaratılır. blog sayfalarında sadece yayınlananlar xml’e dahil edilir.

anasayfa url’ine /sitemap.xml ekleyerek sitemap görüntülenebilir.

Deployment (Manuel)

eğer windows işletim sisteminiz yok ise deploy sürecini manuel olarak yapmanız gerekir

1- npm run build ile .nuxt çıktısı alınır
2- bu çıktı /functions içerisine doğrudan yapıştırılır
3- bu çıktının içerisindeki /dist içeriği (client, server, *) kopyalanıp /public/_nuxt içerisine yapıştırılır
4- cd functions ve npm run deploy 5dk içerisinde deploy edilmiş olur.

Deployment (Auto)

1- npm run deploy:firebase not: root’taki package.json’ı çalıştırmalısınız
2- F=file ve D=directory seçenekler çıkarsa D (directory) seçilmeli