أنشئ قالبًا متكاملًا لموقع شركة بأمان.

1. النموذج الذهني

هناك ثلاث مسؤوليات منفصلة. وفهم هذا الفصل هو أساس فهم الإصدار الأول.

ليس منشئ صفحات: يستطيع المالك إضافة قسم مسموح به إلى main واختيار موضعه الرقمي، لكنه لا يستطيع إنشاء منطقة جديدة أو نقل قسم المقدمة إلى التذييل أو تعديل HTML أو تغيير CSS الخاص بك.

2. البدء السريع: قالب بسيط وقابل للاستخدام

يملك كل قالب في الإصدار الأول تخطيطه وتنسيقاته ونصوصه البرمجية كاملة، ويمكن لمؤلفه ترتيبها وفق أي تصميم يختاره. ولا يرث القالب تخطيطًا أو أصلًا من قالب آخر. تأتي مكوّنات eyivo: المشتركة وأنواع الصفحات الاحتياطية السبعة من theme-core؛ ولا يخزّن القالب إلا أنواع الصفحات التي يستبدلها والمكوّنات التي يعرّفها ضمن مساحة الأسماء theme:.

يحتاج كل قالب في الإصدار الأول إلى ملف تخطيط افتراضي. ويكون كل من page-types/ وcomponents/ اختياريًا إذا استخدمت الحزمة بدائل النواة فقط:

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 دائمًا من القالب النشط، وهو المسؤول عن مستند الموقع العام كاملًا. يبحث Eyivo أولًا عن نوع الصفحة المطلوب في ذلك القالب، ثم يعود إلى theme-core/page-types. ولا توفّر النواة تخطيطًا أو أصولًا، لذلك يظل محتوى الصفحة الاحتياطية ضمن تخطيط القالب النشط وتنسيقه.

3. صِف القالب في theme.json

ملف التعريف إعلان عن القدرات وعقد تُنشأ منه نماذج التطبيق. وهو يجيب عن ثلاثة أسئلة: ما بُنى الصفحات المتاحة، وما المناطق الموجودة في كل بنية، وما الذي يُسمح للمكوّن بتخزينه. تعلن السمات المدمجة صراحة عن أنواع الصفحات القياسية العشرة وتتضمن ملفات Liquid المقابلة لها. ويمكن للسمات المخصصة الاستمرار في استخدام قوالب النواة الاحتياطية لأنواع الصفحات غير المعلنة.

{
  "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 }
      }
    }
  }
}

العودة إلى نوع الصفحة الاحتياطي: الأنواع المضمّنة هي home وpage وgallery وcontact وproducts وproduct وvideos. احذف أيًا منها لاستخدام تعريفه وملف Liquid الخاص به من theme-core. ولا تعلن نوعًا إلا إذا وفّر القالب ملف الاستبدال المطابق له في page-types/<type>.liquid.

يتلقى المحرر واجهة أنواع الصفحات المدمجة: تحل تعريفات القالب النشط محل تعريفات النواة المطابقة، بينما تبقى جميع الأنواع المحذوفة متاحة من النواة.

4. محتوى تجريبي كامل في demo.json

يجب أن تتضمن كل حزمة مرفوعة ملف demo.json قابلًا للنقل لمحتوى مسودة فقط، ولقطة شاشة واحدة على الأقل مأخوذة بعد تحميله. تستخدم القوالب المدمجة المخطط نفسه. لا تُدرج معرّفات قاعدة البيانات أو نطاقات العملاء أو بيانات الدخول أو بيانات اعتماد التخزين.

{
  "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": []
}

الصفحات والمكوّنات

{
  "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" }
    }
  }]
}

يجب إعلان أنواع المكوّنات والمناطق في ملف تعريف القالب النشط أو theme-core. استخدم مسارات نسبية مثل /contact للروابط داخل الموقع نفسه. تستخدم عروض الصفحة الرئيسية المضمّنة صورة المقدّمة الحالية كخلفية بعرض كامل مع طبقة تضمن وضوح النص وتنسيق متجاوب: immersive في معظم القوالب وcentered مع صورة في Compact. تحتفظ أنماط المقدّمة الأخرى بتخطيطاتها.

لغات العرض التجريبي واللغة البديلة

الإنجليزية هي اللغة الأساسية المطلوبة: اضبط default_locale على en. غياب الحقل في الملفات القديمة يعني الإنجليزية أيضًا. اللغات الأخرى المدعومة اختيارية؛ لا تعرض نسخ النص الإنجليزي بوصفها ترجمات.

وفّر translations.en وكائنات اختيارية للغات الأخرى لبيانات الشركة وإعدادات القالب والصفحات والمكونات والمنتجات والمعارض وتعليقات الصور ونصوصها البديلة والفيديوهات والمقالات. تبقى الحقول الإنجليزية القديمة دون مفتاح لغة مدعومة. عند الإنشاء تُختار لغة الموقع الأساسية ويُستخدم الحقل الإنجليزي لكل حقل مفقود. تستبدل المصفوفة المترجمة المصفوفة الإنجليزية بالكامل، وتُحفظ القيم الفارغة الصريحة. تُستورد اللغة المختارة فقط دون تفعيل لغات أخرى تلقائيًا.

استخدم معرّفات المسارات الإنجليزية المصدرية في الروابط الداخلية وعناصر القوائم القابلة للنقل. يحولها الاستيراد إلى المسار المترجم، بما في ذلك روابط النص المنسق والمقالات. يمكن للقوائم توفير خرائط slugs وlabels صريحة. تستخدم التسميات المفقودة الإنجليزية. لا تتغير الروابط الخارجية.

{
  "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" }
    }]
  }
}

سلامة الاستيراد والوسائط

تتضمن المواقع الجديدة من لوحة التحكم بيانات تجريبية افتراضيًا وتنشر اللغة المختارة فورًا؛ ويمكن للمالك إلغاء الخيار. تحميل العرض من إعدادات الهوية لموقع موجود يظل ينشئ مسودات ويحفظ المحتوى المنشور. ينسخ التطبيق المركزي الصور إلى مكتبة الموقع الجديد ويرسل مراجعها عبر الواجهة الداخلية. لا تتلقى خوادم master والقوالب بيانات اعتماد تخزين الكائنات. تستخدم القوالب قيمة media.public_url المقدمة.

أعلن لقطات الشاشة في theme.json.preview باستخدام data_source: "demo_data". ويجب أن تحتوي الحزمة على كل صورة preview مُعلنة.

5. اكتب التخطيط الذي يحتاجه قالبك

يتحكم التخطيط الافتراضي في مستند HTML كاملًا. ولا يزوّد أي شيء خارج القالب النشط ترويسته أو تذييله أو ملف أنماطه أو JavaScript أو بنيته المرئية.

<!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>

يحدد ملف نوع الصفحة المواضع الدقيقة لمناطقها الديناميكية. مكوّنات المنطقة هي سلاسل HTML معروضة مسبقًا، لذا أدرجها باستخدام | raw. وتُهرَّب القيم العادية افتراضيًا.

<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>

عرض مكوّن مباشرة

يمكن للمصمم وضع مكوّن مسجّل مباشرة في التخطيط أو ملف نوع الصفحة. يثبّت القالب هذا الموضع، فلا يمكن إعادة ترتيبه أو إزالته من اللوحة. مرّر كائنًا عبر data: أو حقول المخطط منفردة أو كليهما؛ وتتقدم الحقول المسماة على المفاتيح المطابقة في 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"
%}

يجب أن يكون النوع نصًا صريحًا داخل علامات اقتباس مع مساحة اسم. يستخدم العرض المباشر المخطط والمتغيرات وملف المكوّن وكائن component الموحّد نفسها المستخدمة لمكوّن داخل منطقة. ولا يمكن لملفات المكوّنات عرض مكوّنات أخرى.

الأصول: استخدم دائمًا {{ 'css/theme.css' | asset_url }}. يقدمه Eyivo من الحزمة النشطة في /theme-assets/<theme>/css/theme.css؛ ولا تثبّت اسم قالب آخر أو مسارًا في نظام الملفات.

رأس المستند والمسارات وقواميس الواجهة

يجب أن يعرض كل تخطيط {% eyivo_head %} مرة واحدة بالضبط. يتولى Eyivo حينها إخراج العنوان والوصف وrobots وcanonical وhreflang وOpen Graph والبيانات المنظمة. استخدم routes.home وroutes.contact وroutes.catalog وroutes.gallery وroutes.videos بدل تثبيت المسارات العامة في الشفرة. مرّر إعدادات الروابط القابلة للتعديل عبر | localized_url لتكتسب المسارات الداخلية المعروفة بادئة اللغة النشطة مع إبقاء الروابط الخارجية كما هي.

{{ 'Menu' | t }}
{{ theme.settings.header_cta_url | localized_url }}

أنشئ ملفات locales/<locale>.json اختيارية لتسميات الواجهة التي يضيفها القالب. ترتيب البحث هو: إنجليزية النواة، ثم لغة النواة، ثم إنجليزية القالب، ثم لغة القالب. لذلك تعمل التسميات المشتركة من theme-core دون نسخ ملفات. ضع النصوص التجارية في المحتوى القابل للترجمة أو حقول المكوّنات أو إعدادات القالب، لا في القواميس.

ملف مكوّن مخصص

<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>

يختار Eyivo لغة الزائر للحقول القابلة للترجمة قبل العرض. لذلك يرى الزائر التركي والزائر الإنجليزي بنية المكوّن نفسها، لكن بقيم مختلفة في component.data.heading.

القوائم المسجلة

يمكن للقوالب تسجيل قوائم إضافية مسطحة في theme.json. تبقى Main محجوزة: تحتفظ navigation.main بخيار ظهور الصفحات وروابط القوائم التلقائية. تحتاج كل قائمة إلى مفتاح ثابت وعنوان ووصف وموضع عرض فعلي.

روابط الصفحات المتداخلة في التنقل الرئيسي

يتضمن كل عنصر في navigation.main مصفوفة children. عندما يكون للصفحة صفحة رئيسية، تظهر في قائمة children الخاصة بتلك الصفحة. تضيف المنصة قائمة منسدلة سهلة الوصول إلى الروابط المطابقة في رأس الموقع، ويمكن للقوالب أيضًا عرض مصفوفة children مباشرة:

{% for item in navigation.main %}
  <div class="nav-item">
    <a href="{{ item.url }}">{{ item.label }}</a>
    {% if item.children.size > 0 %}
      <div class="submenu">
        {% for child in item.children %}
          <a href="{{ child.url }}">{{ child.label }}</a>
        {% endfor %}
      </div>
    {% endif %}
  </div>
{% endfor %}

تحتفظ الصفحات الفرعية بعناوين URL الخاصة بها وبحالة النشر. لا يتضمن التنقل الرئيسي إلا الصفحات المنشورة والظاهرة التي لها ترجمة منشورة للغة النشطة. علاقات الصفحة الرئيسية من مستوى واحد: اختر صفحة من المستوى الأعلى ليست الصفحة الرئيسية. تبقى القوائم المسجلة مثل navigation.footer مسطّحة.

{
  "menus": {
    "footer": {
      "label": "Footer links",
      "description": "Links at the bottom of every page.",
      "initialize_from_main": true,
      "translations": {
        "tr": { "label": "Alt bilgi bağlantıları", "description": "Sayfanın altındaki bağlantılar." }
      }
    },
    "useful_links": {
      "label": "Useful links",
      "description": "A separate group of helpful destinations."
    }
  }
}

اعرض navigation.footer أو مفتاحاً مسجلاً آخر باستخدام item.label وitem.url وitem.active وitem.kind. احترم العنوان المقدم واهرب المخرجات وضع اسماً واضحاً للتنقل. لا تستخدم القوائم الإضافية الفارغة Main كبديل.

{% if navigation.footer.size > 0 %}
<nav aria-label="{{ 'Footer navigation' | t }}">
  {% for item in navigation.footer %}
    <a href="{{ item.url }}"{% if item.active %} aria-current="page"{% endif %}>{{ item.label }}</a>
  {% endfor %}
</nav>
{% endif %}
{% if navigation.useful_links.size > 0 %}
<nav aria-label="{{ 'Useful links' | t }}">
  {% for item in navigation.useful_links %}
    <a href="{{ item.url }}">{{ item.label }}</a>
  {% endfor %}
</nav>
{% endif %}

يمكن إسناد الصفحات والمقالات والمنتجات والمعارض والفيديوهات إلى عدة قوائم إضافية. تدعم شاشة القوائم أيضاً صفحات القوائم والروابط المخصصة والترتيب المستقل والعناوين المترجمة. البنية مشتركة بين اللغات وتُخفى الترجمات غير المنشورة.

يحفظ المحتوى اختيارات القوائم كمسودة ويطبق نشره اختياراته فقط. تُحفظ مسودات القوائم وتُنشر بصورة مستقلة. نشر القائمة لا ينشر المحتوى المرتبط بها. تبقى الاختيارات غير المدعومة محفوظة عند تغيير القالب.

ينسخ الخيار initialize_from_main الروابط مرة واحدة دون مزامنة لاحقة. تبقى القوالب القديمة دون تعريفات قوائم مدعومة. تستخدم بيانات العرض نوع المحتوى واسم مساره الأصلي أو مفاتيح القوائم أو روابط مخصصة، وليس معرفات سجلات خاصة بموقع.

{
  "menus": {
    "footer": [
      { "type": "page", "slug": "about", "labels": {} },
      { "type": "listing", "listing": "catalog", "labels": {} }
    ],
    "useful_links": [
      { "type": "custom", "url": "https://example.com/help", "labels": { "en": "Help" } }
    ]
  }
}

تبقى حقول النص المنسق وpage.body مهربة في Liquid؛ تعالج المنصة علامات المحرر ومراجع الصفحات بأمان. يستخدم raw فقط مع HTML موثوق ومعالج مسبقاً مثل blog.post.body_html. تتبع المراجع تغييرات المسار وتصبح غير متاحة عندما لا تكون ترجمة الهدف منشورة.

6. بيانات Liquid الآمنة المتاحة لك

يتلقى Liquid بيانات بسيطة وموحّدة، لا نماذج Laravel أو قاعدة البيانات. إذا لم تظهر قيمة في هذا الجدول، فاعتبرها غير متاحة في v1.

مثال لتخطيط يحترم لغة الزائر

<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 %}

يعرض كل عنصر لغة متاحة أيضًا label وdirection وis_default وcurrent وhas_translation. يزوّد Eyivo الترجمات المنشورة المكافئة فقط، لذا يجب على القوالب استخدام language.url بدل إنشاء /en أو أي بادئة أخرى.

مثال على قيمة تنسيق تستند إلى إعداد: style="--brand: {{ theme.settings.primary_color }}". يجب أولًا تعريف الإعداد في theme.json.

7. المكوّنات المباشرة والديناميكية

للمكوّنات عقد عرض واحد وطريقتان لوضعها. يتحكم المصمم في المكوّن المباشر داخل التخطيط أو نوع الصفحة. ويُخزَّن المكوّن الديناميكي كنسخة داخل منطقة صفحة ويتحكم به المستخدم عبر المحرر. لكل نسخة ديناميكية معرّف ثابت ونوع ذو مساحة اسم ومنطقة وموضع ومتغير اختياري وبيانات وترجمات. الموضع يحدد الترتيب فقط، لا الهوية.

مكوّن عام: ضع "universal": true في تعريف المكوّن للسماح به في جميع مناطق أنواع الصفحات المتوافقة. ويجب أن يبقى له مخطط صالح وملف Liquid.

تتكيف روابط الإجراءات المشتركة مع لغة المسارات الداخلية المعروفة مع الحفاظ على معلمات الاستعلام وأجزاء الروابط. يحتفظ النص المنسق بالتنسيق الآمن داخل حاويات المحرر المتداخلة. تُحذف صور المعرض الفارغة، ولا تكون صور الخرائط التي ليس لها وجهة روابط، وتستخدم تسميات الشرائح والبحث لغة واجهة الزائر.

يبقي Visual Atelier (visual-01) شريط النص المتحرك الزخرفي في صفحته الرئيسية متحركًا تلقائيًا، حتى عندما يطلب المتصفح تقليل الحركة. يؤدي المرور فوق النص إلى إيقافه مؤقتًا، ويستأنف عند الابتعاد عنه. يُحافَظ على المظهر الأصلي والحلقة المعتمدة على CSS وحدها.

8. دليل المكوّنات المتاحة

تشكّل مكوّنات eyivo: المشتركة وعددها 30 مكتبة الإصدار الأول الكاملة، وتُحمّل من theme-core. ويمكن للقالب أيضًا تعريف مكوّنات theme: الخاصة به وتنفيذها.

Foundation Impact: بناء موقع مؤسسة

يعرض Foundation Impact (foundation-impact) هدف المؤسسة وبرامجها وحوكمتها وأثرها وفعالياتها ومعرضها واستفساراتها. يلفّ تخطيطه تسميات التنقل الطويلة وينتقل إلى قائمة قابلة للتوسيع على الشاشات الأصغر. تتحكم القوائم المسجلة header وfooter وuseful_links في التنقل. عندما تكون القائمة المسجلة فارغة، يعود رأس الصفحة إلى التنقل التلقائي بين الصفحات. تستخدم صفحة الصور المختارة /in-pictures، بينما يبقى /gallery قائمة الألبومات الأصلية.

يمتلك Foundation Impact القوالب العشرة المدمجة: الرئيسية والصفحة والتواصل والمنتجات والمنتج والمعرض والفيديو والمدونة والتصنيف والمقال. تظل مناطق المحتوى والنماذج المسجلة متوافقة. تستخدم عناصر التنقل الرئيسية الحالات الشفافة والمسطرة نفسها للروابط العادية عند التمرير والتحديد؛ ويؤدي تحديد صفحة فرعية إلى تمييز عنصرها الرئيسي أيضا. تتبع القوائم الفرعية النمط نفسه على الحاسوب والهاتف.

تستخدم مقدمات الصفحات الفرعية دون صورة شريطا بنفسجيا فاتحا ومختصرا، مع مسار تنقل متقارب وتسمية صغيرة وعنوان معتدل. وعند وجود صورة تضاف طبقة داكنة مع عنوان ومسار تنقل وملخص باللون الأبيض. يبقى النص فوق الصورة والطبقة الداكنة، ويتوافق اتجاه التدرج مع التخطيطات من اليمين إلى اليسار.

يقبل المكون المشترك eyivo:rich_text المحتوى الذي يحمل علامة المحرر ومحتوى HTML القديم. يمر كلاهما بقائمة التنسيق المسموح: تظهر الفقرات والعناوين والقوائم والروابط الآمنة كمحتوى، وتزال النصوص البرمجية ومعالجات الأحداث والروابط غير الآمنة. تحتفظ حقول النص الأخرى بقواعد الهروب المعتادة. وتستخدم نصوص عرض Foundation علامة المحرر أيضا.

يركّب القالب المكوّنات الحالية eyivo:hero وproject_grid وimage_text وevent_list وmedia_gallery وfeature_grid وteam_grid وstats وrich_text وfaq وcta وlead_form. يفعّل سكربت القالب المؤجَّل أدوات التحكم في متصفح الصور وعلامات التبويب القابلة للاستخدام بلوحة المفاتيح وتصفية الكتالوج. تتوسع قائمة الجوال بعناصر تحكم HTML أصلية. تستخدم الأرقام عناوين وتسميات وملاحظات داكنة على سطح أصفر فاتح مع قيم زرقاء. ترتبط بطاقات البرامج بصفحات محتوى عادية. تصف بطاقات الفعاليات الفعاليات وترتبط بصفحة استفسار، ولا تنشئ حجوزات أو سجلات حضور.

تستخدم صفحة التواصل eyivo:lead_form مع ربط التواصل القابل للنقل الذي توفره eyivo/contact. يؤدي استيراد عرض تجريبي إلى حل هذا الربط بشكل منفصل لكل موقع. لا تشمل التبرعات أو طلبات المنح أو موافقات المتطوعين.

تعيد عمليات استيراد العروض التجريبية المدمجة استخدام الإدخالات النشطة في كتالوج وسائط العروض التجريبية المشترك للقوالب. يملك التطبيق المركزي الكائن ويقدم مراجع إلى خوادم master، ولا يؤدي حذف مرجع مستورد إلى حذف الكائن المشترك المحمي. معاينة القالب ومثال SEO المخصص موقعان منفصلان.

Village Commons: التنقل الثانوي والأشرطة الجانبية

يجمع Village Commons (village-commons) بين لوحة إعلانات وأماكن محلية وتاريخ القرية والفعاليات والصور ومعلومات الزوار ونموذج تواصل خاص بالموقع. للأسطح بالأخضر الغابي والعاجي والكهرماني ألوان أمامية محددة صراحة. توفر مكوّنات Eyivo الحالية المحتوى؛ لا تقدم بطاقات الفعاليات حجوزات، ولا تشكل صفحات محاضر الاجتماعات نظام سجلات رسميًا. تحافظ أقسام الصورة والنص في صفحات المعلومات على حشوة داخلية متجاوبة حول النص. للوحات الفعاليات والأسئلة الشائعة في الصفحات الفرعية حشوة داخلية متجاوبة. تستخدم الأسئلة الشائعة عنوانًا مدمجًا وعناصر قابلة للتوسيع مستديرة ومكدّسة مع أدوات توسيع واضحة.

سجّل header وsecondary وsidebar وfooter وuseful_links في theme.json. يظهر التنقل الثانوي في شريط الأدوات، وتظهر قائمة الشريط الجانبي بجانب الصفحات العادية وصفحات التواصل. يُحرَّر كلاهما ويُنشر عبر محرر القوائم القياسي. اجعل التنقل الرئيسي قصيرًا. على الشاشات الصغيرة تتوسع القائمة الرئيسية وينتقل الشريط الجانبي أسفل محتوى الصفحة.

الشريط الجانبي منطقة في التخطيط وليس نوع مكوّن جديدًا. يعلن مخططا page وcontact منطقة sidebar للمكوّنات rich_text وannouncement وdownload_list وcontact_actions بحد أقصى ثلاث نسخ. اعرض areas.sidebar داخل عنصر aside بجانب navigation.sidebar. تعرض صفحة Village life عنصر نص قابلًا للتحرير. توفر إعدادات القالب بطاقة التواصل الإضافية. يجب إعلان كل منطقة مخصصة بشكل منفصل في كل نوع صفحة يستخدمها.

{% 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>

معاينة القالب العامة والعرض التجريبي المخصص WT-003 باللغة الإنجليزية موقعان منفصلان تابعان لـ admin-1. يستورد التطبيق المركزي الصور ويحميها في كتالوج وسائط العروض التجريبية المشترك. تُلتقط صور الشاشة لمحتويات الاختبار المنشورة بشكل منفصل محليًا قبل النشر، وتُضمَّن في القالب وفي Apex. يتحقق Prepare من بصمة المخطط وإصدار القالب قبل ربط مراجعة الالتقاط بالعرض التجريبي المُنشأ. يكتشف الكتالوج العام معاينته المحمية عبر App API الموثقة. صور الشاشة منفصلة عن وسائط العملاء. يستخدم القالب ربط نموذج التواصل القابل للنقل من eyivo/contact.

النماذج وسجل الطلبات

توفر Forms API 1 سبعة معالجات معتمدة. تتحكم القوالب في التصميم، والإضافات في المخطط والتحقق وسير العمل. تتولى المنصة الحفظ والتحقق البشري والإشعارات.

نموذج واحد في مواضع متعددة

ينشئ الإعداد UUID افتراضيًا ثابتًا لكل موقع وإضافة ونوع. إعادة استخدام الموضع تحفظ الهوية، وإنشاء نموذج مسمّى يمنحه UUID آخر. تغيير القالب وإعادة التثبيت يحفظان السجل. تستخدم القوالب أسماء ربط قابلة للنقل ويختار العميل نموذجًا محفوظًا دون إدخال 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"}
  }
}

استخدم forms.contact في التواصل وcomponent.form في أقسام النماذج. استبدل form_preset بـ form_binding. اعرض الحقول والإرشادات وaction وCSRF وform_context الموقّع وverification_html المقدّمة. تُقبل تغييرات العرض المعلنة والحقول الإضافية المسموحة فقط؛ لا يجوز إضعاف التحقق الإلزامي.

forms.contact · component.form · form_binding · form.fields · form.action · form.csrf_token · form.context · form.verification_html

عرضان لسجل واحد

يعرض الصندوق المشترك وصفحات قائمة وتفاصيل الإضافة السجلات نفسها. تتطلب حزم النماذج Panel API 2 ومكوّني submission-list وsubmission-detail ورابط قائمة بمستوى واحد. يبقى Panel API 1 مدعومًا. العرض لا يضع علامة مقروء؛ حالات القراءة والأرشفة والعمل منفصلة والتعديل يستخدم record_revision. تعطيل الإضافة يخفي صفحاتها؛ يبقى التاريخ في الصندوق المشترك.

{"components":[{"type":"submission-list","form_type":"contact","detail_page":"submission"}]}
{"components":[{"type":"submission-detail","form_type":"contact","list_page":"submissions"}]}

البيانات والأذونات

تُحفظ السجلات في قاعدة محتوى الموقع وتشارك حد الحزمة max_db_bytes مع المحتوى الآخر. لا توجد حصة إضافية للعدد أو مدة الاحتفاظ. تبقى الإعدادات في قاعدة master بحدود 50 حقلًا و32 كيلوبايت وثلاثة مستويات. الأعضاء يشاهدون والتعديل يتطلب صلاحية المالك أو الإدارة. لا وصول مباشر للإضافات إلى القاعدة ولا نقل PHP أو Blade إلى التطبيق.

حفظ موثّق وإشعارات

تتحقق المنصة من السياق والإجابات والتحقق البشري ثم تحفظ السجل والاستخدام ومهمة الإشعار معًا. يمكن استعادة المحاولة والبيانات نفسها خلال 24 ساعة دون تكرار. يعمل SMTP لاحقًا وقد يعيد المحاولة؛ فشل البريد لا يحذف السجل. إذا لم يُحدّد مستلم للنموذج يُستخدم بريد الشركة؛ وإذا لم يكن أي عنوان صالحًا يُحفظ الطلب دون بريد.

تستخدم جميع القوالب المرفقة هذا العقد. تعيد طلبات contact POST القديمة الحالة 410 وتبقى صفحات التواصل GET متاحة. طلب الموعد أو الحجز لا يؤكد حجزًا. معالجات الأطراف الأخرى ورفع الملفات والوجهات الخارجية العشوائية غير مشمولة.

POST /__eyivo/forms/{UUID}/submissions
GET /__eyivo/forms/{UUID}/challenge

Field Guide: أدلة سهلة القراءة ومكتبات موارد

يجمع Field Guide (field-guide) بين خط سيريف تحريري ونص أساسي سهل القراءة وخلفيات كحلية وأزرار إجراءات خضراء ولمسات ذهبية هادئة. تتشارك الافتتاحية ومنطقة التوجيه الاختيارية مقدمة متجاوبة. تبقى صور الخلفية خافتة خلف النص، وعندما تكون منطقة التوجيه فارغة تستخدم المقدمة العرض الكامل.

يعرض رأس الصفحة على سطح المكتب أول أربعة روابط صفحات من المستوى الأعلى ويضع بقية الروابط تحت المزيد. تحتفظ الصفحات الرئيسية بروابطها الخاصة وأزرار منفصلة للقوائم الفرعية. على الشاشات الأصغر، تعرض قائمة أصلية قابلة للتوسيع كل صفحة وكل رابط فرعي. يؤدي مفتاح Escape والنقر خارج القائمة إلى إغلاق قوائم التنقل المنسدلة. لا تظهر روابط اللغات إلا عند توفر أكثر من لغة واحدة.

استخدم منطقتي hero وorientation للمقدمة والتوجيه السريع، ومنطقة main لمكوّنات Eyivo الحالية. تتحول شبكة الميزات التي تلي محتوى تحريريًا إلى قائمة تحقق مكمّلة على الشاشات العريضة وتأتي بعده على الجوال. تتميز مقالات النص المنسق بطول سطر سهل القراءة وتباعد واضح بين العناوين وصور ضمن حدود المحتوى مع نسب ظاهرة لأصحابها. عندما ينتهي مقال بعنوان فرعي واحد تليه قائمة تحقق أو ملاحظة قصيرة، يعرض سكربت القالب هذا المحتوى الموجود كشريط جانبي مكمّل على سطح المكتب وأسفل المقال على الجوال، ويبقى مقروءًا دون JavaScript. يتحول قسم النص المنسق الختامي في الصفحة الرئيسية، الذي يكون نصه المنسق فقرة واحدة تحتوي روابط HTTPS، إلى شريط مراجع كحلي بعرض كامل بعنوان ذهبي أصغر وروابط خضراء فاتحة، حتى دون JavaScript. تستخدم مجموعات الأدلة المرتبطة فهرسًا تحريريًا مع حقلي image_url وalt الاختياريين في كل عنصر من service_grid، وروابط على كامل الإدخال، وتركيزًا بلوحة المفاتيح. تبدأ الصفحة الرئيسية بدليلين مصورين، ثم تعرض في المجموعة التالية دليلًا مميزًا بجانب صفوف موارد مدمجة. تستخدم قوائم الخدمات المعلوماتية أو المختلطة لوحات قراءة مرقمة، ولا يحمل إجراءً إلا العنصر الذي له عنوان URL محدد. تستخدم الصور المصغرة عناوين URL للوسائط المقدمة ولا تجلب صفحات الوجهة أبدًا. تستخدم نماذج التواصل والتذييل التباعد والألوان نفسها. يبقى العرض التجريبي الخيالي لكتالوج Northwater Brief منفصلًا عن محتوى ترحيل BACC-GA التجريبي، ولا يؤدي تحديث العرض التجريبي للكتالوج إلى استيراد موقع أي عميل.

Automotive Care: صفحات الورش والوسائط

يتضمن Automotive Care (automotive-care) قوالب خاصة لـ Home وPage وContact وProducts وProduct وGallery وVideos إلى جانب المدونة. تظل مناطق المكونات الحالية متوافقة. يستخدم التصميم الداكن والذهبي عناوين معتدلة وبطاقات خدمات مرقمة وعناوين ضمان منفصلة عن وصفها ومسافات واضحة بين النص والأزرار. تظهر صور مقدمة الصفحات الفرعية خلف طبقة تباين، وتستخدم الصفحات بلا صور مقدمة بسيطة.

يعرض التنقل على الحاسوب ستة روابط رئيسية ويجمع البقية ضمن المزيد. تتطابق أنماط التحويم والصفحة الحالية للروابط الرئيسية وأزرار القوائم الفرعية المنفصلة. تشمل قائمة الجوال جميع الصفحات وروابطها الفرعية. يغلق Escape أو النقر خارج القائمة القوائم المفتوحة. تظهر روابط اللغات فقط عند توفر عدة لغات.

تحافظ صور الكتالوج على نسبها داخل إطارات محدودة. تقيد القوالب الأساسية المشتركة صور المنتجات وتضع خلفيات مقدمات الصفحات في موضعها الصحيح. يبرز المعرض الصورة الأولى؛ يفتح النقر حوارًا متاحًا للجميع ويغلقه Escape ويعيد التركيز إلى الرابط. دون JavaScript تفتح الصورة الأصلية في علامة تبويب جديدة. تدعم شرائح الصور اللمس وأزرار الأسهم ولوحة المفاتيح وتقليل الحركة، ويعمل بحث الكتالوج محليًا. تملأ صور تفاصيل المنتج عرض الإطار بالكامل بقص مركزي. تظهر الضمانات في شريط داكن بأيقونات دروع ذهبية، وتستخدم المزايا أعمدة واسعة بشارات ذهبية تتراص رأسيًا على الشاشات الصغيرة.

Wellness & Beauty: العناية الشخصية ومجموعات العلاجات

يمتلك Wellness & Beauty (wellness-beauty) قوالب Home وPage وContact وProducts وProduct وGallery وVideos الخاصة به، إضافة إلى المدونة. تظل مناطق المكونات وروابط النماذج الحالية متوافقة. تصنع الخلفيات الوردية والعناوين المعتدلة والصور المقوسة هوية ناعمة للاستوديو. توجد مسافات واضحة بين النصوص والإجراءات. تعرض تفاصيل العلاج مقدمة واسعة وصورة بقص مركزي ومحتوى مقروءًا. تفصل بطاقات الكتالوج الصور والأوصاف والإجراءات، ويستخدم المعرض إطارات ألبوم مع تعليقات.

تشترك الروابط العادية والروابط الرئيسية ذات الأبناء في حالات التحويم والصفحة الحالية الوردية. للقوائم الفرعية أزرار منفصلة؛ تظهر الروابط الإضافية ضمن المزيد، وتشمل قائمة الجوال جميع الصفحات والأبناء. يغلق Escape أو النقر خارج القائمة القوائم المفتوحة. يفتح المعرض حوارًا ويعيد التركيز عند الإغلاق؛ ودون JavaScript تفتح الصورة في علامة تبويب جديدة. يعمل البحث محليًا. تدعم الشرائح وعلامات التبويب لوحة المفاتيح وتقليل الحركة. تُحترم ألوان العلامة، ولا يضيف القالب نظام حجز.

Veterinary Care: الخدمات والفريق وبيانات الاتصال الواضحة

يمتلك Veterinary Care (veterinary-care) قوالب Home وPage وContact وProducts وProduct وGallery وVideos الخاصة به إلى جانب المدونة. تظل مناطق المكونات والنماذج المسجلة متوافقة. توفر لوحات النعناع والنص الأخضر الداكن والإجراءات المشمشية والعناوين المستديرة المعتدلة هوية عيادة ودودة. تفصل بطاقات الفريق الصور والأسماء والأدوار والسير. تظهر تسميات الاتصال فوق قيمها مع روابط هاتف وبريد مقروءة. يعرض التذييل اسم الشركة وشعارًا قصيرًا ووصفًا وبيانات اتصال.

تشترك الروابط العادية والرئيسية ذات الأبناء في حالات التحويم والصفحة الحالية بلون النعناع. للقوائم الفرعية أزرار منفصلة؛ تظهر الروابط الإضافية في المزيد وتشمل قائمة الجوال كل الصفحات والأبناء. يغلق Escape أو النقر خارجها القوائم. يوفر الكتالوج إجراءات واضحة وبحثًا محليًا؛ تملأ صور التفاصيل إطارات محدودة بقص مركزي. يبرز المعرض صورة كبيرة مع صور داعمة ويفتح الأصول في حوار يعيد التركيز عند إغلاقه. دون JavaScript تفتح الصورة في علامة تبويب جديدة. تدعم الشرائح وعلامات التبويب لوحة المفاتيح وتقليل الحركة.

Early Learning: صفحات مرحة للمدارس

يوفر Early Learning (early-learning) قوالب خاصة للرئيسية والصفحة والتواصل والمنتجات والمنتج والمعرض والفيديو إلى جانب المدونة. تظل مناطق المكونات والنماذج المسجلة متوافقة. تناسب الخلفيات الكريمية ولمسات المرجاني والنعناعي والأصفر والعناوين المستديرة وأشكال المكعبات بيئة الطفولة المبكرة. تفصل بطاقات الفريق والبطاقات الثلاث في صفحة نبذة بين الصور والأدوار والأوصاف. تظهر معلومات التواصل في لوحات بعناوين واضحة، وتفاصيل البرامج بمقدمة مريحة وصور مركزية، والمعرض بإطارات ألبوم وتعليقات.

تشترك الروابط وعناصرها الرئيسية في حدود عند التمرير وتمييز أصفر للصفحة الحالية. للقوائم الفرعية أزرار مستقلة؛ تجمع المزيد روابط سطح المكتب الإضافية وتضم قائمة الهاتف الأصلية جميع الصفحات وعناصرها الفرعية. تفتح الصور في مربع حوار يعيد التركيز عند إغلاقه أو في تبويب جديد دون JavaScript. تدعم تصفية الكتالوج المحلية وعلامات التبويب وشرائح الصور لوحة المفاتيح وتقليل الحركة. يستخدم العرض نصوصا مدرسية ولا يضيف نظام تسجيل جديدا.

قوالب من مجموعة التصميم

يمتلك كل قالب قوالب الصفحات القياسية العشرة كلها وينسّق مكوّنات Eyivo المشتركة الثلاثين كلها. تعرض صفحات أمثلة المكوّنات والطلبات المضمّنة أقسامًا تتجاوز الصفحة الرئيسية. تستخدم روابط التواصل وعرض السعر واستفسار المنتج والموعد والتقديم على دورة والحجز واستفسار العقار الإضافات الحالية والتحقق البشري. تدعم تصفية الكتالوج وعلامات التبويب القابلة للاستخدام بلوحة المفاتيح ومتصفحات الصور وقوائم التنقل المنسدلة الأصلية عقود المحتوى نفسها على سطح المكتب والجوال وفي التخطيطات من اليمين إلى اليسار.

Seafood Restaurant

يجمع Seafood Restaurant (seafood-restaurant) بين أزرق المحيط والبرتقالي الحمضي وصفحات بيضاء منعشة وعناوين Manrope هادئة. تقود افتتاحية مصورة للمأكولات البحرية إلى شريط مزايا مدمج وأطباق مميزة وقصة على الواجهة البحرية ومعارض أطباق دائرية ولوحة كحلية بأسباب الزيارة. يتضمن محتوى Tide & Table التجريبي الخيالي طلبات الحجز وعشرة أنواع من الصفحات والأقسام المشتركة الثلاثين كلها وروابط النماذج السبعة الحالية كلها. تتشارك روابط التنقل والروابط الرئيسية وقائمة المزيد حالات المرور والصفحة الحالية، وتُبرز الصفحات الفرعية المحددة العنصر الرئيسي التابعة له. تُبقي قوائم الجوال الروابط الفرعية أسفل العنصر الرئيسي. تحافظ علامات التبويب ومتصفحات الصور وتصفية الأطباق والتخطيطات من اليمين إلى اليسار على عقود المنصة. تتطلب طلبات الحجز تأكيدًا، ولا يُقصد وجود نظام دفع أو نظام مباشر لتوفر الطاولات.

Family Insurance

يجمع Family Insurance (family-insurance) بين رأس صفحة بنفسجي وتنقل أبيض داخلي وبين صور عائلية ولوحات معلومات بلون الخزامى الناعم وعناوين Manrope هادئة. محتوى Hearthway Insurance التجريبي خيالي. تتشارك روابط التنقل العادية والرئيسية تأثير المرور نفسه وحالة الصفحة الحالية نفسها، وتُبرز الصفحة الفرعية المحددة الصفحة الرئيسية التابعة لها. توسّع عناوين الصفحات الفرعية المدمجة والمعارض ذات التعليقات وصور الكتالوج المقصوصة ولوحات التواصل المعنونة التصميم إلى ما بعد الصفحة الرئيسية.

Barbershop

يعتمد Barbershop (barbershop) رأس صفحة بالأخضر الداكن من سطرين مع شعار نصي بخط سيريف في الوسط، وافتتاحية مصورة بعرض كامل مظللة من جهة القراءة، وصفحات كريمية بعناوين Playfair Display وأزرار نحاسية. ترسم بطاقات الميزات أيقونات خطية وتعرض قيمة كل أيقونة كتسمية ذهبية قصيرة، وتوضع المؤهلات في شريط داكن مقسوم، ويعرض متصفح الصور أربع قصّات مربعة، وتتحول مواصفات المنتج إلى قائمة أسعار من عمودين وعروض الأسعار إلى لوحة بوردة متقطعة. بطاقات الكتالوج في الصفحة الرئيسية وصفحة الخدمات مربعات مصورة داكنة. محتوى Northline Barber التجريبي خيالي.

Recruitment & Staffing

يستخدم Recruitment & Staffing (recruitment-staffing) تنقلًا أبيض مستديرًا وافتتاحية مقسومة بلون الخزامى مع صورة مقوسة وأزرار إجراءات أرجوانية وآراء عملاء بلون النعناع وتذييلًا أزرق بنفسجيًا. يتضمن محتوى Brightlane Talent التجريبي الخيالي خدمات خاصة بالتوظيف وملفات تعريف للفريق ونصوص استفسار. تبقى عناوين Plus Jakarta Sans معتدلة. يتبع التنقل الرئيسي والفرعي وتفاصيل الكتالوج والمعارض والمقالات وجميع نماذج الطلبات المسجلة اللغة البصرية نفسها.

Airline Booking

يستخدم Airline Booking (airline-booking) رأس صفحة أبيض مع رمز طائرة، وافتتاحية غروب مستديرة بعرض كامل يقع نصها وإجراءاتها في شريط حجز أبيض عائم، وعناوين Figtree بالأزرق المخضر ولون الحبر. تتحول بطاقات الكتالوج إلى مربعات وجهات بشارة مرقمة، وتوضع الصورة والنص في لوحة بلون النعناع مع تسمية بالأزرق المخضر، وتتحول الأرقام إلى شريط مستدير بالأزرق المخضر، وبطاقات الميزات إلى قائمة من عمودين بأسهم، والتذييل لوحة مستديرة بالأزرق المخضر مع إجراء للتواصل. محتوى Skyvane Travel التجريبي خيالي.

Architecture Studio

يضع Architecture Studio (architecture-studio) رأس صفحة شفافًا مع تنقل على شكل كبسولة مصنفرة فوق صورة سكنية بعرض كامل مغمورة بلون الرمل من جهة القراءة، ويستخدم عناوين Montserrat خفيفة وأزرار كبسولة بلون الإسبريسو مع أقراص أسهم بيضاء وتعليقًا عائمًا للمشروع. بطاقات الكتالوج والخدمات مربعات رملية ناعمة بزاوية صورة غير متماثلة، وتتحول شبكة المشاريع إلى شريط داكن للمشاريع المميزة، وتمتد الصورة والنص من حافة إلى حافة بحافة صورة مستديرة، وتوضع الأرقام في عمود مسطّر، وتتحول نماذج العملاء المحتملين إلى شريط تواصل بلون الإسبريسو. محتوى Solace Architecture التجريبي خيالي.

Automation SaaS

يجمع Automation SaaS (automation-saas) بين رأس صفحة أبيض وافتتاحية في الوسط بخط Instrument Serif فوق صورة من السماء إلى التلال، وبين صفحات بلون المريمية وبطاقات بيضاء مستديرة وأزرار إجراءات خضراء زاهية. تتحول الأرقام إلى أربع بطاقات ثالثتها بالأخضر الغابي، وتتناوب الصورة والنص بين بطاقة بيضاء وبطاقة ليمونية حسب النسخة، ويتحول قسم الفيديو إلى بطاقة ميزة بالأخضر الغابي، وشبكة المشاريع إلى بطاقات رؤى أفقية مع تسمية للمزيد، والأسئلة الشائعة أكورديون في الوسط. ينتهي التذييل بشعار نصي كبير بخط سيريف فوق تلال خضراء مرسومة. محتوى Fernflow التجريبي خيالي.

Business Analytics SaaS

يستخدم Business Analytics SaaS (business-analytics-saas) رأس صفحة أبيض وافتتاحية في الوسط بخط Outfit مع شكل زمردي مميز، وتوضع صورة الافتتاحية داخل إطار منتج كحلي بنمط شريط جانبي. توضع الأرقام في صف مقسوم، وتتناوب أيقونات الميزات بين الزمردي والأزرق والبنفسجي، وتوضع الصورة والنص على شريط بلون النعناع مع بطاقة نمو عائمة، وتتحول سحابة الشعارات إلى مربعات تكامل، وعرض السعر إلى خطة زمردية مميزة. تعرض آراء العملاء نجومًا ونقاط صور رمزية، والتذييل كحلي. محتوى Metrova التجريبي خيالي.

Car Dealership

يستخدم Car Dealership (car-dealership) رأس صفحة من سطرين بالأزرق المخضر الداكن مع سطر للتواصل، وافتتاحية مقسومة بلون النعناع مع تسمية تقييم على صورة المركبة، وبطاقة بحث بيضاء تتداخل مع الافتتاحية. تتحول بطاقات الخدمات المصورة إلى ستة مربعات فئات مدمجة، والصورة والنص إلى شريط بيع وشراء بالأزرق المخضر الداكن، والمؤهلات إلى أسباب في الوسط بأيقونات؛ وتحمل بطاقات الكتالوج شارة مرقمة، وتوضع آراء العملاء على الأزرق المخضر الداكن، ويتحول عرض السعر إلى لوحة تمويل بلون النعناع، ويبدأ التذييل بدعوة إلى إجراء. محتوى Corvane Motors التجريبي خيالي.

Car Rental

Car Rental (car-rental) قالب داكن من لوحات خضراء تكاد تكون سوداء بحواف ناعمة ولمسات ليمونية. يقع شريط ليموني فوق شعار نصي في الوسط وتنقل فئات متباعد؛ والافتتاحية بطاقة مصورة بإطار مع عنوان Archivo كبير بأحرف كبيرة وأزرار كبسولة ليمونية بأقراص أسهم. تتحول المؤهلات إلى شريط ميزات واحد، وبطاقات الكتالوج إلى بطاقات تأجير بيضاء يحيط الإطار الليموني بخيارها الأوسط، وبطاقات الميزات إلى خطوات مرقمة، والتذييل لوحة بإطار مع إجراء للتواصل. محتوى Laneway Rentals التجريبي خيالي.

Catering Services

يستخدم Catering Services (catering-services) رأس صفحة بالأخضر الغابي وصفحات كريمية وعناوين Gilda Display مع فاصل على شكل ورقة. تضع الافتتاحية الصورة في إطار مقوس مع علامة تشغيل؛ وتصطف بطاقات الخدمات المصورة في صف من أربعة أعمدة، وتتحول بطاقات الميزات إلى شريط أخضر غابي بطاقته الوسطى زيتونية، وتجمع الصورة والنص بين صورة محززة وبطاقة نص رملية وتعليق بأسلوب التوقيع، وتتحول المؤهلات إلى قائمة طعام مصممة بعناية، ويعرض متصفح الصور أطباقًا دائرية على الأخضر، وتوضع الأسئلة الشائعة داخل بطاقة بلون المريمية. محتوى Sage & Table Catering التجريبي خيالي.

Coaching & Consulting

يجمع Coaching & Consulting (coaching-consulting) بين رأس صفحة وافتتاحية كحليين وتدرج من البرتقالي إلى الوردي فالبنفسجي يمر عبر العنوان والأزرار ومربع صورة شخصية مع تسمية اسم بيضاء. تمدّ سحابة الشعارات الافتتاحية الكحلية كشريط للعملاء، وتحمل بطاقات الميزات خطًا سفليًا متدرجًا، وتتحول الأرقام إلى لوحة مجتمع مقسومة بين التدرج والكحلي، وتكتسب بطاقات الخدمات شارات بإطار ملون وأزرار أسهم، وتعرض شبكة المشاريع بطاقات خطوات مؤطرة، ويتحول عرض السعر إلى خطة داكنة مميزة، وتوضع الصورة والنص في لوحة ليلكية. محتوى Northbeam Coaching التجريبي خيالي.

Construction Company

يستخدم Construction Company (construction-company) شريط رأس صفحة عائمًا بالأزرق المخضر الداكن مع أزرار إجراءات ليمونية فوق صفحة بيضاء، وافتتاحية تمتد صورتها إلى الحافة بقطع مائل وختم دائري متقطع. توضع الأرقام في شريط داكن يتداخل مع الافتتاحية، وتصبح بطاقة الخدمة الثالثة داكنة، وتوضع الصورة والنص في لوحة بلون المريمية مع صورة على شكل متوازي أضلاع، وتعرض شبكة الفريق أربع صور لطاقم العمل، وتتحول المؤهلات إلى لوحة داكنة مرقمة لمراحل العمل، والتذييل لوحة مستديرة بالأزرق المخضر مع بيانات تواصل مباشرة. محتوى Ironleaf Builders التجريبي خيالي.

Cookie Bakery

يستخدم Cookie Bakery (cookie-bakery) صفحة كريمية وافتتاحية مستديرة بلون الشوكولاتة بخط Lilita One عريض يتحول من الأبيض إلى الخردلي، وصورة منتج دائرية ونقاط حلوى ملونة. تتناوب بطاقات الميزات بين الخوخي والوردي والسماوي ولون الزبدة، ويتحول عرض السعر إلى لوحة خصم خوخية، ومواصفات المنتج إلى قائمة داكنة لأصناف اليوم، وبطاقات الخدمات المصورة إلى اختيارات منتجات دائرية؛ وتستخدم الصورة والنص صورة بإطار عضوي مع ختم مرجاني، وتتحول المؤهلات إلى شريط خدمات داكن، وللتذييل حافة مموجة بلون الشوكولاتة. محتوى Crumb & Co. Bakery التجريبي خيالي.

Coworking Space

يجمع Coworking Space (coworking-space) بين صفحة بيضاء دافئة مائلة إلى العاجي ولوحات خضراء داكنة ولمسات خوخية وعناوين Gloock بخط سيريف؛ ينتقل عنوان الافتتاحية من الأخضر إلى الخوخي بين السطور، وتوضع صورة مساحة العمل في إطار مستدير كبير مع بطاقة تعليق خضراء. تتحول المؤهلات إلى شريط ميزات مدمج، وبطاقات الميزات إلى قائمة بأيقونات، وتتشارك بطاقات الكتالوج شريطًا رمليًا بطاقته الوسطى خضراء، وتمتد الأرقام كشريط أخضر، وتحمل صور المعرض تعليقات داكنة، وتعرض آراء العملاء مربع صورة شخصية، وتتحول نماذج العملاء المحتملين إلى بطاقات نماذج خضراء مع زر إرسال خوخي. محتوى Greenhall Workspace التجريبي خيالي.

Creative Studio Coffee

يضع Creative Studio Coffee (creative-studio-coffee) رأس صفحة شفافًا وعنوانًا بخط Bodoni Moda بأحرف كبيرة ينتقل من الأبيض إلى النحاسي فوق صورة إسبريسو بعرض كامل، ثم ينتقل إلى صفحات بيج بلون القهوة بالحليب. تتحول المؤهلات إلى شريط قيم من خمسة أجزاء، وشبكة المشاريع إلى ستة مربعات صور شخصية داكنة بحلقات أسهم، وتمتد الصورة والنص من حافة إلى حافة مع تعليق على شكل ختم دائري، وتتحول نماذج العملاء المحتملين إلى شريط عضوية بلون التحميص الداكن، والتذييل تخطيط فاتح من أعمدة مسطّرة. محتوى Crema Digital التجريبي خيالي.

Duck Farm

يحافظ Duck Farm (duck-farm) على صفحات بيضاء وخضراء فاتحة مع لوحات بأخضر المزارع الداكن ولمسات صفراء مشمسة. تمتد صورة الافتتاحية إلى الحافة وتتلاشى في النص الذي يصبح سطره الأخير أخضر، مع تعليق بخط اليد. تعرض بطاقات الكتالوج أربعة منتجات، وتتحول الصورة والنص إلى لوحة خضراء داكنة بصورة ذات شكل عضوي وشارة طبيعية متقطعة، وبطاقات الميزات إلى أيقونات ثقة مقسومة، والأرقام إلى لوحة زراعية داكنة، والمؤهلات إلى مسار مرقم من المزرعة إلى المائدة، وتوضع آراء العملاء على الكريمي. محتوى Brookmead Farm التجريبي خيالي.

Electrical Services

يجمع Electrical Services (electrical-services) بين رأس صفحة أبيض مع رابط هاتف وزر عرض سعر أخضر وبين افتتاحيات وبطاقات خدمات بالرمادي الفحمي. تتلاشى صورة الافتتاحية في الرمادي الفحمي ويتحول آخر سطرين من العنوان إلى الأخضر الكهربائي. توضع الأرقام على بطاقة بيضاء تتداخل مع الافتتاحية، وتقصّ الصورة والنص الصورة بشكل سداسي مع شارة سلامة دائرية، وتصبح بطاقات الخدمات رمادية فحمية مع دوائر أيقونات خضراء، وتتحول المؤهلات إلى أسباب لاختيار الشركة معلّمة برمز البرق، والدعوة إلى الإجراء إلى لوحة طوارئ خضراء. محتوى Brightwire Electric التجريبي خيالي.

Fashion Store Lavender

يجمع Fashion Store Lavender (fashion-store-lavender) بين رأس صفحة وافتتاحية مقسومة بالرمادي الفحمي وصورة ليلكية مقوسة وعناوين Cormorant Garamond وصفحات عاجية دافئة. يقود شريط مزايا بلون الخزامى إلى مجموعات تحريرية مصورة وبطاقات وصول هادئة ولوحة حملة أزياء داكنة. يمتلك القالب قوالب الصفحات العشرة كلها، وينسّق الأقسام المشتركة الثلاثين كلها، ويدعم نماذج الطلبات السبعة الحالية. تتشارك روابط التنقل والعناصر الرئيسية وقائمة المزيد حالات المرور والتحديد بلون الخزامى، بما في ذلك عند تحديد صفحة فرعية. تستخدم قائمة المزيد وقوائم الجوال صفوفًا بعرض كامل مع روابط متداخلة أسفل العنصر الرئيسي. يحافظ البحث في الكتالوج والتنقل المتداخل الأصلي وعلامات التبويب القابلة للاستخدام بلوحة المفاتيح ومتصفحات الصور على عقود المنصة. محتوى Violette Edit التجريبي خيالي؛ وتستخدم المجموعة روابط استفسار بدل سلة تسوق أو عملية دفع.

9. ماذا يحدث من تفعيل القالب حتى النشر؟

1. تثبيت القالب أو تفعيله. يتحقق Eyivo من الحزمة ويسجّل مفتاحها وإصدارها ويعرض إعداداتها ومخططات مكوّناتها في التطبيق.
2. اختيار نوع الصفحة. يستخدم Eyivo ملف Liquid وتعريف المنطقة المطابقين في القالب النشط عند وجودهما، وإلا يستخدم البديل المطابق من theme-core.
3. إضافة الأقسام المسموح بها. يعرض التطبيق الأنواع المدرجة في allowed_components فقط. ويخزّن النصوص ومراجع الوسائط والترجمات للنسخة المحددة من المكوّن.
4. العرض بأمان. يحلّ Eyivo بيانات الشركة والصفحة وSEO والتنقل، ويعرض مكوّنات المناطق المحفوظة ثم المكوّنات المباشرة في مواضعها التي حددها المصمم، وأخيرًا نوع الصفحة وتخطيط القالب النشط.
5. النشر. يتلقى الزائر HTML وCSS الخاصين بك، دون بيانات اعتماد قاعدة البيانات أو النماذج الداخلية أو شفرة التطبيق.

10. التحقق والأخطاء الشائعة