Multi-Tenant Tema Sistemi - Kapsamli Referans Dokumani
t-{id} = Tenant temasi. Sadece ozel dosyalar burada.
simple = Fallback (mevcut, zaten var). t-{id}'de yoksa buradan alir.
Ornek: t-3/homepage.blade.php var -> onu kullan, t-3/blog/show.blade.php yok -> simple'dan al
resources/views/themes/{tema}/{view}
Ana tema klasoru - TEK DOSYA PRENSIBI - ONCELIKLI!
Modules/{Modul}/views/themes/{tema}/{view}
Modul ici tema - Fallback (resources'da yoksa)
Modules/{Modul}/views/themes/simple/{view}
Simple tema fallback - MODUL ICINDE
{modul}::front.{view}
Son care - Modul front klasoru
Tum sayfalarda ayni container genisligi kullanilmali. ixtif.com header genisligi referans alinmistir.
{{-- TUM sayfalar bu container'i kullanmali --}} <div class="container mx-auto px-4 sm:px-4 md:px-2"> ... </div> // Mobil (0-767px): px-4 (16px) // Tablet (768px+): px-4 (16px) // Desktop (md/768px+): px-2 (8px) - daha dar padding
{{-- YANLIS! Fazla padding, tutarsiz --}} <div class="container mx-auto px-3 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> {{-- DOGRU! --}} <div class="container mx-auto px-4 sm:px-4 md:px-2">
Gradient header KALDIRILDI! Yerine minimal subheader: Breadcrumb + H1 baslik, gri arkaplan.
{{-- MINIMAL SUBHEADER --}} <section class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"> <div class="container mx-auto px-4 sm:px-4 md:px-2 py-4"> {{-- Breadcrumb --}} <nav class="text-sm text-gray-500 dark:text-gray-400 mb-2"> @foreach($breadcrumbsArray as $index => $crumb) ... @endforeach </nav> {{-- H1 Baslik --}} <h1 class="text-2xl md:text-3xl font-bold font-heading text-gray-900 dark:text-white"> {{ $title }} </h1> </div> </section>
Header ve navigasyon icin xl (1280px) breakpoint kullaniyoruz. lg (1024px) kullanmak tablet boyutlarinda sorunlara yol acar!
| Class | Piksel | Kullanim |
|---|---|---|
sm: | 640px | Buyuk telefonlar |
md: | 768px | Tablet dikey |
lg: | 1024px | Tablet yatay / Kucuk laptop |
xl: | 1280px | HEADER BREAKPOINT! |
2xl: | 1536px | Buyuk ekranlar |
Grid yapisi modul tipine gore degisir. Gorsel agirlikli modullerde 2 kolon, text agirlikli modullerde 1 kolon mobilde daha okunabilir.
Sadece gorsel + baslik, az text
| Service | grid-cols-2 md:grid-cols-3 |
| Portfolio | grid-cols-2 md:grid-cols-3 |
| Galeri | grid-cols-2 md:grid-cols-3 lg:grid-cols-4 |
Baslik + aciklama + tarih + okuma suresi
| Blog | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
| Page | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
| Announcement | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
{{-- Icerik alanlari icin --}} <div class="prose prose-base max-w-none font-body dark:prose-invert prose-headings:font-heading prose-headings:text-gray-900 prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-a:text-primary-600 hover:prose-a:underline"> @parsewidgets($body ?? '') </div>
Sayfalar daha hizli acilir, site uygulama olarak yuklenebilir ve offline calisabilir. Tum bunlar otomatik olarak temalarda aktif.
Link'lere mouse ile geldiginde sayfa arka planda onceden yuklenir.
Tarayicida "Uygulamayi Yukle" butonu gosterir.
Sayfalari onbellege alir, offline destek saglar.
Sitede dinamizm ve guzellik icin hover efektleri, animasyonlu gradient text, ikon gecisleri kullanilir. Ancak ASLA scale/zoom/ziplama efekti KULLANMA - sadece renk, border ve shadow degisimi!
Tum gorsellerde loading="lazy" attribute kullan. Hero haric!
hover:scale-*, hover:-translate-y-* - KULLANMA!
Sadece: hover:border-primary-500, hover:shadow-lg
Top Bar
Telefon, WhatsApp, calisma saatleri
Main Header (sticky)
Logo, navigasyon, dark mode toggle
Mobile Menu (xl:hidden)
x-show ile acilir/kapanir
| Key | Aciklama |
|---|---|
contact_phone_1 | Ana telefon (sabit) |
contact_phone_2 | Mobil telefon |
contact_whatsapp_1 | WhatsApp numarasi |
contact_email_1 | E-posta |
@php
$logoService = app(\App\Services\LogoService::class);
$logos = $logoService->getLogos();
@endphp
@if($logos['has_light'] && $logos['has_dark'])
<img src="{{ $logos['light_logo_url'] }}" class="dark:hidden h-10">
<img src="{{ $logos['dark_logo_url'] }}" class="hidden dark:block h-10">
@endif
Tenant bazli URL yonetimi - HARDCODE YASAK!
Her tenant (site) kendi URL yapisini ozellestirebilir. Ornegin Blog modulu varsayilan /blog yerine /haberler olabilir. Bu yuzden ASLA href="/blog" gibi hardcode URL yazilmaz!
// YANLIS - Hardcode URL <a href="/blog">Blog</a> <a href="/hizmetler/web-tasarim">...</a> <a href="/sayfa/hakkimizda">...</a> // DOGRU - Dinamik URL <a href="{{ module_locale_url('Blog', 'index') }}">...</a> <a href="{{ $service->getUrl() }}">...</a> <a href="{{ $page->getUrl() }}">...</a>
| Modul | Key | Varsayilan |
|---|---|---|
Blog | index | blog |
Service | index | hizmetler |
Page | show | sayfa |
Portfolio | index | portfolyo |
11 Altin Kural Formulu + Site Renk Entegrasyonu
Leonardo AI, siteler icin profesyonel gorseller ureten yapay zeka sistemidir. Basit bir aciklama verirsin ("Forklift depo ici"), sistem bunu 11 Altin Kural ile gercek fotograf gibi gorunen detayli bir talimata cevirir.
1472x832 (yatay)
1024x1024 (kare)
1472x832 (yatay)
Anasayfa Haric Tum Sayfalar - DB Body Prensibi
HARDCODE IF/ELSE KESINLIKLE YASAK!
Tum sayfa icerikleri veritabanindaki pages.body alaninda saklanir.
show.blade.php dosyasi sadece @parsewidgets($body) ile icerigi render eder.
@if($slug == 'hakkimizda')
<div>Hakkimizda icerigi...</div>
@elseif($slug == 'iletisim')
<div>Iletisim icerigi...</div>
@endif
{{-- show.blade.php --}} <div class="page-content"> @parsewidgets($body ?? '') </div> {{-- Icerik DB'de! --}}
Her sayfa birbiri ardina gelen section'lardan olusur. Her section'in kendine ozgu arka plan rengi ve ic yapisi vardir.
<!-- SAYFA YAPISI --> <section class="bg-gradient-to-br from-slate-900 via-slate-800 to-primary-900 py-20"> <!-- HERO SECTION --> </section> <section class="bg-white dark:bg-dark-900 py-16"> <!-- CONTENT SECTION 1 --> </section> <section class="bg-slate-50 dark:bg-dark-800 py-16"> <!-- CONTENT SECTION 2 (alternating bg) --> </section> <section class="bg-gradient-to-br from-primary-600 to-primary-800 py-16"> <!-- CTA SECTION --> </section>
Sayfa basinda gradient arka planli, buyuk baslikli bolum
bg-gradient-to-br from-slate-900 via-slate-800 to-primary-900
Istatistik kartlari: 15+ Proje, 7/24 Destek vb.
grid grid-cols-2 md:grid-cols-4 gap-4
2 kolonlu icerik: Sol metin, sag gorsel/liste
grid md:grid-cols-2 gap-8 items-center
Degerlerimiz, ozellikler, avantajlar listesi
grid grid-cols-2 md:grid-cols-3 gap-6
Aksiyon cagirisi: "Bizimle Iletisime Gecin"
bg-gradient-to-br from-primary-600 to-primary-800
Ikonlu kartlar: Misyon, Vizyon, Hizmetler
w-16 h-16 bg-primary-100 rounded-xl
Profesyonel bir hakkimizda sayfasinin bolum siralaması:
Gradient arka plan, buyuk baslik, kisa aciklama
15+ Referans Proje, Kapsamli Hizmet, Profesyonel Kadro, 7/24 Destek
"Biz Kimiz?", Modern Yaklasimimiz, Kalite ve Guvenilirlik
Yan yana 2 kart: Misyonumuz ve Vizyonumuz
6 deger ikonlu kartlar: Bilgi, Guvenilirlik, Verimlilik, Basari, Arastirma, Mevzuat Uyumu
6 avantaj kartları: Uzman Kadro, Modern Teknoloji, Zamaninda Teslimat...
Service kategorilerine linkler
"Birlikte Calisalim" - Iletisim butonu
Gradient arka plan, "Bizimle Iletisime Gecin" basligi
3'lu grid: Adres, Telefon, E-posta kartlari
Sol: Iletisim formu (widget), Sag: Harita veya ek bilgiler
Hafta ici/sonu calisma saatleri tablosu
Her tenant icin icerik kaynagi olarak *_ICERIK.md dosyasi kullanilir:
UNIMAD_MADENCILIK_ICERIK.md - UNIMAD icerikleriYILDIRIM_PANJUR_ICERIK.md - Yildirim Panjur icerikleriIXTIF_ICERIK.md - ixtif icerikleriBu dosyalar: Hakkimizda metni, Misyon/Vizyon, Hizmet aciklamalari, SSS sorulari icerir.
Light Sections:
bg-white dark:bg-dark-900
Gray Sections:
bg-slate-50 dark:bg-dark-800
Hero/CTA Gradient:
bg-gradient-to-br from-primary-600 to-primary-800
Dark Footer:
bg-slate-900 dark:bg-dark-950
| Hero Section | py-20 veya py-24 |
| Content Section | py-16 |
| CTA Section | py-16 |
| Grid Gap | gap-6 veya gap-8 |
| Section Basligi | text-3xl md:text-4xl font-bold font-heading |
| Alt Baslik | text-xl font-semibold |
| Paragraf | text-gray-600 dark:text-gray-300 leading-relaxed |
| Badge/Label | text-primary-600 font-semibold text-sm uppercase tracking-wider |
-- Tenant DB'ye baglan USE tenant_unimadmadencilik_8a32cf; -- Hakkimizda sayfasini guncelle UPDATE pages SET body = '{"tr": "<section class=\"...\">...HTML ICERIK...</section>"}' WHERE slug->>'$.tr' = 'hakkimizda'; -- veya PHP Tinker ile $page = Page::where('slug->tr', 'hakkimizda')->first(); $page->body = ['tr' => $htmlContent]; $page->save();
HTML'i JSON'a koyarken " karakterlerini \" ile escape et. Tailwind class'larinda ' kullanilabilir.
yildirimpanjur.com/page/hakkimizda
Hakkimizda sayfa yapisi referansi
unimad.tuufi.com/page/hakkimizda
UNIMAD Madencilik hakkimizda
Page modulu, sitedeki statik sayfalari yonetir: Hakkimizda, Iletisim, Gizlilik Politikasi vb.
title | JSON | Sayfa basligi |
slug | JSON | URL slug |
body | JSON | HTML icerik (TUM TASARIM BURADA!) |
is_homepage | BOOL | Anasayfa mi? |
Service modulu, sirketin sundugu hizmetleri sergiler. Her hizmetin ayri sayfasi, gorseli ve kategorisi olabilir.
hero - KARE 1024x1024gallery - Ek gorseller/hizmetler/{slug}
Blog modulu, haber, makale ve icerik paylasimi icin kullanilir. Zamanlanmis yayinlama, kategori, etiket, FAQ ve HowTo schema destegi vardir.
YAYINDA
is_active=true, published_at=past
ZAMANLANMIS
is_active=true, published_at=future
TASLAK
is_active=false
Kullanici icerik metnini verir, Claude sisteme girer, gorsel uretir ve media tablosuna kaydeder.
ICERIK.md dosyasindan veya direkt metin
Tailwind ile section'lar, kartlar, gridler
pages.body JSON alanina HTML eklenir
11 Altin Kural ile profesyonel gorsel
php artisan cache:clear && view:clear
| Ozellik | Page | Service | Blog |
|---|---|---|---|
| Kategori | |||
| Etiketler | |||
| Anasayfa Olabilir | |||
| Gorsel Boyutu | 1472x832 | 1024x1024 | 1472x832 |