MAISON CODE .
/ Headless CMS · Sanity · Backend · Architecture · Content Strategy

تصميم طبقة المحتوى: الغوص العميق في هندسة Sanity.io

لماذا اخترنا العقلانية على المحتوى؟ دليل فني للمحتوى المنظم، وإسقاطات GROQ، والنص المحمول، وخطوط أنابيب الصور.

AB
Alex B.
تصميم طبقة المحتوى: الغوص العميق في هندسة Sanity.io

في النظام البيئي للتجارة بدون رأس، Shopify هو قاعدة بيانات المنتج (PIM). إنه يتفوق في إدارة وحدات SKU والأسعار والمخزون. يمكن القول إنه أسوأ نظام إدارة المحتوى (CMS) في العالم. تعتبر قوالب JSON الخاصة بـ Shopify “Online Store 2.0” جامدة. حقول التعريف هي في الأساس سلاسل غير مكتوبة. لبناء واجهة متجر ديناميكية وفاخرة حقًا، تحتاج إلى Content Lake مخصص.

في Maison Code Paris، قمنا بتقييم كل نظام إدارة محتوى بدون رأس (Contentful، Strapi، Prismic). لقد اخترنا Sanity.io. تشرح هذه المقالة المنطق الفني والبنية وتفاصيل التنفيذ التي تسمح لنا ببناء “أدوات إنشاء الصفحات” التي لا تخرق التعليمات البرمجية.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

الفلسفة: المحتوى كبيانات، وليس HTML

في WordPress أو أنظمة إدارة المحتوى البسيطة، يكتب المحرر “الصفحات”. لديهم محرر WYSIWYG حيث يقومون بنص غامق وإضافة صور وكتابة نقاط HTML بشكل أساسي. هذا ** العرض التقديمي المقترن **. إذا كنت تريد إعادة استخدام هذا المحتوى على تطبيق iOS أو إشعار WatchOS، فأنت عالق في تحليل سلاسل HTML.

يتعامل Sanity مع المحتوى على أنه بيانات منظمة. “القسم الرئيسي” ليس <div>. إنه كائن JSON:

{
  "_النوع": "البطل"،
  "عنوان": "مجموعة الصيف"،
  "cta": { "label": "تسوق الآن"، "link": "/collections/summer" },
  "الموضوع": "الظلام"
}

تقرر الواجهة الأمامية (React) كيفية عرض ذلك. يقوم المحرر بإدخال النية فقط.

طبقة الاستعلام: GROQ vs GraphQL

تقدم معظم أنظمة إدارة المحتوى بدون رأس واجهة برمجة تطبيقات GraphQL. انه جيد. تقدم Sanity GROQ (استعلامات كائنات الرسم البياني العلائقية). إنها استثنائية. لماذا؟ لأن GROQ يسمح بـ الإسقاطات (إعادة التشكيل من جانب العميل على الخادم).

السيناريو: لديك مستند مؤلف تمت الإشارة إليه بواسطة منشور. في GraphQL، يحدد المخطط الشكل. في GROQ، يمكنك إعادة تشكيله بسرعة:

// احصل على جميع المشاركات، ولكن أعد تسمية "author.name" إلى "writerBy"
*[_type == "منشور"] {
  عنوان,
  "مكتوب بواسطة": اسم المؤلف->،
  "وقت القراءة المقدر": جولة (الطول (الجسم) / 5/60) + "دقيقة"
}

لاحظ الرياضيات (الجولة). لاحظ إلغاء مرجعية المؤشر (->). يمكننا حساب “وقت القراءة” على طبقة قاعدة البيانات. يمكننا الانضمام إلى مجموعات البيانات. يمكننا إسقاط كائنات ضخمة إلى كائنات DTO (كائنات نقل البيانات) رفيعة مصممة بشكل مثالي لمكونات React الخاصة بنا.

يؤدي هذا إلى تقليل حجم الحمولة بنسبة 40-70% مقارنةً باستعلامات GraphQL القياسية التي يتم جلبها بشكل زائد.

الهندسة المعمارية: بحيرة المحتوى

Sanity هو مخزن مستندات في الوقت الفعلي (مستضاف على Google Cloud). عندما يكتب “Alex” حرفًا في الاستوديو، تتم مزامنته عبر WebSocket إلى مخزن البيانات بالمللي ثانية. يرى “Chloe” أن المؤشر يتحرك على الفور (نمط محرر مستندات Google).

يؤدي هذا إلى حل المشكلة الأكبر في لعبة Headless: Preview. يتطلب برنامج Headless التقليدي وجود “Build” (Next.js SSG) لرؤية التغييرات. يستغرق ذلك دقيقتين. المحررين يكرهون ذلك. باستخدام Sanity + Hydrogen (Remix)، نشترك في تدفق المحتوى. المعاينة فورية.

خطاف التفاعل

استيراد { useQuery } من '@sanity/react-loader'؛

وظيفة التصدير useSanityQuery(query, params) {
    // إذا كنت داخل Iframe، فاستخدم البيانات المباشرة. استخدم بيانات أخرى مبنية.
    const { data } = useQuery(query, params);
    إرجاع البيانات؛
}

النص المحمول: حل مشكلة “dangerouslySetInnerHTML”.

إذا سمحت للمحررين بكتابة HTML، فسوف يدمرون موقعك. سيقومون بلصق علامة “البرنامج النصي”. سيستخدمون 5 علامات h1 (تدمير تحسين محركات البحث). يستخدم العقل ** نص محمول **. إنها مواصفات تعتمد على JSON للنص المنسق.

[
  {
    "_النوع": "كتلة"،
    "نمط": "عادي"،
    "الأطفال": [
      { "نص": "مرحبًا" }،
      { "نص": "العالم"، "علامات": ["قوي"] }
    ]
  }
]

نعرض هذا باستخدام مكون التسلسل. وهذا يمنحنا السيطرة الكاملة.

استيراد {PortableText} من '@portabletext/react'؛

مكونات ثابتة = {
  // تجاوز كيفية عرض H1
  كتلة: {
    h1: ({children}) => <h1 className="text-4xl Font-bold Tracking-tight">{children}</h1>,
  },
  // تضمينات مخصصة
  الأنواع: {
    instagramPost: ({value}) => <InstagramEmbed id={value.url} />،
    بطاقة المنتج: ({value}) => <معرف بطاقة المنتج={value.productId} />
  }
};

تصدير const RichText = ({ content }) => (
    <قيمة PortableText = مكونات {content} = {components} />
);

الأمان: لا يمكن استخدام XSS (البرمجة النصية عبر المواقع). يتم كتابة الهيكل بدقة.

خط أنابيب الصورة

الصور هي الجزء الأثقل في أي موقع للتجارة الإلكترونية. يحتوي Sanity على Image CDN. عندما يقوم محرر بتحميل ملف TIFF بحجم 50 ميجابايت، يقوم Sanity بتخزينه. تسمح لنا واجهة برمجة التطبيقات (API) بطلب تحويلها بسرعة.

https://cdn.sanity.io/images/.../my-image.jpg?w=800&h=600&fit=crop&auto=format

لقد قمنا ببناء مكون “صورة” قابل لإعادة الاستخدام يستفيد من هذا:

  1. نقطة الاتصال والقص: يقوم المحرر بتعيين “نقطة التركيز” على وجه العارضة. إذا قمنا بالقص إلى مربع، فسيتم توسيط الوجه تلقائيًا.
  2. التنسيق التلقائي: يخدم AVIF لمتصفح Chrome، وWebP إلى Safari، وJPEG إلى التراث.
  3. LQIP (عنصر نائب لصورة منخفضة الجودة): تتضمن البيانات التعريفية سلسلة تمويه مشفرة بأساس 64. نعرض هذا على الفور أثناء تحميل الصورة الرئيسية.
// urlBuilder.ts
استيراد imageUrlBuilder من '@sanity/image-url'؛

const builder = imageUrlBuilder(client);

وظيفة التصدير urlFor(source) {
  return builder.image(source).auto('format').fit('max');
}

هندسة المخطط: عمليات التحقق من الصحة

نحن نتعامل مع نماذج المحتوى مثل مخططات قاعدة البيانات. نحن نفرض القواعد. “يجب أن تحصل مراجعة المنتج على تقييم يتراوح بين 1 و5.”

// المخططات/review.ts
تحديد الحقل({
  الاسم: "التقييم"،
  النوع: "رقم"،
  التحقق من الصحة: (القاعدة) => Rule.required().min(1).max(5).error("يجب أن يكون التقييم 1-5")
})

يتم تشغيل هذا التحقق في الاستوديو. لا يستطيع المحرر فعليًا نشر بيانات سيئة. لا يتعين على كود الواجهة الأمامية أبدًا التعامل مع “التصنيف: 200”.

التدويل (i18n)

العلامات التجارية الفاخرة عالمية. هناك استراتيجيتان في التعقل:

  1. المستوى الميداني: { title: { en: "Hello"، fr: "Bonjour" } }
    • Pro: يحفظ كل شيء في مستند واحد. جيد للتخطيطات المتسقة القوية.
    • السلبيات: يصبح المستند ضخمًا.
  2. مستوى المستند: مستند Title_EN ومستند Title_FR.
    • Pro: الحرية الكاملة لكل سوق. يمكن أن تحتوي الصفحة الفرنسية على أقسام مختلفة عن الصفحة الأمريكية.
    • السلبيات: من الصعب إدارة المزامنة.

نوصي عادةً بـ مستوى الحقل لـ “المحتوى العالمي” (أوصاف المنتج) ومستوى المستند لـ “صفحات التسويق” (غالبًا ما تختلف الحملات حسب المنطقة).

10. Sanity Connect لـ Shopify (المزامنة)

لا تريد نسخ ولصق عناوين المنتجات من Shopify إلى Sanity. نحن نستخدم Sanity Connect. يستمع إلى Shopify Webhooks. عند تحديث الأسعار في Shopify -> المزامنة مع Sanity. لكننا نجعلها ** للقراءة فقط ** في التعقل. يرى المحرر بيانات المنتج، ويمكنه الرجوع إليها في كتاب البحث، ولكن لا يمكنه تغيير السعر. يحافظ هذا على “المصدر الوحيد للحقيقة” (Shopify) مع إثراء “طبقة العرض” (العقل).

11. لوحات تحكم الاستوديو المخصصة

نظام إدارة المحتوى (CMS) هو المنزل المخصص لفريق التسويق. نحن نبني عناصر واجهة مستخدم مخصصة للوحة المعلومات في الاستوديو.

  1. أداة Google Analytics: “أفضل 5 منشورات مدونة هذا الأسبوع”.
  2. Shopify القطعة: “شريط المبيعات المباشرة”.
  3. حالة بناء Vercel: “هل يتم نشر الموقع؟”. يؤدي ذلك إلى تحويل نظام إدارة المحتوى (CMS) إلى مركز قيادة، مما يقلل الحاجة إلى تسجيل الدخول إلى 5 أدوات مختلفة.

13. استراتيجيات الترحيل: WordPress to Sanity

يعد ترحيل 5000 مشاركة مدونة من WordPress أمرًا مخيفًا. نحن لا نستخدم “استيراد المكونات الإضافية”. نحن نكتب النصوص.

  1. استخراج: اتصل بـ WP REST API. سحب جميع المشاركات.
  2. التحويل: تحويل نص HTML -> النص المحمول (باستخدام @portabletext/to-portabletext).
    • يؤدي هذا إلى تحويل علامات <b> إلى علامات.
    • يقوم بتنزيل الصور، وتحميلها إلى Sanity Asset Pipeline، واستبدال <img> src بمرجع الأصول الجديد.
  3. تحميل: كتابة المعاملات (100 مستند لكل معاملة). النتيجة: مجموعة بيانات نظيفة ومنظمة من حساء HTML الفوضوي.

14. مفهوم “بحيرة المحتوى”.

لماذا نسميها “بحيرة”؟ لأنك تفريغ كل ما فيه. منتجات. ملفات تعريف الموظفين. مواقع المتجر. السياسات القانونية. في نظام إدارة المحتوى التقليدي، يتم عزل هذه العناصر. في التعقل، هم مجرد وثائق. يمكنك ربط “موقع المتجر” بـ “الملف التعريفي للموظفين” بـ “المنتج”. “هذا المنتج متوفر في متجر باريس، الذي تديره كلوي.” تتيح إمكانية Graph هذه تجارب واجهة أمامية غنية بشكل لا يصدق لا يستطيع WordPress تصميمها.

15. الاستنتاج

يسمح لنا العقل بفصل “ماذا” (المحتوى) عن “كيف” (العرض التقديمي). إنه يحول نظام إدارة المحتوى (CMS) من عنق الزجاجة إلى واجهة برمجة التطبيقات (API). بالنسبة للمطور، يبدو الاستعلام عن المحتوى باستخدام GROQ بمثابة قوى خارقة. بالنسبة للمحرر، فإن رؤية تغييراته مباشرة دون الضغط على “تحديث” تبدو وكأنها سحر.

هل أنت غير راضٍ عن نظام إدارة المحتوى لديك؟

إذا قام فريق التسويق الخاص بك بكسر التخطيط في كل مرة ينشرون فيها مشاركة مدونة. قم بتوظيف مهندسينا.