Model mental
Ada tiga tanggung jawab terpisah, membuat mereka terpisah adalah kunci untuk memahami V1.
Eyivo Core
Toko rincian perusahaan, halaman, media, SEO, keadaan navigasi dan penerbitan. Ini adalah sumber kebenaran bagi isi.
Paket tema
Mendefinisikan bentuk halaman tetap, daerah yang diijinkan, skema komponen kustom dan CSSTidak pernah mencari data atau mengeksekusi kode aplikasi.
Penyunting App
Menghasilkan bentuk aman dari skema. Pemilik dapat memutakhirkan teks, gambar, halaman dan urutan daerah di dalam suatu area.
Bukan halaman pembangun: pemilik dapat menambahkan daerah yang diijinkan ke main Mereka tidak bisa membuat area baru, menyeret seorang pahlawan ke kaki, mengubah HTML, atau memodifikasi Anda CSS.
Awal cepat: template minimal yang dapat digunakan
Setiap tema v1 memiliki tata letak lengkap, gaya, dan skrip, dan dapat mengatur mereka dalam desain apapun yang penulis pilih. Tema tidak pernah mewarisi tata letak atau aset dari tema lain. Biasa eyivo: komponen dan tujuh fallback tipe halaman berasal theme-core; sebuah tema hanya menyimpan tipe halaman yang menimpa dan komponen yang mendeklarasikan di theme: namespace.
Setiap tema v1 membutuhkan sebuah berkas tata letak baku. Keduanya page-types/ dan components/ adalah opsional ketika paket hanya menggunakan latar belakang inti:
acme-industrial/
├── theme.json
├── layouts/default.liquid
├── page-types/
│ └── home.liquid # optional override
├── components/
│ └── featured_course.liquid
├── locales/
│ ├── en.json
│ └── tr.json
└── assets/
├── css/theme.css
└── js/theme.js
layouts/default.liquid Selalu datang dari tema aktif dan memiliki dokumen publik lengkap. Eyivo pertama mencari tipe halaman yang diminta dalam tema itu, kemudian kembali ke theme-core/page-typesInti tidak pernah menyediakan tata letak atau aset, sehingga fallback halaman konten masih dibungkus dan styled oleh tema aktif.
3. theme.json
Muatan adalah baik sebuah kapabilitas deklarasi dan kontrak digunakan untuk menghasilkan bentuk App. Ini menjawab tiga pertanyaan: struktur halaman ada, yang daerah masing-masing struktur memiliki, dan apa komponen diperbolehkan untuk menyimpan. Tema bawaan secara eksplisit mendeklarasikan kesepuluh jenis halaman standar dan menyertakan berkas Liquid terkait. Tema khusus tetap dapat memakai templat fallback inti untuk jenis halaman yang tidak dideklarasikan.
{
"name": "Acme Industrial",
"version": "1.0.0",
"eyivo_theme_api": "1.0",
"settings": {
"primary_color": { "type": "color" },
"button_radius": { "type": "number" }
},
"page_types": {
"home": {
"areas": {
"hero": {
"allowed_components": ["eyivo:hero"],
"min": 0,
"max": 1
},
"main": {
"allowed_components": ["eyivo:rich_text", "eyivo:image_text", "theme:featured_course"]
}
}
},
"page": { "areas": { "main": { "allowed_components": ["eyivo:rich_text"] } } }
},
"components": {
"featured_course": {
"variants": ["card", "compact"],
"schema": {
"heading": { "type": "text", "required": true, "translatable": true },
"summary": { "type": "textarea", "translatable": true }
}
}
}
}
| Kunci | Artinya | Contoh |
|---|---|---|
version | Anda versi rilis tema yang tidak dapat diubah (semantik versi). | 1.2.0 |
eyivo_theme_api | Publik Eyivo API kontrak dukungan paket Anda. | 1.0 |
areas | bernama slot yang file Liquid halaman Anda render di tempat-tempat tetap. | hero, main, bottom |
allowed_components | Komponen mana yang dapat ditambahkan ke satu area. | ["eyivo:hero"] |
components | Tema aktif gubahan theme: definisi komponen. Dibagikan eyivo: definisi tinggal di theme-core. | featured_course |
min/max | Batas opsional pada jumlah daerah di daerah itu. | max: 1 |
Page- tipe fallback: tipe built- dalam home, page, gallery, contact, products, product dan videosAbaikan salah satu dari mereka untuk menggunakan definisi dan file Cair dari theme-coreMenentukan tipe hanya ketika tema juga menyediakan pencocokan page-types/<type>.liquid override.
Penyunting menerima merged page-type API: definisi tema aktive- menggantikan definisi inti yang cocok, sedangkan setiap tipe diabaikan tetap tersedia dari inti.
4. Isi demo lengkap dalam demo.json
Setiap upload harus termasuk portabel, draft- saja demo.json fixture dan setidaknya satu screenshot ditangkap dengan fixture yang dimuat. Built -in tema menggunakan skema yang sama. Jangan sertakan basis data ID, domain penyewa, kredensial, atau kredensial-penyimpanan objektif.
{
"schema_version": 2,
"default_locale": "en",
"label": "Northline Build Co.",
"summary": "Thoughtful construction for the way life happens.",
"media": {
"media/hero.jpg": {
"public_url": "https://cdn.example.com/demo/hero.jpg",
"mime_type": "image/jpeg",
"original_name": "hero.jpg",
"bytes": 184000,
"width": 1600,
"height": 900
}
},
"company": { "display_name": "Northline Build Co.", "logo_asset": "media/hero.jpg" },
"theme_settings": { "settings": { "header_cta_url": "/contact" } },
"pages": [],
"catalog": [],
"galleries": [],
"videos": []
}
| Kunci | Tujuan |
|---|---|
media | URL sumber publik dan metadata diketemukan oleh identifikasi aset portabel. Gunakan kembali identifier untuk hero_asset, cover_asset, media_asset, gallery- item asset, logo_asset, dan favicon_asset. |
company | Profil perusahaan, tautan sosial, merek, aset logo / favicon opsional, dan terjemahan lokal. |
theme_settings | Pengaturan tema awal, dengan pilihan locale-keyed terjemahan. |
pages | Tipe, pengurutan, keadaan navigasi, SEO, pengaturan halaman, komponen, dan isi lokal-keyed. |
catalog | Masukan katalog dengan konten lokal -keyed dan sebuah opsional cover_asset. |
galleries | Metadata galeri dan gambar item. Setiap butir galeri membutuhkan asset dan tidak kosong alt_text. |
videos | Sebuah eksternal source_url atau media_asset, mode presentasi, dan lokal -keyed konten. |
Halaman dan komponen
{
"type": "home",
"sort_order": 0,
"navigation_visible": true,
"hero_asset": "media/hero.jpg",
"translations": {
"en": { "slug": "home", "title": "Home", "meta_title": "Home | Northline" },
"tr": { "slug": "ana-sayfa", "title": "Ana sayfa", "meta_title": "Ana sayfa | Northline" }
},
"components": [{
"component_type": "eyivo:hero",
"area": "hero",
"position": 100,
"variant": "split",
"data": { "primary_url": "/contact" },
"translations": {
"en": { "heading": "Built for real life", "primary_label": "Contact us" },
"tr": { "heading": "Gerçek yaşam için tasarlandı", "primary_label": "Bize ulaşın" }
}
}]
}
Tipe dan area komponen harus dideklarasikan dalam manifes tema aktif atau theme-core. Gunakan jalur relatif seperti /contact untuk tautan dalam situs yang sama. Demo beranda bawaan memakai gambar hero yang sudah ada sebagai latar selebar halaman, dengan lapisan agar teks terbaca dan tata teks responsif: immersive pada sebagian besar tema, serta centered bergambar pada Compact. Varian hero lainnya tetap memakai tata letaknya sendiri.
Bahasa demo dan fallback
Bahasa Inggris adalah bahasa dasar yang diperlukan: set default_locale ke en. Nilai yang diberikan dalam fixtures lama juga berarti bahasa Inggris. Setiap bahasa situs yang didukung lainnya adalah opsional; jangan salin teks Inggris ke lokal lain dan menyajikan sebagai terjemahan.
Menyediakan translations.en dan objek lokal opsional untuk menyalin perusahaan, pengaturan tema, halaman, komponen, produk, galeri, judul item dan teks alt, video, dan posting blog. Legacy unkeyed bahasa Inggris tetap didukung. Membuat memilih situs tersebut bahasa asli dan jatuh kembali ke bahasa Inggris untuk setiap bidang yang hilang. Array menggantikan seluruh array Inggris; eksplisit nilai-nilai kosong dipertahankan. Hanya bahasa situs yang dipilih diimpor, tanpa otomatis memungkinkan bahasa Inggris atau lokal lainnya.
Gunakan gambar sumber bahasa Inggris dalam link same-site dan entri menu portabel. Impor peta mereka ke selongsong terjemahan yang dipilih, termasuk link dalam dokumen teks dan blog kaya. Masukan menu dapat memasok eksplisit slugs dan labels Peta. Kehilangan overrides label kembali ke Inggris. URL eksternal tidak berubah.
{
"company": {
"translations": {
"en": { "display_name": "Northline", "description": "Built around your needs." },
"tr": { "display_name": "Northline", "description": "İhtiyaçlarınıza göre tasarlandı." }
}
},
"theme_settings": {
"settings": { "header_cta_url": "/contact" },
"translations": {
"en": { "header_cta_label": "Contact us" },
"tr": { "header_cta_label": "Bize ulaşın" }
}
},
"menus": {
"footer": [{ "type": "page", "slug": "contact",
"slugs": { "en": "contact", "tr": "iletisim" },
"labels": { "en": "Contact us", "tr": "Bize ulaşın" }
}]
}
}
Impor dan keamanan media
Situs dashboard baru termasuk data demo secara baku dan segera menerbitkan bahasa yang dipilih; pemilik dapat memeriksa opsi ini. Memuat demo dari Branding di situs yang ada masih membuat draf dan simpan konten yang diterbitkan. App pusat menyalin gambar ke dalam pustaka media situs baru dan mengirimkan referensi melalui Internal APIMasters dan tema tidak pernah menerima tujuan - mandat penyimpanan. media.public_url.
Menyatakan cuplikan layar dalam theme.json.preview dengan data_source: "demo_data"Paket harus berisi setiap menyatakan preview gambar.
5. Tulis semua tata letak yang diperlukan tema Anda
Tata letak baku memiliki lengkap HTML dokumen. Tidak ada di luar tema aktif yang memasok header, footer, stylesheet, JavaScript atau struktur visual.
<!doctype html>
<html lang="{{ locale.code }}" dir="{{ locale.direction }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% eyivo_head %}
<link rel="stylesheet" href="{{ 'css/theme.css' | asset_url }}">
</head>
<body>
<header class="site-header">
<a href="{{ locale.home_url }}">{{ company.name }}</a>
<nav>
{% for item in navigation.main %}
<a href="{{ item.url }}">{{ item.label }}</a>
{% endfor %}
</nav>
</header>
{{ content | raw }}
</body>
</html>
Sebuah berkas jenis pawai kemudian memutuskan persis di mana daerah dinamis muncul. Komponen area telah dirender HTML string, jadi masukkan mereka dengan | mentahNilai-nilai biasa yang melarikan diri secara default.
<main class="home-layout">
<section class="home-layout__hero">{{ areas.hero | raw }}</section>
<div class="home-layout__content">{{ areas.main | raw }}</div>
<aside class="home-layout__footer-cta">{{ areas.bottom | raw }}</aside>
</main>
Menyewa komponen secara langsung
Seorang desainer dapat menempatkan komponen yang terdaftar langsung dalam sebuah layout atau jenis berkas. Penempatan ini tetap oleh tema dan tidak diurut ulang atau dihapus dalam panel. Berikan sebuah objek melalui data:, ruas skema individu, atau keduanya; ruas bernama menimpa kunci yang cocok dari data:.
{% eyivo_component "eyivo:cta",
eyebrow: "Let’s talk",
heading: page.title,
text: company.description,
button_label: "Contact us",
button_url: routes.contact
%}
{% eyivo_component "theme:featured_course",
data: page.settings.featured_course,
variant: "compact"
%}
Tipe mesti berupa namespace literal yang dikutip. Rendering langsung memakai skema yang sama, varian, berkas komponen, dan normalisasi component objek sebagai sebuah instansi daerah. Berkas componen tidak dapat membuat komponen lain.
Aset: selalu gunakan {{ 'css / theme.css.' | asset _ url }}Eyivo melayani dari paket aktif sebagai /theme-assets/<theme>/css/theme.css; jangan hard- kode nama tema lain atau jalur sistem berkas.
Head, route and interface dictionaries
Setiap tata letak harus dirender {% eyivo_head %} Eyivo kemudian memiliki judul, deskripsi, robot, kanonikal, pantul, Grafik Terbuka dan struktur-data keluaran. Gunakan routes.home, routes.contact, routes.catalog, routes.gallery dan routes.videos bukan hardcode jalur publik. URL konfigurasi melalui | localized _ url begitu dikenal jalur internal mendapatkan prefiks lokal aktif sementara URL eksternal tetap tidak berubah.
{{ 'Menu' | t }}
{{ theme.settings.header_cta_url | localized_url }}
Buat opsional locales/<locale>.json berkas untuk interface labels diperkenalkan oleh tema. Urutan pencarian adalah core English, core locale, tema English, kemudian lokal tema. Label bersama dari theme-core Oleh karena itu bekerja tanpa menyalin berkas. Salinan bisnis milik dalam konten dapat diterjemahkan, bidang komponen, atau daerah pengaturan-tema - bukan kamus.
Berkas komponen gubahan
<article class="featured-course featured-course--{{ component.variant }}">
<div class="featured-course__content">
<h1>{{ component.data.heading }}</h1>
{% if component.data.summary %}<p>{{ component.data.summary }}</p>{% endif %}
</div>
</article>
Untuk bidang yang dapat diterjemahkan, Eyivo memilih lokal pengunjung sebelum rendering. component.data.heading nilai.
6 Data Cair aman yang dapat Anda gunakan
Liquid menerima data biasa, normalisasi - bukan model Laravel atau basis data.
| Objek | Field yang berguna | Penggunaan khas |
|---|---|---|
site | name, locale | Set- level label dan lokal asli. |
company | name, legal_name, description, address, phone, email | Kepala, kaki dan informasi kontak. |
page | id, type, title, slug, body, settings | Isi halaman generik dan pengaturan per-page. |
seo | title, description, kanonikal / robot / Open Graph nilai ketika diberikan | Kepala dokumen. |
navigation.main | Setiap butir memiliki label, url, active | Menu situs. |
locale | code, name, native_name, direction, is_default, home_url, available | Bahasa dokumen, RTL arah, links rumah lokal dan pemilih bahasa. |
routes | home, contact, catalog, gallery, videos, blog | URL sistem yang benar; jangan pernah membuat prefix dalam Liquid. |
blog | title, url, categories, category, posts, post, pagination | Daftar blog gratis, arsip kategori, dan halaman artikel. Posts mengekspos judul, ringkasan, URL, tanggal, kategori, dan media sampul saja. blog.post.body_html berisi artikel aman server-dihasilkan HTML dan harus menggunakan rawPersediaan pemujaan previous_url dan next_url. |
theme.settings | Pengaturan manifest Anda | Gunakan warna yang dikonfigurasi, spasi atau opsi desain. |
products/product | Judul terjemahan, URL, ringkasan dan tubuh | Jenis halaman / detail daftar produk. |
galleries | Judul dan deskripsi diterjemahkan | Jenis halaman galeri. |
videos | title, description, source_type, source_url, playback_url, media | Gunakan playback_url untuk berkas video yang diunggah dan source_url untuk video HTTP(S) eksternal, sesuai source_type. Gambar terlampir tidak pernah menjadi sumber video. Jangan gunakan berkas video itu sendiri sebagai gambar poster. |
component | id, type, variant, data | Di dalam berkas komponen saja. |
Contoh tata letak Locale-safe
<html lang="{{ locale.code }}" dir="{{ locale.direction }}">
<a href="{{ locale.home_url }}">{{ company.name }}</a>
{% if locale.available.size > 1 %}
<nav aria-label="Language">
{% for language in locale.available %}
<a href="{{ language.url }}" lang="{{ language.code }}"
{% if language.current %}aria-current="page"{% endif %}>
{{ language.native_name }}
</a>
{% endfor %}
</nav>
{% endif %}
Setiap isi bahasa juga terbuka label, direction, is_default, current, dan has_translationPersediaan Eyivo hanya setara terjemahan diterbitkan, sehingga tema harus menggunakan language.url daripada membangun /en atau awalan lainnya.
Contoh dari token settling-driven: style="--brand: {{ theme.settings.primary_color }}"Pengaturan pertama harus dideklarasikan di theme.json.
7 Komponen: langsung dan dinamis
Komponen memiliki satu render kontrak dengan dua pilihan penempatan. Sebuah komponen langsung dikendalikan oleh perancang dalam tata letak atau tipe halaman. Sebuah komponen dinamis disimpan sebagai contoh area-dan dikendalikan melalui penyunting. Sinyalnya memiliki ID stabil, tipe naespace, daerah, posisi, varian opsional, data dan terjemahan. Posisi hanya memesan - bukan identitas.
Tipe ruas
text, textarea, richtext, number, boolean, select, url, email, image, video, file, color, icon, page, product dan repeater.
Namespace
eyivo: pemecahan dari theme-core/components, theme: menyelesaikan dari tema aktif, dan plugin: direserve untuk plugin masa depan. Gunakan tipe namespace yang tepat dalam sebuah daerah atau eyivo_component Tandai.
Komponen universal: set "universal": true pada sebuah definisi komponen untuk mengizinkannya dalam seluruh area dari tipe halaman yang kompatibel. Ini masih harus memiliki skema yang valid dan berkas Cair.
Tautan tindakan bersama menyesuaikan jalur internal yang dikenal dengan bahasa aktif sambil mempertahankan parameter kueri dan fragmen. Teks kaya mempertahankan pemformatan aman di dalam wadah editor bertingkat. Gambar galeri kosong diabaikan, gambar peta tanpa tujuan bukan tautan, dan label slide serta pencarian menggunakan bahasa antarmuka pengunjung.
Visual Atelier (visual-01) tetap menjalankan teks berjalan dekoratif di berandanya secara otomatis, termasuk saat peramban meminta gerakan dikurangi. Mengarahkan kursor menjeda teks; menjauhkannya melanjutkan kembali. Tampilan asli dan putaran yang hanya menggunakan CSS tetap dipertahankan.
8. Katalog komponen tersedia
Ini 30 bersama eyivo: komponen bentuk lengkap perpustakaan v1 dan menyelesaikan dari theme-core. Sebuah tema mungkin tambahan menyatakan dan mengimplementasikan sendiri theme: Komponen.
Variabel: spliteditorialcenteredimmersive
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Ya | Ya | — |
summary |
textarea |
Tidak | Ya | — |
image_url |
url |
Tidak | Tidak | — |
image_alt |
text |
Tidak | Ya | — |
primary_label |
text |
Tidak | Ya | — |
primary_url |
url |
Tidak | Tidak | — |
secondary_label |
text |
Tidak | Ya | — |
secondary_url |
url |
Tidak | Tidak | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
body |
richtext |
Tidak | Ya | — |
Variabel: image_leftimage_rightoverlap
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
body |
richtext |
Tidak | Ya | — |
image_url |
url |
Tidak | Tidak | — |
image_alt |
text |
Tidak | Ya | — |
badge |
text |
Tidak | Ya | — |
button_label |
text |
Tidak | Ya | — |
button_url |
url |
Tidak | Tidak | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
intro |
textarea |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
intro |
textarea |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
intro |
textarea |
Tidak | Ya | — |
button_label |
text |
Tidak | Ya | — |
button_url |
url |
Tidak | Tidak | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
text |
textarea |
Tidak | Ya | — |
submit_label |
text |
Tidak | Ya | — |
form_binding |
select |
Tidak | Tidak | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
heading |
text |
Tidak | Ya | — |
text |
textarea |
Tidak | Ya | — |
whatsapp_url |
url |
Tidak | Tidak | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
address |
textarea |
Tidak | Ya | — |
map_url |
url |
Tidak | Tidak | — |
image_url |
url |
Tidak | Tidak | — |
image_alt |
text |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
heading |
text |
Tidak | Ya | — |
placeholder |
text |
Tidak | Ya | — |
categories |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
summary |
textarea |
Tidak | Ya | — |
video_url |
url |
Tidak | Tidak | — |
poster_url |
url |
Tidak | Tidak | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
price |
text |
Tidak | Ya | — |
period |
text |
Tidak | Ya | — |
features |
repeater |
Tidak | Ya | — |
button_label |
text |
Tidak | Ya | — |
button_url |
url |
Tidak | Tidak | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
label |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
body |
textarea |
Tidak | Ya | — |
button_label |
text |
Tidak | Ya | — |
button_url |
url |
Tidak | Tidak | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
Komponen bersama eyivo:faq mempertahankan bidang dan markup yang sama di setiap tema. Setiap tema menampilkannya dengan tipografi, jarak, dan warna tema itu sendiri.
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
text |
textarea |
Tidak | Ya | — |
button_label |
text |
Tidak | Ya | — |
button_url |
url |
Tidak | Tidak | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
heading |
text |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Variabel: kosong
| Ruas | Tipe | Diperlukan | Dapat diterjemahkan | Opsi |
|---|---|---|---|---|
eyebrow |
text |
Tidak | Ya | — |
heading |
text |
Tidak | Ya | — |
intro |
textarea |
Tidak | Ya | — |
items |
repeater |
Tidak | Ya | — |
Foundation Impact: menyusun situs web yayasan
Foundation Impact (foundation-impact) menampilkan tujuan, program, tata kelola, dampak, acara, galeri, dan permintaan sebuah yayasan. Tata letaknya membungkus label navigasi yang panjang dan beralih ke menu yang dapat dibuka di layar yang lebih kecil. Menu header, footer, dan useful_links yang terdaftar mengatur navigasi. Jika menu terdaftarnya kosong, kepala halaman kembali ke navigasi halaman otomatis. Halaman foto pilihan menggunakan /in-pictures; /gallery tetap menjadi daftar album bawaan.
Foundation Impact memiliki seluruh sepuluh templat bawaan: Beranda, Halaman, Kontak, Produk, Detail Produk, Galeri, Video, Blog, Kategori Blog dan Artikel Blog. Area konten dan formulir terdaftar tetap kompatibel. Induk navigasi memakai status transparan dan bergaris bawah yang sama dengan tautan biasa saat disorot dan dipilih; anak yang dipilih juga menandai induknya. Submenu memakai gaya yang sama di desktop dan seluler.
Hero subhalaman tanpa gambar memakai pita lavender ringkas dengan breadcrumb berdekatan, label kecil dan judul berukuran wajar. Dengan gambar, hero menambahkan lapisan gelap serta judul, breadcrumb dan ringkasan putih. Teks berada di atas gambar dan lapisan, sementara arah lapisan mengikuti tata letak kanan ke kiri.
Komponen bersama eyivo:rich_text menerima isi bertanda editor maupun HTML lama. Keduanya melewati daftar format yang diizinkan: paragraf, judul, daftar dan tautan aman ditampilkan sebagai konten, sedangkan skrip, penangan kejadian dan tautan berbahaya dihapus. Bidang teks lain tetap memakai escaping biasa. Teks kaya demo Foundation juga memakai penanda editor.
Tema ini menyusun komponen eyivo:hero, project_grid, image_text, event_list, media_gallery, feature_grid, team_grid, stats, rich_text, faq, cta, dan lead_form yang ada. Skrip temanya yang ditunda mengaktifkan kontrol slider gambar, tab yang dapat digunakan dengan keyboard, dan penyaringan katalog. Menu seluler terbuka menggunakan kontrol HTML bawaan. Statistik menggunakan judul, label, dan catatan gelap di atas permukaan kuning pucat, dengan nilai berwarna biru. Kartu program menautkan ke halaman konten biasa. Kartu acara menjelaskan acara dan menautkan ke halaman permintaan; kartu ini tidak membuat pemesanan atau catatan kehadiran.
Halaman kontaknya menggunakan eyivo:lead_form dengan pengikatan kontak portabel yang disediakan oleh eyivo/contact. Mengimpor demo menyelesaikan pengikatan ini secara terpisah untuk setiap situs. Donasi, pengajuan hibah, dan persetujuan relawan tidak disertakan.
Impor demo bawaan menggunakan kembali entri aktif di katalog media demo tema bersama. Aplikasi pusat memiliki objek tersebut dan memberikan referensi ke master; menghapus referensi yang diimpor tidak menghapus objek bersama yang dilindungi. Pratinjau tema dan contoh SEO khusus adalah situs yang terpisah.
Village Commons: navigasi sekunder dan bilah sisi
Village Commons (village-commons) menggabungkan papan pengumuman, tempat-tempat lokal, sejarah desa, acara, foto, informasi pengunjung, dan formulir kontak khusus situs. Permukaan hijau hutan, gading, dan kuning ambar memiliki warna latar depan yang ditetapkan secara eksplisit. Komponen Eyivo yang ada menyediakan konten; kartu acara tidak menyediakan pemesanan, dan halaman catatan rapat bukan sistem arsip resmi. Bagian gambar dan teks di halaman informasi mempertahankan padding dalam yang responsif di sekitar teks. Panel acara dan FAQ di subhalaman memiliki padding dalam yang responsif. FAQ menggunakan judul ringkas dan panel lipat membulat yang bertumpuk dengan kontrol perluasan yang jelas.
Daftarkan header, secondary, sidebar, footer, dan useful_links di theme.json. Navigasi sekunder muncul di bilah utilitas; menu bilah sisi muncul di samping halaman biasa dan halaman kontak. Keduanya diedit dan diterbitkan melalui editor menu standar. Buat navigasi utama tetap singkat. Di layar kecil, menu utama terbuka dan bilah sisi berpindah ke bawah konten halaman.
Bilah sisi adalah wilayah tata letak, bukan jenis komponen baru. Skema page dan contact mendeklarasikan area sidebar untuk rich_text, announcement, download_list, dan contact_actions dengan maksimal tiga instans. Render areas.sidebar di dalam elemen aside, bersama navigation.sidebar. Halaman Village life menampilkan widget teks yang dapat diedit. Pengaturan tema menyediakan kartu kontak tambahan. Setiap area kustom harus dideklarasikan secara terpisah pada setiap jenis halaman yang menggunakannya.
{% if navigation.secondary.size > 0 %}
<nav aria-label="{{ 'Useful information' | t }}">
{% for item in navigation.secondary %}
<a href="{{ item.url }}"{% if item.active %} aria-current="page"{% endif %}>{{ item.label }}</a>
{% endfor %}
</nav>
{% endif %}
<aside aria-label="{{ 'More information' | t }}">
{% for item in navigation.sidebar %}
<a href="{{ item.url }}">{{ item.label }}</a>
{% endfor %}
{{ areas.sidebar | raw }}
</aside>
Pratinjau tema umum dan demo khusus WT-003 berbahasa Inggris adalah situs admin-1 yang terpisah. Gambar diimpor oleh aplikasi pusat dan dilindungi di katalog media demo bersama. Tangkapan layar konten uji yang diterbitkan terpisah diambil secara lokal sebelum penerapan dan dikemas bersama tema serta Apex. Prepare memverifikasi hash blueprint dan versi tema sebelum mengikat revisi tangkapan ke demo yang dibuat. Katalog publik menemukan pratinjaunya yang dilindungi melalui App API yang terautentikasi. Tangkapan layar terpisah dari media pelanggan. Tema ini menggunakan pengikatan formulir kontak portabel dari eyivo/contact.
Bentuk dan riwayat pengajuan
Bentuk API 1 menyediakan tujuh prosesor yang disetujui. Tema memiliki tata letak dan gaya; plugin memiliki skema, validasi, dan alur kerja. Host menangani kegigihan, verifikasi, dan pemberitahuan.
| Plugin sistem | Tipe formulir |
|---|---|
eyivo/contact | Kontak contact |
eyivo/quote-request | Permintaan Kutipan quote_request |
eyivo/product-inquiry | Proses penyelidikan product_inquiry |
eyivo/appointment-request | Permintaan pertemuan appointment |
eyivo/course-application | Aplikasi kursus course_application |
eyivo/reservation-request | Permintaan pemesanan reservation |
eyivo/property-inquiry | Penyelidikan properti property_inquiry |
Satu bentuk, placements dapat digunakan kembali
Penyiapan membuat sebuah baku yang ditahan UUID per situs / plugin / type. Mengganti penempatan membuat identitas itu; membuat sebuah bentuk nama memberikan terpisah UUIDTema perubahan dan plugin memasang ulang riwayat. Tema menyatakan alias portabel; pemilihan penyunting menyimpan formulir tanpa meminta pelanggan untuk mengetik UUID.
{
"plugins": ["eyivo/contact", "eyivo/quote-request"],
"forms": {
"contact": {"plugin":"eyivo/contact","type":"contact","schema_version":1,"instance":"default"},
"quote": {"plugin":"eyivo/quote-request","type":"quote_request","schema_version":1,"instance":"default"}
}
}
Gunakan forms.contact dalam template kontak dan component.form dalam bagian lead. Ganti formulir _ preset dengan format _ binding. Render diberikan field dan bimbingan, aksi, CSRF, signed form _ context dan verifikasi _ html. Hanya dideklarasikan presentasi overrides dan bidang tambahan diijinkan diterima; dibutuhkan validasi tidak dapat melemah.
forms.contact · component.form · form_binding · form.fields · form.action · form.csrf_token · form.context · form.verification_html
Dua tampilan inbox, satu rekaman
Inbox situs bersama dan setiap bentuk plugin sendiri daftar / detail halaman menampilkan catatan yang sama. Paket formulir membutuhkan Panel API 2 submisi- daftar / submission- komponen detail dan link menu datar. Panel API 1 tetap didukung. Viewing tidak menandai catatan yang dibaca; baca / archive / workflow menyatakan terpisah dan edits menggunakan record _ revisi. Plugin yang tidak aktif kehilangan menu / halaman, sedangkan inbox yang berbagi mempertahankan snapshot historis.
{"components":[{"type":"submission-list","form_type":"contact","detail_page":"submission"}]}
{"components":[{"type":"submission-detail","form_type":"contact","list_page":"submissions"}]}
Data dan perizinan pelanggan
Catatan formulir tetap dalam basis data konten yang diberikan dan berbagi paket max _ db _ bytes yang ada dengan konten lain. Tidak ada submission terpisah -count atau retention quota ditambahkan. Konfigurasi tetap dalam basis data master dengan batas dari 50 field, 32 KB dan tiga tingkat. Anggota dapat melihat; pemilik / pengelolaan perubahan ijin. Plugin tidak menerima akses basis data langsung, dan PHP/ Blade tidak pernah bergerak ke aplikasi.
Diverifikasi penyimpanan dan pemberitahuan
Host memvalidasi konteks yang ditandatangani, menyatakan jawaban dan dibutuhkan Verifikasi Manusia, kemudian melakukan catatan, penggunaan, dan pemberitahuan bekerja bersama. Percobaan identik dan pembayaran pulih selama 24 jam tanpa menabung dua kali. SMTP pengiriman berjalan sesudahnya dan mungkin mencoba lagi; kegagalan surel tidak membatalkan catatan tersimpan. Penerima formulir yang tidak diatur kembali ke email perusahaan; jika alamat tidak valid, pengajuan disimpan tanpa email.
Semua tema dikirim menggunakan kontrak ini. Kontak legacy POSTs kembali 410; kontekt- halaman GET link masih bekerja. Permintaan pendahuluan dan reservasi tidak mengkonfirmasi booking. Ketiga-partai formulir prosesor, file upload dan aksi eksternal sewenang-wenang tidak termasuk.
POST /__eyivo/forms/{UUID}/submissionsGET /__eyivo/forms/{UUID}/challenge
Field Guide: panduan yang mudah dibaca dan pustaka sumber daya
Field Guide (field-guide) memadukan huruf serif editorial dengan teks isi yang mudah dibaca, latar biru tua, tombol tindakan hijau, dan aksen emas yang bersahaja. Bagian pembuka dan area orientasi opsional berbagi pengantar responsif. Foto latar tetap redup di belakang teks; area orientasi yang kosong membuat pengantar memakai seluruh lebar.
Kepala halaman desktop menampilkan empat tautan halaman tingkat atas pertama dan menempatkan tautan lainnya di bawah Lainnya. Halaman induk tetap memiliki tautannya sendiri dan tombol submenu terpisah. Di layar yang lebih kecil, Menu bawaan yang dapat dibuka menampilkan setiap halaman dan tautan anak. Tombol Escape dan klik di luar menutup menu navigasi. Tautan bahasa hanya muncul jika tersedia lebih dari satu bahasa.
Gunakan area hero dan orientation untuk pengantar dan orientasi cepat, dan area main untuk komponen Eyivo yang ada. Kisi fitur yang mengikuti konten editorial menjadi daftar periksa pendukung di layar lebar dan berada di bawahnya di seluler. Artikel teks kaya memiliki panjang baris yang mudah dibaca, jarak judul yang jelas, dan foto yang berada dalam batas konten dengan kredit yang terlihat. Jika artikel diakhiri dengan satu subjudul yang diikuti daftar periksa atau catatan singkat, skrip tema menampilkan konten tersebut sebagai bilah sisi pendukung di desktop dan di bawah artikel di seluler; konten tetap dapat dibaca tanpa JavaScript. Bagian teks kaya penutup di beranda yang isi berformatnya berupa satu paragraf berisi tautan HTTPS menjadi pita referensi biru tua selebar layar dengan judul emas yang lebih kecil dan tautan hijau muda, termasuk tanpa JavaScript. Koleksi panduan bertautan menggunakan indeks editorial dengan bidang opsional image_url dan alt pada setiap item service_grid, tautan di seluruh entri, dan fokus keyboard. Beranda dibuka dengan dua panduan bergambar, lalu menampilkan panduan unggulan di samping baris sumber daya ringkas pada koleksi berikutnya. Daftar layanan informatif atau campuran menggunakan panel bacaan bernomor; hanya item dengan URL yang diisi yang memiliki tindakan. Gambar mini menggunakan URL media yang diberikan dan tidak pernah mengambil halaman tujuan. Formulir kontak dan kaki halaman menggunakan jarak dan warna yang sama. Demo katalog fiktif Northwater Brief tetap terpisah dari konten contoh migrasi BACC-GA; memperbarui demo katalog tidak mengimpor situs pelanggan.
Automotive Care: halaman bengkel dan media
Automotive Care (automotive-care) memiliki templat Home, Page, Contact, Products, Product, Gallery dan Videos sendiri, selain blog. Area komponen yang ada tetap kompatibel. Desain gelap dan emas memakai judul berukuran wajar, kartu layanan bernomor, label kredensial yang terpisah dari keterangannya, serta jarak jelas antara teks dan tombol. Gambar hero subhalaman berada di belakang lapisan kontras; halaman tanpa gambar memakai pengantar sederhana.
Navigasi desktop menampilkan enam tautan utama dan menempatkan sisanya di Lainnya. Tautan induk dan tombol submenu terpisah memakai gaya sorot dan halaman aktif yang sama. Menu seluler memuat semua halaman dan tautan anak. Escape dan klik di luar menutup menu. Tautan bahasa hanya muncul jika tersedia beberapa bahasa.
Gambar katalog mempertahankan proporsi dalam bingkai terbatas. Templat dasar bersama juga membatasi gambar produk dan menempatkan latar hero subhalaman dengan benar. Galeri menonjolkan foto pertama; klik membuka dialog yang aksesibel, Escape menutupnya dan mengembalikan fokus ke tautan. Tanpa JavaScript, gambar asli dibuka di tab baru. Slider mendukung sentuhan, tombol panah, papan ketik dan pengurangan gerakan; pencarian katalog memfilter secara lokal. Foto detail produk mengisi seluruh lebar bingkai dengan potongan terpusat. Kredensial membentuk pita gelap dengan ikon perisai emas; fitur memakai kolom lapang dengan lencana emas dan ditumpuk pada layar kecil.
Wellness & Beauty: perawatan pribadi dan koleksi layanan
Wellness & Beauty (wellness-beauty) memiliki templat Home, Page, Contact, Products, Product, Gallery dan Videos sendiri, selain blog. Area komponen dan formulir yang ada tetap kompatibel. Latar merah muda, aksen mawar, judul serif yang terukur dan foto melengkung memberi identitas studio yang lembut. Teks dan tindakan memiliki jarak jelas. Detail perawatan menampilkan pengantar lapang, foto terpotong di tengah dan isi yang mudah dibaca. Kartu katalog memisahkan gambar, uraian dan tindakan; galeri menggunakan bingkai album dengan keterangan.
Tautan biasa dan tautan induk memakai gaya sorot serta halaman aktif merah muda yang sama. Submenu memiliki tombol terpisah; tautan tambahan berada di Lainnya dan menu seluler memuat semua halaman dan anak. Escape dan klik di luar menutup menu. Galeri membuka dialog dan mengembalikan fokus saat ditutup; tanpa JavaScript foto dibuka di tab baru. Pencarian memfilter secara lokal. Slider dan tab mendukung papan ketik serta pengurangan gerakan. Warna merek tetap dihormati; tema tidak menambahkan sistem pemesanan.
Veterinary Care: layanan, tim dan kontak yang jelas
Veterinary Care (veterinary-care) memiliki templat Home, Page, Contact, Products, Product, Gallery dan Videos sendiri, selain blog. Area komponen dan formulir terdaftar tetap kompatibel. Panel mint, teks hijau tua, tindakan aprikot dan judul membulat yang terukur menciptakan identitas praktik yang ramah. Kartu tim memisahkan foto, nama, peran dan biografi. Label kontak berada di atas nilainya dengan tautan telepon dan email yang terbaca. Footer menampilkan nama perusahaan, slogan singkat, deskripsi dan kontak.
Tautan biasa dan induk memakai status sorot serta halaman aktif mint yang sama. Induk mempertahankan tombol submenu terpisah; tautan tambahan berada di Lainnya dan menu seluler memuat semua halaman dan anak. Escape dan klik di luar menutup menu. Katalog memiliki tindakan jelas dan pencarian lokal; foto detail mengisi bingkai terbatas dengan potongan terpusat. Galeri menonjolkan satu foto besar dengan tampilan pendukung dan membuka aslinya dalam dialog yang mengembalikan fokus. Tanpa JavaScript, gambar dibuka di tab baru. Slider dan tab mendukung papan ketik serta pengurangan gerakan.
Early Learning: halaman ceria untuk sekolah
Early Learning (early-learning) memiliki templat Beranda, Halaman, Kontak, Produk, Detail Produk, Galeri dan Video sendiri selain blog. Area komponen dan formulir terdaftar tetap kompatibel. Latar krem, aksen koral, mint dan kuning, judul membulat serta bentuk balok cocok untuk pendidikan usia dini. Profil tim dan tiga kartu Tentang memisahkan foto, peran dan deskripsi. Kontak memakai panel berlabel, program memiliki pengantar lapang dan foto terpusat, sedangkan galeri memakai bingkai album dengan keterangan.
Tautan dan induknya berbagi garis tepi saat disorot serta penanda kuning untuk halaman aktif. Submenu memiliki tombol tersendiri; Lainnya menampung tautan desktop tambahan dan Menu seluler asli berisi semua halaman dan anaknya. Foto membuka dialog yang mengembalikan fokus saat ditutup, atau tab baru tanpa JavaScript. Pencarian lokal, tab dan penggeser mendukung papan ketik serta pengurangan gerakan. Demo memakai teks sekolah dan tidak menambahkan sistem pendaftaran.
Tema dari koleksi desain
Setiap tema memiliki kesepuluh templat halaman standar dan menata ketiga puluh komponen bersama Eyivo. Halaman contoh komponen dan permintaan yang disertakan menampilkan bagian di luar beranda. Pengikatan kontak, penawaran harga, permintaan produk, janji temu, pendaftaran kursus, reservasi, dan permintaan properti menggunakan plugin yang ada dan Verifikasi Manusia. Penyaringan katalog, tab yang dapat digunakan dengan keyboard, slider gambar, dan menu navigasi bawaan mendukung kontrak konten yang sama di desktop, seluler, dan tata letak kanan ke kiri.
Seafood Restaurant
Seafood Restaurant (seafood-restaurant) memadukan biru samudra dengan oranye sitrus, halaman putih yang sejuk, dan judul Manrope yang bersahaja. Bagian pembuka bergambar makanan laut mengarah ke pita manfaat yang ringkas, hidangan andalan, kisah di tepi pantai, galeri hidangan berbentuk lingkaran, dan panel biru tua berisi alasan untuk berkunjung. Konten contoh fiktif Tide & Table mencakup permintaan reservasi, sepuluh jenis halaman, ketiga puluh bagian bersama, dan ketujuh pengikatan formulir yang ada. Tautan navigasi, tautan induk, dan Lainnya berbagi status arahkan kursor dan halaman aktif; halaman anak yang dipilih menyorot induknya. Menu seluler menempatkan tautan anak di bawah induknya. Tab, slider, penyaringan hidangan, dan tata letak kanan ke kiri tetap mengikuti kontrak platform. Permintaan reservasi memerlukan konfirmasi; tidak ada sistem pembayaran atau ketersediaan meja langsung yang dimaksudkan.
Family Insurance
Family Insurance (family-insurance) memadukan kepala halaman ungu dan navigasi putih yang menjorok ke dalam dengan foto keluarga, panel informasi lavender yang lembut, dan judul Manrope yang sederhana. Konten contoh Hearthway Insurance bersifat fiktif. Tautan navigasi biasa dan induk berbagi efek arahkan kursor dan status halaman aktif yang sama; halaman anak yang dipilih menyorot induknya. Judul subhalaman yang ringkas, galeri berketerangan, gambar katalog yang dipangkas, dan panel kontak berlabel memperluas desain melampaui beranda.
Barbershop
Barbershop (barbershop) mengikuti kepala halaman hijau tua dua baris dengan tulisan merek serif di tengah, bagian pembuka foto selebar layar yang diberi bayangan dari sisi bacaan, dan halaman krem dengan judul Playfair Display serta tombol warna kuningan. Kartu fitur menggambar ikon garis dan menampilkan setiap nilai ikon sebagai label emas singkat, kredensial berada di pita gelap terbagi, slider gambar menampilkan empat potongan rambut persegi, spesifikasi produk menjadi daftar harga dua kolom, dan penawaran harga menjadi panel roset bergaris putus-putus. Kartu katalog di beranda dan halaman layanan berupa ubin foto gelap. Konten contoh Northline Barber bersifat fiktif.
Recruitment & Staffing
Recruitment & Staffing (recruitment-staffing) menggunakan navigasi putih membulat, bagian pembuka terbagi lavender dengan foto melengkung, tombol tindakan ungu, testimoni hijau mint, dan kaki halaman biru keunguan. Konten contoh fiktif Brightlane Talent mencakup layanan khusus rekrutmen, profil tim, dan teks permintaan. Judul Plus Jakarta Sans tetap sederhana. Navigasi induk dan anak, detail katalog, galeri, artikel, dan semua formulir permintaan terdaftar mengikuti bahasa visual yang sama.
Airline Booking
Airline Booking (airline-booking) menggunakan kepala halaman putih dengan tanda pesawat, bagian pembuka matahari terbenam selebar layar yang membulat dengan teks dan tindakan di dalam bilah pemesanan putih yang mengambang, serta judul Figtree berwarna teal dan tinta. Kartu katalog menjadi ubin destinasi dengan lencana bernomor, gambar dan teks berada di panel hijau mint dengan label teal, statistik menjadi pita teal membulat, kartu fitur menjadi daftar dua kolom dengan tanda panah, dan kaki halaman berupa panel teal membulat dengan tindakan kontak. Konten contoh Skyvane Travel bersifat fiktif.
Architecture Studio
Architecture Studio (architecture-studio) menempatkan kepala halaman transparan dengan navigasi berbentuk pil buram di atas foto hunian selebar layar yang disaput warna pasir dari sisi bacaan, serta menggunakan judul Montserrat yang ringan, tombol pil berwarna espresso dengan cakram panah putih, dan keterangan proyek yang mengambang. Kartu katalog dan layanan berupa ubin pasir lembut dengan sudut gambar asimetris, kisi proyek menjadi pita proyek unggulan yang gelap, gambar dan teks membentang dari tepi ke tepi dengan tepi gambar membulat, statistik berada di kolom bergaris, dan formulir prospek menjadi pita kontak berwarna espresso. Konten contoh Solace Architecture bersifat fiktif.
Automation SaaS
Automation SaaS (automation-saas) memadukan kepala halaman putih dan bagian pembuka Instrument Serif di tengah di atas foto langit hingga perbukitan dengan halaman hijau sage, kartu putih membulat, dan tombol tindakan hijau cerah. Statistik menjadi empat kartu dengan kartu ketiga berwarna hijau hutan, gambar dan teks bergantian antara kartu putih dan kartu limau sesuai varian, bagian video menjadi kartu fitur hijau hutan, kisi proyek menjadi kartu wawasan horizontal dengan label baca selengkapnya, dan FAQ berupa akordeon di tengah. Kaki halaman diakhiri tulisan merek serif besar di atas perbukitan hijau yang digambar. Konten contoh Fernflow bersifat fiktif.
Business Analytics SaaS
Business Analytics SaaS (business-analytics-saas) menggunakan kepala halaman putih, bagian pembuka Outfit di tengah dengan bentuk aksen zamrud, dan foto pembuka di dalam bingkai produk biru tua dengan pola bilah sisi. Statistik berada dalam baris terbagi, ikon fitur bergantian zamrud, biru, dan ungu, gambar dan teks berada di pita hijau mint dengan kartu pertumbuhan yang mengambang, awan logo menjadi ubin integrasi, dan penawaran harga menjadi paket zamrud yang disorot. Testimoni menampilkan bintang dan titik avatar, dan kaki halaman berwarna biru tua. Konten contoh Metrova bersifat fiktif.
Car Dealership
Car Dealership (car-dealership) menggunakan kepala halaman teal tua dua baris dengan baris kontak, bagian pembuka terbagi hijau mint dengan label penilaian pada foto kendaraan, dan kartu pencarian putih yang menumpuk di atas bagian pembuka. Kartu layanan bergambar menjadi enam ubin kategori ringkas, gambar dan teks menjadi pita jual beli teal gelap, kredensial menjadi alasan berikon di tengah; kartu katalog membawa lencana bernomor, testimoni berada di atas teal tua, penawaran harga menjadi panel pembiayaan hijau mint, dan kaki halaman dibuka dengan ajakan bertindak. Konten contoh Corvane Motors bersifat fiktif.
Car Rental
Car Rental (car-rental) adalah tema gelap berupa panel hijau nyaris hitam dengan tepi lembut dan sorotan limau. Pita limau berada di atas tulisan merek di tengah dan navigasi kategori yang lapang; bagian pembuka berupa kartu foto berbingkai dengan judul Archivo besar berhuruf kapital dan tombol pil limau dengan cakram panah. Kredensial menjadi satu pita fitur, kartu katalog menjadi kartu sewa putih dengan pilihan tengah berbingkai limau, kartu fitur menjadi langkah bernomor, dan kaki halaman berupa panel berbingkai dengan tindakan untuk menghubungi. Konten contoh Laneway Rentals bersifat fiktif.
Catering Services
Catering Services (catering-services) menggunakan kepala halaman hijau hutan, halaman krem, dan judul Gilda Display dengan pemisah berbentuk daun. Bagian pembuka menempatkan foto dalam bingkai melengkung dengan tanda putar; kartu layanan bergambar berada dalam baris empat kolom, kartu fitur menjadi pita hijau hutan dengan kartu tengah berwarna zaitun, gambar dan teks memadukan foto bertakik dengan kartu teks berwarna pasir dan keterangan bergaya tanda tangan, kredensial menjadi daftar menu yang dirancang cermat, slider gambar menampilkan hidangan bulat di atas hijau, dan FAQ berada di dalam kartu hijau sage. Konten contoh Sage & Table Catering bersifat fiktif.
Coaching & Consulting
Coaching & Consulting (coaching-consulting) memadukan kepala halaman dan bagian pembuka biru tua dengan gradasi oranye ke merah muda hingga ungu yang mengalir melalui judul, tombol, dan ubin potret dengan label nama putih. Awan logo melanjutkan bagian pembuka biru tua sebagai pita klien, kartu fitur membawa garis bawah bergradasi, statistik menjadi panel komunitas terbagi antara gradasi dan biru tua, kartu layanan mendapat lencana bergaris tepi berwarna dan tombol panah, kisi proyek menampilkan kartu langkah berbingkai, penawaran harga menjadi paket unggulan yang gelap, dan gambar serta teks berada di panel ungu muda. Konten contoh Northbeam Coaching bersifat fiktif.
Construction Company
Construction Company (construction-company) menggunakan bilah kepala halaman teal gelap yang mengambang dengan tombol tindakan limau di atas halaman putih, serta bagian pembuka yang fotonya meluber ke tepi dengan potongan miring dan stempel lingkaran bergaris putus-putus. Statistik berada di bilah gelap yang menumpuk di atas bagian pembuka, kartu layanan ketiga menjadi gelap, gambar dan teks berada di panel hijau sage dengan foto berbentuk jajaran genjang, kisi tim menampilkan empat potret kru, kredensial menjadi panel proses gelap bernomor, dan kaki halaman berupa panel teal membulat dengan detail kontak langsung. Konten contoh Ironleaf Builders bersifat fiktif.
Cookie Bakery
Cookie Bakery (cookie-bakery) menggunakan halaman krem, bagian pembuka cokelat membulat dengan huruf Lilita One yang tebal dan berubah dari putih ke kuning mustard, foto produk berbentuk lingkaran, dan titik-titik meses. Kartu fitur bergantian persik, merah muda, biru langit, dan kuning mentega, penawaran harga menjadi panel diskon persik, spesifikasi produk menjadi daftar menu spesial hari ini yang gelap, kartu layanan bergambar menjadi pilihan produk bulat; gambar dan teks menggunakan foto berbingkai organik dengan stempel koral, kredensial menjadi pita layanan gelap, dan kaki halaman memiliki tepi cokelat bergelombang. Konten contoh Crumb & Co. Bakery bersifat fiktif.
Coworking Space
Coworking Space (coworking-space) memadukan halaman putih gading yang hangat dengan panel hijau tua, sorotan persik, dan judul serif Gloock; judul pembuka berganti dari hijau ke persik antarbaris dan foto ruang kerja berada di bingkai besar membulat dengan kartu keterangan hijau. Kredensial menjadi pita fitur yang ringkas, kartu fitur menjadi daftar berikon, kartu katalog berbagi pita berwarna pasir dengan kartu tengah berwarna hijau, statistik mengalir sebagai pita hijau, gambar galeri membawa keterangan gelap, testimoni menampilkan ubin potret, dan formulir prospek menjadi kartu formulir hijau dengan tombol kirim persik. Konten contoh Greenhall Workspace bersifat fiktif.
Creative Studio Coffee
Creative Studio Coffee (creative-studio-coffee) menempatkan kepala halaman transparan dan judul Bodoni Moda berhuruf kapital yang berubah dari putih ke kuningan di atas foto espresso selebar layar, lalu beralih ke halaman krem kopi susu. Kredensial menjadi pita nilai lima bagian, kisi proyek menjadi enam ubin potret gelap dengan cincin panah, gambar dan teks membentang dari tepi ke tepi dengan keterangan berbentuk stempel lingkaran, formulir prospek menjadi pita keanggotaan berwarna sangrai gelap, dan kaki halaman berupa tata letak kolom bergaris yang terang. Konten contoh Crema Digital bersifat fiktif.
Duck Farm
Duck Farm (duck-farm) mempertahankan halaman putih dan hijau pucat dengan panel hijau peternakan yang pekat dan sorotan kuning cerah. Foto pembuka meluber ke tepi dan memudar ke teks, yang baris terakhirnya berubah hijau, dengan keterangan tulisan tangan. Kartu katalog menampilkan empat produk, gambar dan teks menjadi panel hijau tua dengan foto berbentuk organik dan lencana alami bergaris putus-putus, kartu fitur menjadi ikon kepercayaan yang terbagi, statistik menjadi panel peternakan yang gelap, kredensial menjadi proses bernomor dari peternakan ke meja makan, dan testimoni berada di atas krem. Konten contoh Brookmead Farm bersifat fiktif.
Electrical Services
Electrical Services (electrical-services) memadukan kepala halaman putih dengan tautan telepon dan tombol penawaran hijau dengan bagian pembuka dan kartu layanan berwarna arang. Foto pembuka memudar ke warna arang dan dua baris terakhir judul berubah menjadi hijau listrik. Statistik berada di kartu putih yang menumpuk di atas bagian pembuka, gambar dan teks memotong foto menjadi segi enam dengan lencana keselamatan bulat, kartu layanan menjadi arang dengan lingkaran ikon hijau, kredensial menjadi alasan memilih perusahaan yang ditandai petir, dan ajakan bertindak menjadi panel darurat hijau. Konten contoh Brightwire Electric bersifat fiktif.
Fashion Store Lavender
Fashion Store Lavender (fashion-store-lavender) memadukan kepala halaman dan bagian pembuka terbagi berwarna arang dengan foto ungu muda melengkung, judul Cormorant Garamond, dan halaman gading yang hangat. Pita manfaat lavender mengarah ke koleksi editorial bergambar, kartu produk baru yang bersahaja, dan panel kampanye busana yang gelap. Tema ini memiliki kesepuluh templat halaman, menata ketiga puluh bagian bersama, dan mendukung tujuh formulir permintaan yang ada. Tautan navigasi, induk, dan Lainnya berbagi status arahkan kursor dan terpilih berwarna lavender, termasuk saat halaman anak dipilih. Lainnya dan menu seluler menggunakan baris selebar layar dengan tautan bersarang di bawah induknya. Pencarian katalog, navigasi bersarang bawaan, tab yang dapat digunakan dengan keyboard, dan slider gambar tetap mengikuti kontrak platform. Konten contoh Violette Edit bersifat fiktif; koleksi menggunakan tautan permintaan, bukan keranjang belanja atau checkout.
9. / Apa yang terjadi dari aktivasi template sampai penerbitan?
- Pasang / aktifkan templat. Eyivo memvalidasi paket, merekam kunci / versi dan mengekspos pengaturan dan komponen skema di App.
- Pilih tipe halaman. Eyivo menggunakan tema aktif pencocokan berkas Cair dan definisi daerah ketika ada, jika tidak cocok
theme-coremundur. - Tambahkan bagian yang diijinkan. App hanya menawarkan jenis terdaftar dalam
allowed_componentsIni menyimpan teks, referensi media dan terjemahan terhadap komponen terpilih. - Render aman. Eyivo menyelesaikan perusahaan / halaman /SEO/ data navigasi, merender disimpan komponen daerah, merender komponen langsung di mana desainer ditempatkan mereka, kemudian render aktif tipe halaman dan tata letak.
- Terbitkan. Pengunjung menerima Anda HTML dan CSS, tapi tidak ada kredensial database, model internal atau kode aplikasi.
Validasi dan kesalahan umum
| Jika kau lihat... | Periksa ini dulu |
|---|---|
| "Tidak didukung Eyivo Tema API versi " | Set "eyivo_theme_api": "1.0". |
| Hilang galat tipe halaman / tata letak / komponen | Setiap tipe halaman atau komponen dideklarasikan oleh tema membutuhkan pencocokan .liquid berkas. Tema aktif harus selalu menyediakan layouts/default.liquid; awet built-in tipe halaman jatuh kembali ke dalam inti. |
| Komponen tidak tersedia di penyunting | Tipe namespace nya harus di daerah itu allowed_components daftar, atau definisi harus universal. |
| Komponen langsung tidak diketahui | Gunakan kutipan eyivo: tipe dari katalog terbagi atau mendeklarasikan kecocokan theme: definisi dan berkas Cair dalam tema aktif. |
| Ruas ditolak | Masukkan dalam skema komponen dan gunakan satu tipe ruas yang didukung. Gunakan translatable: true untuk teks lokal-spesifik. |
| Template muncul unstyled | Gunakan asset_url filter untuk CSS dan mengkonfirmasi berkas berada di bawah assets/. |
| Paket ditolak untuk sintaks yang tidak aman | Hapus PHP/ Blade, env, config, DB /HTTP panggilan dan sistem berkas akses. Liquid adalah presentation-saja. |
11. FAQ
Bisakah pelanggan membuat tata letak baru atau memindahkan pahlawan di bawah kaki?
No Mereka dapat mengubah konten yang disetujui dan memesan komponen yang disetujui dalam area.
Dapatkah seorang desainer menggunakan komponen tanpa area yang dapat disunting?
Ya, gunakan. eyivo_component dalam tata letak atau tipe halaman. Gunakan area ketika pemilik situs harus mengontrol instansi komponen dan perintah.
Harus tema mengimplementasi setiap tipe halaman?
Dukungan blog diperlukan untuk setiap tema. Jenis built-dalam blog, blog_category, dan blog_post dapat menggunakan definisi yang cocok dan berkas Cair dari theme-core, di dalam tata letak tema aktif. Nyatakan sebuah tipe hanya ketika memberikan berkas penimpa yang cocok. Paket tema yang ada tetap kompatibel. Penggunaan rute Blog /blog, /blog/category/{slug}, dan /blog/{slug}, dengan awalan lokal Eyivo dimana dibutuhkan. Simpan eyivo_head untuk metadata aman, gaya blog responsif, dan kartu gambar berbatasan.
Dapatkah query tema halaman, panggil API atau membaca variabel lingkungan?
Tidak Data sengaja dilewatkan sebagai objek yang aman.
Bagaimana cara merilis pembaruan?
Publikasikan versi tema semantik baru. Jangan diam-diam bermutasi rilis yang diterbitkan; situs harus pindah ke versi baru secara eksplisit.
Dimana seharusnya gambar hidup?
Gunakan media Eyivo URL dalam data komponen, atau sebuah aset paket direferensikan melalui asset_url. Jangan gunakan jalur sistem berkas server secara acak.