...
- Chú ý: Đối với mỗi Widget/Content, khi tạo nên thêm field Site Or Folder vào, field này được sử dụng khi các widget được add vào site.
Step 5: Để thêm các mã code HTML, JS, CSS vào widget, chọn edit Widget Code
- Bạn có thể thêm trực tiếp mã HTML, JS, CSS vào phần Value như trong hình bên dưới. Nhưng chúng tôi không khuyến khích bạn sử dụng mã code trược tiếp ở đây, bởi vì nếu như widget có xảy ra sự cố gì chúng ta sẽ không có source backup, đồng thời nếu để mã code ở đây sẽ rất có để làm việc và quản lý.
- Một cách khác để chúng ta có thể chèn mã code ở đây là tạo một file VTL ở một thư mục khác (chúng tôi thường sử dụng thư mục SiteCommon để chứa các loại file như vầy), đường dẫn sẽ như #dotParse("$!{sitecommon_vtlpath}/widgets/demo.vtl"), với $!{sitecommon_vtlpath} là đường dẫn tới SiteCommon (biến này được định nghĩa tại file template.vtl), file được sử dụng là demo.vtl
Step 6: Tạo file demo.vtl trong SiteCommon
- Chọn Project SiteCommon → widgets
- Tạo một file và đặt tên là demo.vtl, sau đó upload file này từ máy tính vào thư mục trên
- Các mã code chúng ta có thể viết tại đây. Để gọi các field chúng ta đã thêm vào ở trong widget, chúng ta có thể dùng các lệnh sau:
- $!{con.title} : In giá trị của biến title (có kiểm tra null)
- $con.title: gọi biến title lên và sử dụng
2a. JS for widget
...........................
...........................
...........................
2b. CSS for widget
...........................
...........................
...........................Để thêm js vào trong Widget, chúng ta nên viết ở một file riêng, sau đó đưa file này lên Cloud và thêm vào như trong hình ở trên
2b. CSS for widget
Làm tương tự như thêm JS