This document describe best practice when create new page / template / widget in DOTCMS. It contain 3 part of building a page:
...
2. Campaign Webkey: Used for Index - Pre-sale & Order page (most important). To declare webkey which is used to get price from CRM
3. Campaign Name: enter campaign name of entered webkey for better management. DONT LEAVE THIS BLANK if you already entered webkey.
4. GTM: Leave this blank if this page inherit GTM key of the site.
Click Save to initiate page.
...
3. Find and select [SiteComment]AddstaticFileWidget, các static file đã được sử dụng trước đó sẽ hiện ra bên phải, nếu file muốn add đã tồn tại rồi, chỉ cần tìm và chọn select, file đó sẽ được add vào page (chú ý: đối với những widget không có [common] ở đầu câu thì không nên reuse lại những project của khác để sử dụng). Nếu static file này chưa tồn tại, chúng ta có thể bấm vào Create New để tạo mới
4. Điền các thông tin cần thiết để tạo widget
- Widget Title: Nhập vào title cho widget. Chú ý: để cho để dàng tìm kiếm widget sau này, nên replace tất cả khoảng trắng hoặc dấu - thành dấu _ . Quy tắc này nên được app dụng cho việc tạo content và widget.
- File Type: Chọn Javascript
- URL: chọn đường dẫn chứa file js, như lúc nãy chúng ta upload file demo.js lên thư mục /src/js/, do đó ngay tại vị trí này sẽ dùng là /src/js/static files which already used before will appeared on right column. (Important Note: Do not reuse widget with [Common] Prefix.). Click on Create New to create new widget to declare JS File.
4. Enter Needed information
- Widget Title: Only use Alphabet in Normal Case & "_" character.
- File Type: Javascript
- URL: select js path. Ex: /src/js/demo.js
- Type: Trong mục này có nhiều option, thường sử dụng nhất là Lib và Page (đối với những js mà chỉ dùng riêng cho trang này thì chúng ta nên chọn là Page. Không nên chọn None ở mục này, nếu không khi build sẽ bị lỗi)Should choose Lib & Page
- Site or Folder: Default là project đang selectCurrent Site Folder
- Click Save / Publish để hoàn thành.- Widget sau khi add sẽ hiện như bên dướiPublish
Các sử dụng CSS cho page (ở đây chúng ta sử dụng file .less để style cho trang):
...
- How to Declare CSS for this page
Go to Application/themes/pages and create a less file with this template: [pagetitle]-en.page.less.
Ví dụ như title của page là demo thì lúc này file .less sẽ phải có tên là demo-en.page.less.
Nếu như không sử dụng đúng format, chúng ta sẽ không sử dụng được file .less này, và khi build lên test sẽ bị lỗi. Do đó file này là bắt buộc phải tạo
Trong trường hợp có những đoạn CSS dùng riêng và bạn không muốn nó nằm trong file .less trên, bạn có thể tạo file này tại /src/less/ten_file.less và thực hiện các thao tác giống như khi tạo widget để thêm file này vào page(page title of the page you want to use this CSS file demo below:
Is case you wanna help separate css file, you can do the same as how to declare JS file for page.
3. Create & Add Widget
- Go to menu Types & Tag → Content Types
...