Đến nội dung chính
CafeJS Docs

Trang và section

Mỗi trang là một danh sách section: thêm, xoá, kéo đổi thứ tự được. Mỗi section có độ rộng, khoảng cách và bộ màu riêng.

Section có sẵn

Banner, Image with text, Rich text, Columns, Rows of image and text, Photo collage, Photo gallery, Testimonials, Questions and answers, Call to action, Price list, Team, Contact and opening hours, Form (contact / booking), Booking (calendar request) và Blog posts. Khi bật bán hàng có thêm Product categories, Products, Product details và Cart.

Section mới thêm có sẵn chữ và ảnh mẫu để thấy ngay trên preview; thay bằng nội dung thật.

Bốn ô chung của mọi section

  • Layout: độ rộng (Narrow, Normal, Wide, Full bleed) và khoảng cách trên, dưới tính bằng px. Để trống là theo Theme.
  • Colour scheme: chọn bộ màu cho section; để trống là bộ base.
  • Anchor (for #links): tên để link thẳng tới section, ví dụ dat-lich thì link là #dat-lich.
  • Hide this section: ẩn section mà không xoá.

Lưu ý

Hai section trên cùng một trang không nên dùng chung một anchor: link #anchor chỉ tới được section đầu tiên.

Thêm trang mới

  1. Trong Pages, mở thư mục vi rồi bấm Tạo mới và gõ tiêu đề. Tên file (cũng là đường dẫn) tự sinh không dấu, ví dụ "Giới thiệu" thành gioi-thieu.
  2. Tạo bản tiếng Anh trong thư mục en, sửa tên file cho trùng với bản vi.
  3. Thêm link vào Menus của từng ngôn ngữ.

Trang tạo ở ngoài thư mục ngôn ngữ thì tự vào vi/. Khi chạy pnpm dev, trang mới hiện ngay trong preview; trên bản đã đưa lên mạng thì sau lần build tiếp theo.

Trang lồng nhau

Trang nằm trong thư mục con (ví dụ dich-vu/nieng-rang) có breadcrumb ở đầu trang, với các trang phía trên nó.

Ba phần này sửa ở Header & footer, mỗi ngôn ngữ một bản. Chúng cũng có ô Anchor và Hide this section. Footer có thêm hai tuỳ chọn, mặc định tắt: nút Lên đầu trang và Giant name, tên thương hiệu viết rất to kéo hết bề ngang ngay trên dòng bản quyền.

Mẹo

Muốn xem mọi section và kiểu của nó trước khi chọn, mở /design.