لماذا قمنا بتبسيط مخطط Sanity: فلسفة المحرر أولاً

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

مفارقة الاختيار

عندما ينشئ المطورون مخططات، غالبًا ما تكون الغريزة هي عرض كل خاصية CSS ممكنة كحقل. "ماذا لو أرادوا أن تكون الخلفية زرقاء؟ أو حمراء؟ أو تدرجًا؟ لنضف منتقي الألوان! وشريط تمرير للحشو! وإدخال للهامش!"

هذا يؤدي إلى مشكلتين رئيسيتين:

1. عدم الاتساق: تذوب هوية علامتك التجارية حيث تبدو كل صفحة مختلفة قليلاً.

2. الحمل المعرفي: يقضي المحررون وقتًا أطول في تصميم الصفحة أكثر من كتابة المحتوى.

نهج NextMedal: تقليل القرارات

في هذا المشروع، اتخذنا نهجًا مختلفًا جذريًا. نعتقد أن المخطط يجب أن يرشد المحرر، وليس أن يربكه. نحن نركز على المعنى الدلالي بدلاً من التعديل البصري.

1. مكونات دلالية، ليس أساسيات بصرية

بدلاً من مكون "صندوق" عام بـ 50 خيار نمط، نوفِّر وحدات مبنية لغرض محدد مثل "Callout" أو "Hero".

إليك مدى بساطة مخطط Callout الخاص بنا. لاحظ كيف نحد من خيارات النص الغني بالضبط لما يماثل منطقًا لـ callout—لا أحجام خطوط أو ألوان عشوائية.

export default defineType({
  name: 'callout',
  title: 'Callout',
  type: 'object',
  fields: [
    defineField({
      name: 'content',
      title: 'Content',
      type: 'array',
      of: [
        {
          type: 'block',
          // We strictly limit styles to keep the design consistent
          styles: [
            { title: 'Normal', value: 'normal' },
            { title: 'Heading 2', value: 'h2' },
          ],
          marks: {
            decorators: [
              { title: 'Strong', value: 'strong' },
              { title: 'Emphasis', value: 'em' },
            ],
          },
        },
      ],
    }),
    defineField({
      name: 'ctas',
      title: 'Call-to-actions',
      type: 'array',
      of: [{ type: 'cta' }],
    }),
  ],
});

2. إعدادات ذكية وتعقيد مطوي

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

fieldsets: [
  {
    name: 'advanced',
    title: 'Advanced Options',
    options: { collapsible: true, collapsed: true }, // Hidden by default
  },
],
fields: [
  // ... core fields ...
  {
    ...createUidField(),
    fieldset: 'advanced', // Only visible if you need it
  },
],

3. ضوابط لسلامة نظام التصميم

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

defineField({
  name: 'ctas',
  validation: (Rule) =>
    Rule.max(2).custom((ctas) => {
      const primaryCount = ctas.filter(c => c.style === 'primary').length;
      if (primaryCount > 1) return 'Only one Primary button is allowed';
      return true;
    }),
})

النتيجة: محررون أكثر سعادة

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

هذا لا يتعلق فقط بالكود؛ بل يتعلق بالاحترام للمستخدم. المخطط الجيد هو مخطط متعاطف.