Khi chỉnh mẫu, bạn sẽ gặp cả Props và Parameters. Hai phần này cùng đưa giá trị vào nội dung, nhưng phục vụ hai việc khác nhau: một phần giữ những gì thuộc về mẫu, phần còn lại nhận dữ liệu cho mỗi lần tạo tài liệu.
Tách đúng từ đầu giúp bạn sửa thiết kế ở một nơi và dùng lại mẫu với nhiều bộ dữ liệu, thay vì phải mở editor để đổi nội dung mỗi lần chạy.
1. Chọn nơi lưu giá trị
Dùng Props cho giá trị bạn muốn lưu cùng mẫu, như tiêu đề, nhãn, màu hoặc logo. Dùng Parameters cho dữ liệu được truyền vào mỗi lần chạy, như người nhận, mã tham chiếu hoặc danh sách các mục.
| Giá trị | Nơi phù hợp |
|---|---|
| Nhãn “Người nhận” | Prop của section đang hiển thị nhãn. |
| Tên người nhận | Parameter. |
| Màu hoặc logo dùng ở nhiều phần | Global prop. |
| Danh sách các mục cần trình bày | Array parameter. |
| Một nhãn có bản Việt/Anh | Prop có giá trị riêng theo variant. |
2. Props thuộc phần đang chỉnh
Trong Structure, chọn section, Header hoặc Footer rồi mở Props. Bấm Add prop để thêm giá trị mới. Các kiểu có sẵn gồm Text, Number, Boolean, Array, Object, Color và Asset.
Trong HTML của phần đó, đọc prop bằng {{ props.heading }}. Với prop dùng chung ở Global, dùng {{ global.props.tenProp }}.
Cùng một tên prop có thể xuất hiện ở các section khác nhau. Khi sửa, hãy nhìn tên section phía trên danh sách Props để biết bạn đang đổi giá trị của phần nào.
3. Parameters là dữ liệu cho mỗi lần chạy
Mở Parameters → Schema để khai báo tên trường, kiểu và giá trị mặc định. Sau đó dùng {{ params.recipient }} trong HTML để đọc trường recipient.
Bạn có thể xem object dữ liệu trong tab Payload, rồi dùng cấu trúc đó khi nhập dữ liệu ở Run. Khi truyền một giá trị mới, bạn đang thay dữ liệu của lần chạy, không đổi prop đã lưu trong mẫu.
Xem Khai báo dữ liệu đầu vào để thêm các trường cho mẫu.
{ "recipient": "Tembuilder" }4. Kết hợp trong HTML
Ví dụ, heading là prop lưu tiêu đề của section, còn recipient là parameter nhận tên người đọc:
<h1>{{ props.heading }}</h1>
<p>{{ params.recipient }}</p>Đổi heading trong Props khi muốn sửa tiêu đề của mẫu. Gửi recipient khác khi muốn dùng lại cùng thiết kế cho một người nhận mới.
Nếu cần nhiều cách đặt nhãn hoặc màu cho cùng mẫu, xem Biến thể của template.
<h1>{{ props.heading }}</h1><p>{{ params.recipient }}</p>Tembuilder
Xem Cú pháp Handlebars để dùng điều kiện, scope, escape và các ví dụ nâng cao.