Cấu trúc thư mục

Nội dung nằm trong content/, code của site trong src/, cấu hình admin trong tina/. Biết ba thư mục này là đủ để bắt đầu.

Toàn cảnh

Thư mục gốc của mẫu

content/            Nội dung, mỗi ngôn ngữ một bản (vi, en)
  pages/vi/, en/      Các trang
  menus/              Menu header và footer
  chrome/             Header, footer, thanh thông báo
  schemes/            Các bộ màu
  theme.json          Tên thương hiệu, logo, font, thông tin liên hệ
  seo.json            SEO chung và tracker
public/
  uploads/            Ảnh của site (admin tải ảnh lên đây)
  samples/            Ảnh mẫu của bộ khung
  variants/           Bản ảnh nhỏ cho điện thoại (sinh bằng pnpm images)
src/
  pages/              Route: trang công khai, bản tiếng Anh, sitemap, robots.txt
  sections/           Mỗi section một thư mục
  components/         Thành phần dùng chung
  layouts/  lib/  styles/
tina/
  config.ts           Cấu hình admin
  collections/        Các mục trong admin và các ô của chúng
  tina-lock.json      Schema của admin; TinaCloud đọc file này, luôn commit
spec/                 Mô tả bằng lời cách từng section hoạt động
scripts/              Script kiểm tra và test
vendor/               Các gói TinaCMS đã chỉnh sửa
dist/                 Kết quả build (sinh ra, không commit)

Thư mục con trong content/ tuỳ mẫu: mẫu có blog thì có posts/, mẫu có cửa hàng thì có products/ và categories/.

Hai bản của một trang

Cùng tên file trong vi/ và en/ là hai bản dịch của nhau: content/pages/vi/gioi-thieu.json là /gioi-thieu/, content/pages/en/gioi-thieu.json là /en/gioi-thieu/. File home.json là trang chủ của ngôn ngữ đó. Nút đổi ngôn ngữ dựa vào tên file để tìm bản tương ứng.

Một section trong src/sections

Thư mục một section

src/sections/<tên>/
  schema.ts       Các ô của section trong admin
  <Tên>.tsx       Giao diện (React, dựng thành HTML lúc build)
  <tên>.css       Kiểu của riêng section
  client.ts       Hành vi trên trình duyệt, nếu cần
  examples.json   Dữ liệu mẫu cho trang /design

Lưu ý

Thêm hay đổi tên một thư mục section thì chạy pnpm registry để cập nhật danh sách section. Đừng sửa tay các file registry.ts, registry.react.ts và sections.css.

Ảnh

Ảnh của site nằm trong public/uploads/ và được gọi bằng đường dẫn /uploads/…. Bản thu nhỏ cho điện thoại nằm trong public/variants/, do lệnh pnpm images sinh ra (xem 2.3 Ảnh).