التخطيطات (Layouts)

التخطيطات تحدد هيكل HTML الذي يغلف جميع الصفحات. تتضمن العناصر المشتركة مثل <head>، المكتبات الخارجية، وفتحات القوالب.

ملفات التخطيط

layouts/
└── layout.njk    # قالب التخطيط الرئيسي

يمكنك إنشاء تخطيطات متعددة (مثل layout.njk, landing.njk, checkout.njk) والإشارة إليها في ملفات JSON الصفحات.

وسوم القالب الرئيسية

الوسم	الوصف
`{% seo %}`	يضخ وسوم SEO الوصفية (title, description, Open Graph)
`{% qumra_head %}`	يضخ وسوم head لنظام Qumra
`{% qumra_scripts %}`	يضخ سكريبتات نظام Qumra
`{% template "name" %}`	يتضمن قالباً من مجلد `templates/`
`{% content " " %}`	يعرض widgets الصفحة من `pages/*.json`

مثال تخطيط كامل

<!DOCTYPE html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    {# وسوم SEO #}
    {% seo %}

    {# وسوم نظام Qumra #}
    {% qumra_head %}

    {# الاتصال المسبق بالنطاقات الخارجية #}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://cdn.jsdelivr.net">

    {# Google Fonts #}
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">

    {# المكتبات الخارجية #}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

    {# أنماط القالب مع ألوان ديناميكية #}
    <style>
      :root {
        --main-color: {{ settings.mainColor }};
        --secondary-color: {{ settings.secondaryColor }};
        --accent-color: {{ settings.accentColor }};
      }
    </style>

    {# أصول القالب #}
    <link rel="stylesheet" href="{{ 'style.css' | assets }}">

    {# CSS مخصص من الإعدادات #}
    {% if settings.customCss %}
      <style>{{ settings.customCss | safe }}</style>
    {% endif %}
  </head>

  <body class="font-cairo antialiased">
    {# قالب الرأس #}
    {% template "header" %}

    {# محتوى الصفحة #}
    <main>
      {% content " " %}
    </main>

    {# قالب التذييل #}
    {% template "footer" %}

    {# Widgets عامة (WhatsApp، التنقل المحمول) #}
    {% template "global" %}

    {# سكريبتات نظام Qumra #}
    {% qumra_scripts %}

    {# المكتبات الخارجية #}
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    {# سكريبتات القالب #}
    <script defer src="{{ 'alpine.config.js' | assets }}"></script>
    <script defer src="{{ 'main.js' | assets }}"></script>

    {# JavaScript مخصص من الإعدادات #}
    {% if settings.customJs %}
      <script>{{ settings.customJs | safe }}</script>
    {% endif %}
  </body>
</html>

المكتبات الموصى بها

المكتبة	الغرض
Tailwind CSS	إطار CSS قائم على الأدوات
Alpine.js	إطار تفاعلي خفيف الوزن
Swiper	مكتبة carousel/slider
AOS	رسوم متحركة عند التمرير
Toastify	إشعارات toast
GLightbox	lightbox للصور

دعم RTL

للغات العربية واللغات من اليمين لليسار، اضبط dir="rtl" و lang="ar":

<html lang="ar" dir="rtl">

نصائح

أفضل الممارسات

احتفظ بالاستيرادات المشتركة (الخطوط، المكتبات) في التخطيط
استخدم خصائص CSS المخصصة لألوان القالب
حمّل السكريبتات مع defer لأداء أفضل
استخدم {% template "global" %} للعناصر العائمة
اترك المحتوى الخاص بالصفحة للـ widgets عبر {% content %}

ملفات التخطيط​

وسوم القالب الرئيسية​

مثال تخطيط كامل​

المكتبات الموصى بها​

دعم RTL​

نصائح​