البدء السريع·5 min read·

كيف أخصّص سمة مدوّنتي في VeloCMS؟

عدّل الخطوط وألوان علامتك التجارية وكثافة التخطيط دون لمس أي سطر كود — يتيح VeloCMS أكثر متغيّرات التصميم تأثيراً من خلال لوحة إعدادات السمة.

يتيح لك VeloCMS تعديل ألوان علامتك التجارية والخط الرئيسي وكثافة التخطيط من Admin → Themes → Customize دون كتابة سطر CSS واحد. تُخزَّن التغييرات على شكل تجاوزات لإعداد السمة وتُطبَّق بوصفها خصائص CSS مخصصة وقت التشغيل — مما يجعلها فورية وقابلة للإلغاء وغير قادرة على كسر السمة الأساسية.

أي خصائص التصميم يمكنني تغييرها دون كود؟

تعرض لوحة Customize ثلاث فئات من الإعدادات. تتيح لك ألوان العلامة التجارية ضبط لون التمييز الرئيسي والخلفية ولون النص — تُخزَّن جميعها كقيم OKLCH كي تتكيّف بسلاسة مع الوضع الداكن. يتيح لك قسم الطباعة الاختيار من قائمة منسّقة بعناية من أزواج الخطوط (كل زوج خطٌّ للعناوين وخطٌّ للنص الأساسي مختاران للقابلية للقراءة والأداء). تمنحك كثافة التخطيط خيار عرض القراءة: مضغوط أو مريح أو فسيح. تغطّي هذه العناصر الثلاثة أكثر ما يميّز شخصية مدوّنتك دون الحاجة إلى أي مطوّر.

كيف أضبط لون علامتي التجارية الخاص؟

افتح Admin → Themes → Customize وانقر على مربّع اللون الرئيسي. تنفتح أداة اختيار الألوان مع حقل إدخال hex — ألصق رمز hex لون علامتك التجارية (مثلاً #E63946) وستتحدّث المعاينة على اليمين فوراً. يحوّل VeloCMS قيمة hex داخلياً إلى OKLCH حتى يبدو اللون متسقاً عبر معايرات الشاشات المختلفة وفي الوضع الداكن. انقر على Save Changes وسيصبح اللون الجديد سارياً فوراً على جميع الزوّار. إن أردتَ إعادة لون السمة الافتراضي، امسح حقل اللون المخصص واحفظ.

ما الخطوط المتاحة وكيف أبدّلها؟

يأتي VeloCMS مع سبعة أزواج خطوط مختارة بعناية، يغطّي كلٌّ منها خطّ العناوين وخطّ النص الأساسي. محسَّنة الأزواج مسبقاً لأداء الويب — تُحمَّل الخطوط من Google Fonts بإعداد display=swap كي لا تحجب أبداً عرض صفحتك. للتبديل، افتح قسم Typography في لوحة Customize، انقر على أي زوج لمعاينته في العرض المباشر على اليمين، ثم احفظ. تنتشر تغييرات الخط على جميع مقالاتك الموجودة فوراً — لا يوجد إعداد خط لكل مقال على حدة، لأن عدم اتساق الطباعة من أسرع الطرق لإضفاء مظهر غير احترافي على المدوّنة.

هل يمكنني حقن CSS مخصص للتعديلات المتقدمة؟

يستطيع المشتركون في خطتَي Pro وBusiness لصق CSS مخصص من Admin → Themes → Custom CSS. يُحقن هذا الـ CSS في أسفل ورقة الأنماط العامة، فتتغلّب قواعدك على إعدادات السمة الافتراضية بالتخصيصية العادية لـ CSS. أبقِ الـ CSS المخصص في حدوده الدنيا — التجاوزات التي تكرّر خصائص CSS المخصصة الموجودة (كـ --vb-color-primary) غير ضرورية نظراً لأن لوحة Customize تضبطها أصلاً. أكثر حالات الاستخدام المشروعة هي تعديلات طفيفة في حجم الخط، أو إخفاء عناصر واجهة معيّنة، أو إضافة نمط خلفية مخصص. تتيح خطة Business أيضاً JavaScript مخصصاً عبر لوحة Head & Footer Code لعمليات الدمج مع أطراف خارجية التي تستلزم حقن سكريبت.

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