Types of Components

คุณเป็นผู้กำหนดคอมโพเนนต์ คอมโพเนนต์คือเลเยอร์ข้อมูลที่เชื่อมต่อกับ UI

คอมโพเนนต์แบบกำหนดเอง (Custom Components) ได้แก่ บล็อกโพสต์ ผู้เขียน ที่อยู่ ข้อมูลดิบแบบกำหนดเอง ฯลฯ

คอมโพเนนต์ UI (UI Components) เป็นเพียงคอมโพเนนต์แบบกำหนดเองที่ถูกระบุว่าเป็นองค์ประกอบ UI เช่น ส่วนท้าย ส่วนหัว ฮีโร ฯลฯ

คอมโพเนนต์ระบบ (System Components) ถูกกำหนดไว้ล่วงหน้าโดย CMS เช่น ข้อมูลประเทศและภาษา

คอมโพเนนต์ UI คืออะไร?

หน้าหนึ่ง ๆ ประกอบด้วยคอมโพเนนต์ UI มากกว่าหนึ่งรายการ

ตัวอย่าง:

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

คอมโพเนนต์ UI แต่ละรายการแทนส่วนหนึ่งของหน้าของคุณ

เวิร์กโฟลว์ของคอมโพเนนต์ UI

1. กำหนดคอมโพเนนต์ (โครงสร้างของบล็อก) ในเครื่องมือสร้างคอมโพเนนต์
2. สร้างคอมโพเนนต์ UI
3. กำหนดคอมโพเนนต์ UI ให้กับหน้า
4. เรนเดอร์บนไคลเอนต์ด้วยบล็อกที่เหมาะสมในรีจิสทรีของบล็อกและการตั้งค่า renderer

ตัวอย่าง: สคีมาของ Hero Block

Hero block อาจประกอบด้วย:

• รูปภาพ
• หัวเรื่อง
• คำบรรยายรอง

JSON Schema ในตัวแก้ไข

[
  {
    "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
• เพิ่มบล็อกที่สร้างขึ้นใหม่

การเรนเดอร์บนไคลเอนต์

เมื่อกำหนดแล้ว สามารถดึงบล็อกและเรนเดอร์บนฝั่งไคลเอนต์ได้โดยใช้การตั้งค่า renderer ของคุณ

สรุป

• สคีมาจะกำหนดโครงสร้างของบล็อก
• บล็อกจะกำหนดส่วนต่าง ๆ ของหน้า
• หน้าหนึ่งประกอบด้วยหลายบล็อก
• ปรับแต่งได้เต็มที่และนำกลับมาใช้ซ้ำได้