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.
2a. JS for widget
...........................
...........................
...........................
2b. CSS for widget
...........................
...........................
...........................
0 Comments