Page Comparison

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.

Image Modified

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

Image Modified

Step 3: Click vào 3 dot sign bên góc phải màn hình và chọn Add Template Designer

Image Modified

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

Image Modified

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.

Image Modified

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.

Image Modified

Để 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

Image Modified