This document describe best practice when create new page / template / widget in DOTCMS. It contain 4 part of building a page:
- Template
- Widget
- JS
- CSS
1. Create Template
The purpose of this is define containers within a template (how many Row your template has? How many column of each row?....)
Step 1: Go to the site that you want to create template.
Step 2: Go to Template tab at Left Menu
Step 3: Click Option Button at top right of your screen and select Add Template Designer
Step 4:
- Điền vào ô Template Title tên của template
- Chọn theme mà template này sử dụng (nhớ chọn đúng project mà lúc nãy đã select)
- Header và Footer là 2 tùy chọn, nếu trong template không sử dụng header và footer chung (ví dụ như logo và số điện thoại trên header, menu ở footer) thì nên uncheck 2 tùy chọn này.
- Mặc định khi tạo template sẽ có 1 Row được add sẵn, để thêm các Row khác thì bấm vào nút Add Row
Ví dụ như trong hình dưới, chúng ta thêm vào 3 row mới. Ứng với mỗi row có thể chọn cách phân chua column khác nhau, default là 1 column, nếu muốn row đó có 2 column thì chọn option 2 column (50/50 hoặc 75/25). Mỗi row sau khi được thêm thì giữa màn hình sẽ có thêm 1 ô màu xanh.
- Sau khi add row xong, chúng ta cần add Container vào mỗi row. Click Add Container trên row muốn thêm. Box Select container hiện ra. Ở ô container, bạn chỉ nên chọn [SiteCommon]LargeColumn(100%) - 1, [SiteCommon]LargeColumn(100%) - 2, [SiteCommon]LargeColumn(100%) - 3, .... [SiteCommon]LargeColumn(100%) - 20, [SiteCommon]HeadTag, [SiteCommon]FootTag. Đây là những container thường hay sử dụng nhất.
- Để xóa một container đã add, click vào Remove Container. Template sau khi đã hoàn thành sẽ có giao diện như hình bên dưới. Click Save and Publish để lưu template lại
Vào Project Basesite2 → Templates → demo_template để tham khảo thêm
2. Create & Add Widget
Step 1: Click menu Types & Tag → Content Types bên trái màn hình
Giao diện quản lý Content type và widget sẽ hiện ra như bên dưới
Step 2: Click vào button góc trên màn hình và chọn Add New Content Type
Step 3: Điền các thông tin cần thiết để tạo widget
- Type: chọn Widget
- Name: Điền tên của widget muốn tạo
- Description: mô tả cho widget
- Site or Folder: Nên chọn là SiteCommon (tất cả các widget của mình đều được đặt ở SiteCommon)
- Bấm Save sau khi đã điều đủ thông tin
- Sau khi tạo xong widget, giao diện sẽ nhìn giống như bên dưới
Step 4: Để thêm mới một field trong widget, bấm vào nút Add New Field bên góc phải
- Điền một số thông tin cho field này, đầu tiên chọn Type cho field như hình bên dưới.
- Ví dụ chọn Type là Text, các thông tin cần thiết dùng cho field này sẽ xuất hiện như bên dưới. Bấm Save Field để hoàn thành.
- 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
Để 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
0 Comments