DOTCMS Page Build Best Practice

This document describe best practice when create new page / template / widget in DOTCMS. It contain 4 part of building a page:

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:

Enter your new template title
Select Theme in correct project (your current project). Theme is included header & footer & standard scripts such as GTM, Everflow....
IF you dont want to inherit Header & Footer from the site (such as Presale & Index page), you can uncheck Header & Footer checkbox.
There is one row has been created by default. Add more row if you want by click on "add row"

As below screenshot, 3 more rows have been added. You can choose how many column of each row. .

After added rows, please add Container to each row, otherwise you cant add content/widget to that row / column.
Please only choose 1 container among below list of common container:
- [SiteCommon]LargeColumn(100%) - 1,
- [SiteCommon]LargeColumn(100%) - 2,
- [SiteCommon]LargeColumn(100%) - 3,
- ....
- [SiteCommon]LargeColumn(100%) - 20,
- [SiteCommon]HeadTag,
- [SiteCommon]FootTag
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.

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

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

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