القوالب والتخصيص·5 min read·

تخصيص CSS للقالب دون إعادة النشر

كيفية استخدام تبويب القالب المخصص في لوحة الإدارة لتجاوز متغيرات CSS الخاصة بالقالب فوريًا — مثالي لضبط المسافات والخطوط وألوان التمييز دون لمس ملف القالب.

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

فتح المحرر

انتقل إلى /admin/themes/custom. يسرد النموذج كل متغير قابل للتجاوز في القالب النشط حاليًا. غيِّر قيمة ما، انقر على «حفظ»، ثم أعِد تحميل تبويب مدونتك — هذا كل ما في الأمر. تُخزَّن التجاوزات في مجموعة `tenant_themes` في PocketBase وتُدمَج فوق الإعداد المسبق وقت التصيير.

ما يمكنك تجاوزه

تُعرِّض كل قالب مجموعة متغيرات مختلفة، لكن الشائعة في جميع القوالب الـ 30 هي:

  • --bg, --fg — لونا الخلفية والمقدمة الأساسيان
  • --accent, --accent-fg — لون التمييز الرئيسي (الروابط وأزرار CTA)
  • --muted, --muted-fg — اللون الثانوي لنصوص البيانات الوصفية
  • --surface, --border — ألوان البطاقات والفواصل
  • --font-sans, --font-serif, --font-mono — مجموعة عائلات الخطوط
  • --space-1, --space-2, ..., --space-8 — مقياس الإيقاع العمودي

يتحقق النموذج من صحة قيم الألوان بتنسيق OKLCH أو hex؛ تظهر الإدخالات غير الصالحة مضمَّنةً قبل تنفيذ الحفظ.

العودة إلى الإعدادات الافتراضية

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

حين تحتاج إلى أكثر من مجرد متغير

إن احتجت إلى تغيير التخطيط — مثل نقل الشريط الجانبي من اليمين إلى اليسار أو إخفاء تاريخ المؤلف — فذلك خارج نطاق نظام المتغيرات؛ وستحتاج حينئذٍ إلى تفريع القالب. المتغيرات مخصصة للرموز التصميمية لا للتغييرات الهيكلية. لإجراء تعديلات هيكلية، انسخ قالبك إلى `src/components/themes/<your-slug>/`، وسجِّله في `theme-registry.ts`، ثم ادفع التغييرات.