Multi-Tenant Tema Sistemi - Kapsamli Referans Dokumani
container mx-auto px-4 sm:px-4 md:px-2t-{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 hem t-3 hem simple temalarda aktif.
Link'lere mouse ile geldiginde sayfa arka planda onceden yuklenir.
65ms onceden preload
1KB boyutu
Sayfa gecisleri %50 hizli
Tarayicida "Uygulamayi Yukle" butonu gosterir.
Ana ekrana eklenebilir
Fullscreen modda acilir
Tema rengi ile splash screen
Sayfalari onbellege alir, offline destek saglar.
Offline calismak
Cache stratejisi
Background sync
Public Dosyalar:
public/ ├── js/instantpage.js // Preload scripti ├── sw.js // Service Worker └── manifest.json // Dinamik (route)
Tema Entegrasyonu:
t-3/layouts/app.blade.php ├── <head> → manifest link └── </body> → instant.page + pwa-registration simple/layouts/ ├── header.blade.php → manifest link └── footer.blade.php → instant.page + pwa-registration
{{-- HEAD icinde (PWA Manifest + Apple Touch Icon) --}} <link rel="manifest" href="{{ route('manifest') }}"> {{-- Apple Touch Icon (iOS Safari icin - ZORUNLU!) --}} @php $logoService = app(\App\Services\LogoService::class); $appleTouchIcon = $logoService->getSchemaLogoUrl(); @endphp @if($appleTouchIcon) <link rel="apple-touch-icon" href="{{ $appleTouchIcon }}"> @endif {{-- BODY sonunda (instant.page + SW) --}} <script src="{{ asset('js/instantpage.js') }}" type="module"></script> <x-pwa-registration />
iOS Safari manifest.json'daki icon'lari kullanmaz!
iPhone/iPad ana ekrana ekleme icin apple-touch-icon sart
Ideal boyut: 180x180px (iOS otomatik olcekler)
LogoService ile dinamik olarak site logosu kullanilir
// PWA Manifest - Tenant'a gore dinamik Route::get('/manifest.json', function () { $siteName = setting('site_name') ?: config('app.name'); $themeColor = setting('site_theme_color') ?: '#000000'; return response()->json([ 'name' => $siteName, 'short_name' => $siteName, 'start_url' => url('/'), 'display' => 'standalone', 'theme_color' => $themeColor, 'icons' => [...] // LogoService'den ]); })->name('manifest');
Network First: Once network'ten al, basarisizsa cache'den
Bypass: HLS streaming, API, AJAX, pagination istekleri cache'lenmez
Auto Update: Yeni versiyon geldiginde eski cache temizlenir
Top Bar
Telefon numaralari, WhatsApp, calisma saatleri
Main Header (sticky)
Logo, navigasyon, dark mode toggle, CTA butonlari
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();
$hasLogo = $logos['has_light'] || $logos['has_dark'];
@endphp
@if($hasLogo)
@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
@endif