بناء ثيم خطوة بخطوة

صفحة العقد تقول ما الذي يحقّ للثيم فعله. وهذه الصفحة رفيقها العملي، وتتبع ثيماً داكناً تقوده الصور ومنشوراً اليوم. اقرأ العقد أولاً — فكل قاعدة فيه تفشل بصمت.

صمّم الأسطح التسعة قبل أن تفتح المحرر

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

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

سجّله في الفهرس أولاً

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

لا يوجد أي تحقق عند الترجمة على هذا الملف. فإن نسيته صار ثيمك «مجهولاً» ولم يظهر أبداً في معرض التاجر، دون أي رسالة خطأ في أي مكان. ولهذا فهو الخطوة الأولى.

اكتب المكوّنات

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

tsx

// A slot is a SERVER component. No 'use client' here, ever:
// it would put every theme's markup into every shopper's bundle.
export function LayaliFooter({locale, settings, columns}: FooterSlotProps) {
  // `locale` arrives as a prop because this renders inside a cached
  // scope — reading request data here would break the prerendered
  // shell for every shopper of every store.
  const variant = settingString(settings, 'footerVariant', 'full');

  return (
    <footer className="border-t border-[var(--border)] px-6 py-14 text-center">
      {/* Logical properties only: ms-/me-/start/end, never left/right. */}
      <div className="mx-auto flex max-w-3xl flex-col items-center gap-6">
        {variant !== 'minimal' ? <FooterColumns columns={columns} /> : null}
        <FooterLegal locale={locale} />
      </div>
    </footer>
  );
}

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

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

الرموز

الرموز فرقٌ عن ورقة الأنماط الأساسية، تُدرَج في عنصر style. ويجب أن تكون الأسماء بحروف صغيرة وشرطات، وتُفحص القيم بحثاً عن محارف قد تخرج من التصريح، والقيمة غير الآمنة ترمي خطأً عند تحميل الوحدة في التطوير. والثيم المعتاد يتجاوز حفنة منها — الاستدارة والخافت والحدود والخط.

// A DELTA over the base stylesheet — not a full palette.
// The merchant's own brand colour still layers on top of this.
export const LAYALI_TOKENS = {
  '--background': '#12100e',
  '--foreground': '#f5efe6',
  '--muted': '#1c1917',
  '--border': '#2a2521',
  '--radius': '0rem',
  '--font-display': 'var(--font-cairo)',
};

واجهات المتاجر مثبّتة على اللوحة الفاتحة، فلا يُعرض فعلياً إلا السجل الفاتح. املأ السجل الداكن مع ذلك بدرجة أعمق، ليكون الثيم كاملاً إن عاد الوضع الداكن يوماً.

صورة المعاينة والترجمة

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

الاختبارات

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

التحقق

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

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

ثغرة معروفة تحققها يدوياً

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

عودة إلى العقد تغيير السلوك لا الشكل فقط

بناء ثيم خطوة بخطوة

صمّم الأسطح التسعة قبل أن تفتح المحرر#

سجّله في الفهرس أولاً#

اكتب المكوّنات#

الرموز#

صورة المعاينة والترجمة#

الاختبارات#

التحقق#

ثغرة معروفة تحققها يدوياً#