Schema element · Visual Builder

Visual Builder · skai.visual v1

Schema định nghĩa field và khả năng của một loại element. Giá trị của từng instance nằm trong props của page Visual. Element hệ thống có schema sẵn; theme tự tạo element qua elements/*.html.

Ví dụ elements/promo-card.html

<article {{ node.attributes }}>
  <h2>{{ node.props.heading }}</h2>
  <p>{{ node.props.description }}</p>
  {{ node.children_html }}
</article>
{% schema %}
{
  "version": 1,
  "name": "Thẻ giới thiệu",
  "accepts_children": true,
  "settings": [
    {"id": "heading", "type": "text", "label": "Tiêu đề", "default": "Giới thiệu"},
    {"id": "description", "type": "textarea", "label": "Mô tả", "default": ""}
  ],
  "default_styles": {
    "desktop": {
      "padding": "24px",
      "backgroundColor": "var(--skai-card-background, #ffffff)",
      "borderRadius": "var(--skai-card-radius, 12px)",
      "fontFamily": "var(--skai-body-font, inherit)"
    }
  }
}
{% endschema %}

Các key schema

Key	Ý nghĩa
`version`	Luôn là 1.
`name`	Tên hiển thị trong thư viện và editor.
`accepts_children`	Cho phép nhận children hay không.
`settings`	Mảng định nghĩa field: id, type, label, default và các thuộc tính theo loại field.
`default_styles`	Thiết kế mặc định theo desktop/tablet/mobile.
`allowed_children / allowed_parents`	Giới hạn type con/cha khi cần.
`navigation`	Đăng ký schema cấu hình menu và submenu types cho element navigation, nếu element cần.

Dữ liệu khi render

node.props: giá trị field đã xử lý default và binding.
node.attributes: thuộc tính ID và nhận diện element do engine sinh; đặt trên phần tử gốc để style/editor hoạt động.
node.children_html: HTML các element con đã render.

Mỗi file cần đúng một cặp thẻ schema/endschema. Không dùng section.settings hoặc vòng lặp section.block_order trong element Visual.

Instance trong page

{"id":"intro-card","type":"promo-card","props":{"heading":"Về chúng tôi","description":"Nội dung riêng của trang"},"children":[]}

Xem định dạng page Visual đầy đủ, các loại field và config chuẩn.