Aset template
CSS, JS, font, dan gambar di-resolve secara template-aware: sistem mencari dulu di templates/{aktif}/assets/, lalu fallback ke assets/ di root proyek. Variabel {assets/…} dan {img/…} memastikan URL mengikuti base path aplikasi (termasuk install di subdirektori).
NexaDom · template · controller
Di mana file aset berada
Aset per tampilan disimpan di bawah folder template yang sedang dipakai (theme, mobile, tablet, atau dashboard). Anda tidak menuliskan nama folder itu di URL — framework yang memetakan.
templates/
├── theme/ # desktop (default)
│ ├── header.html
│ ├── footer.html
│ └── assets/
│ ├── css/
│ ├── js/
│ ├── fonts/
│ └── images/
├── mobile/ … /assets/
├── tablet/ … /assets/
└── dashboard/ … /assets/
assets/ # root proyek (fallback + khusus)
└── drive/ # upload pengguna (avatar, dokumen, …)
└── avatar/ …Folder assets/drive/ hanya untuk file upload; tidak ikut pola “template dulu” — selalu dilayani dari root assets/drive/ lewat URL /drive/….
Resolusi otomatis (URL → file di disk)
Permintaan ke URL publik berikut dicek berturut-turut: (1) file di template aktif, (2) file di assets/ root. Kolom “Lokasi” memakai {active} sebagai nama folder template yang sedang aktif.
| URL contoh | Urutan pencarian file |
|---|---|
/assets/css/style.css |
templates/{active}/assets/css/style.css → assets/css/style.css |
/assets/js/app.js |
templates/{active}/assets/js/app.js → assets/js/app.js |
/assets/fonts/font.woff2 |
templates/{active}/assets/fonts/… → assets/fonts/… |
/images/logo.png |
templates/{active}/assets/images/logo.png → assets/images/logo.png |
/drive/avatar/2026/01/file.png |
Hanya assets/drive/avatar/2026/01/file.png (tanpa fallback template) |
Template aktif dipilih bagaimana?
Sistem menentukan folder template (theme / mobile / tablet / dashboard) lewat User-Agent, konteks halaman, dan cookie nexa_template yang diset saat render agar request aset berikutnya konsisten.
| Konteks | Folder template |
|---|---|
| Desktop (default) | theme |
| Perangkat mobile | mobile |
| Tablet | tablet |
Pengguna login, halaman /{username}/… |
dashboard |
Sintaks di template HTML
Gunakan variabel {assets/…} bila perlu path yang mengikuti base URL aplikasi. Path absolut dari root web (/assets/…, /images/…) tetap valid — cocok bila aplikasi di-deploy di root domain.
CSS
<link rel="stylesheet" href="{assets/css/style.css}">
<link rel="stylesheet" href="/assets/css/style.css">JavaScript
<script src="{assets/js/app.js}"></script>
<script src="/assets/js/app.js"></script>Font (@font-face)
<style>
@font-face {
font-family: 'CustomFont';
src: url('{assets/fonts/CustomFont.woff2}') format('woff2');
}
</style>Gambar
Path /images/… di web memetakan ke assets/images/… (template aktif dulu, lalu root). Singkat di template: {img/nama.png}.
<img src="/images/logo.png" alt="">
<img src="{img/logo.png}" alt="">
<img src="{assets/images/a2.png}" alt="">Untuk gambar yang di-resize on-the-fly, URL /images/… bisa ditambah query seperti ?w=300&h=200 (lihat controller gambar di proyek Anda).
Drive (upload)
<img src="/drive/avatar/2026/01/avatar.png" alt="">
<img src="{drive/avatar/2026/01/file.png}" alt="">Format berkas yang umum dilayani
| Jenis | Ekstensi |
|---|---|
| CSS | .css |
| JavaScript | .js |
| Font | .woff, .woff2, .ttf, .eot, .otf |
| Gambar | .png, .jpg, .jpeg, .gif, .webp, .svg, .ico |
| Lainnya | .json, .map, .html, .txt |
NexaAsset (PHP)
Di controller atau view PHP, helper NexaAsset menghasilkan path URL yang konsisten dengan aturan di atas.
// Template-aware (me-resolve ke /assets/…)
NexaAsset::asset('css/style.css');
NexaAsset::img('logo.png'); // → /images/…
NexaAsset::drive('avatar/2026/01/file.png'); // → /drive/…
// Eksplisit per template (jarang dipakai)
NexaAsset::theme('assets/css/theme.css');
NexaAsset::mobile('assets/css/mobile.css');
NexaAsset::tablet('assets/css/tablet.css');
NexaAsset::dash('style.css');Ringkasan route (HTTP)
| Path URL | Peran |
|---|---|
/assets/* | CSS/JS/font dll. — templates/{active}/assets/ lalu assets/ |
/images/* | Gambar — folder images di bawah aset template/root |
/drive/* | Upload — hanya assets/drive/ |
/theme/*, /mobile/*, … | Akses eksplisit ke aset per template (lihat dokumentasi routing) |
templates/theme/assets/ (atau mobile/tablet/dashboard) agar ikut prioritas template. (2) Upload pengguna tetap di assets/drive/ dan URL /drive/…. (3) Pakai {assets/…} atau {img/…} jika aplikasi bisa berjalan di subpath.
Lanjut
Sebelumnya: Template / NexaDom. Berikutnya: setJsController / NexaJs · Style (Nexautility). Indeks Helper · Dokumentasi · Beranda.