Types of Components

आप कॉम्पोनेंट्स परिभाषित करते हैं। कॉम्पोनेंट्स वह डेटा लेयर हैं जो UI से जुड़ती है।

कस्टम कॉम्पोनेंट्स ब्लॉग पोस्ट, लेखक, पते, कस्टम रॉ डेटा आदि होते हैं।

UI कॉम्पोनेंट्स वे कस्टम कॉम्पोनेंट्स होते हैं जिन्हें UI एलिमेंट्स, फुटर, हेडर, हीरो आदि के रूप में मार्क किया जाता है।

सिस्टम कॉम्पोनेंट्स को CMS द्वारा कंट्री और लैंग्वेज के रूप में पहले से परिभाषित किया जाता है।

UI कॉम्पोनेंट्स क्या हैं?

पेज एक से अधिक UI कॉम्पोनेंट से मिलकर बने होते हैं।

उदाहरण:

• hero-block
• feature-block
• image-carousel
• header/footer

हर UI कॉम्पोनेंट आपके पेज के एक सेक्शन का प्रतिनिधित्व करता है।

UI कॉम्पोनेंट कार्यप्रवाह

1. कॉम्पोनेंट बिल्डर में एक कॉम्पोनेंट (ब्लॉक की संरचना) परिभाषित करें
2. UI कॉम्पोनेंट बनाएं
3. UI कॉम्पोनेंट को एक पेज को असाइन करें
4. ब्लॉक रजिस्ट्री और रेंडरर सेटअप में उपयुक्त ब्लॉक के साथ इसे क्लाइंट पर रेंडर करें

उदाहरण: हीरो ब्लॉक स्कीमा

एक हीरो ब्लॉक में ये शामिल हो सकते हैं:

• इमेज
• हेडिंग
• सबटाइटल

संपादक में JSON स्कीमा

[
  {
    "name": "heading",
    "type": "string",
    "required": false,
    "displayName": "heading"
  },
  {
    "name": "subtitle",
    "type": "string",
    "required": false,
    "displayName": "subtitle"
  },
  {
    "name": "hero_img",
    "type": "image",
    "required": false,
    "displayName": "hero_img"
  }
]

एडमिन पैनल सेटअप

• एक नया ब्लॉक बनाएं
• स्कीमा (HeroSchema) संलग्न करें
• ब्लॉक का नाम रखें (उदा., hero-block)

ब्लॉक को पेज से असाइन करें

• एडमिन पैनल में किसी रूट पर जाएँ
• Assign Page पर क्लिक करें
• नए बनाए गए ब्लॉक को जोड़ें

क्लाइंट पर रेंडरिंग

असाइन होने के बाद, ब्लॉक को आपके रेंडरर सेटअप का उपयोग करते हुए क्लाइंट साइड पर प्राप्त और रेंडर किया जा सकता है।

सारांश

• स्कीमा ब्लॉक्स की संरचना को परिभाषित करते हैं
• ब्लॉक्स पेज के सेक्शन्स को परिभाषित करते हैं
• पेज कई ब्लॉक्स से मिलकर बने होते हैं
• पूरी तरह से कस्टमाइज़ेबल और पुन: प्रयोज्य