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:

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 for.

Step 2: Chọn menu templates bên danh mục bên trái màn hình

Step 3: Click vào 3 dot sign bên góc phải màn hình và chọn 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

2a. JS for widget

...........................

2b. CSS for widget

...........................