Mở admin
Admin TinaCMS là nơi sửa mọi nội dung: form bên trái, preview của trang bên phải. Giao diện admin bằng tiếng Việt; tên các mục và ô của site vẫn bằng tiếng Anh.
Địa chỉ admin
| Cách chạy | Địa chỉ admin | Bấm Lưu thì nội dung đi đâu |
|---|---|---|
pnpm dev trên máy | http://localhost:4321/admin/index.html | File trong content/ trên máy |
| Đưa lên mạng bằng TinaCloud | https://<tên miền>/admin/ | TinaCloud commit vào GitHub, rồi host build lại site |
| Xuất static | Không có admin trên mạng | Sửa trên máy, build lại rồi tải lên lại |
Các bước sửa
- Mở địa chỉ admin ở bảng trên.
- Lần đầu vào, bấm Vào chế độ chỉnh sửa.
- Chọn một mục ở thanh bên trái (ví dụ Pages), rồi chọn trang cần sửa.
- Form hiện bên trái, preview hiện bên phải.
- Bấm Lưu để lưu.
Mẹo
Bấm vào một dòng chữ trên preview thì form mở đúng ô đó.
Preview trong admin
Preview bên phải là bản /preview/… của trang (ví dụ /preview/gioi-thieu/), vẽ lại ngay khi gõ.
- Đổi trang đang sửa: chọn trang khác trong danh sách của admin. Khi thanh sửa đang mở, link trong preview không đưa sang trang khác.
- Bấm vào preview: khi thanh sửa đang mở, bấm vào chữ, nút, link hay menu là chọn ô tương ứng trong form chứ không bấm thật. Bấm Ẩn khung chỉnh sửa thì các nút chạy như trên trang thật.
- Đổi ngay trên preview: mọi section, thanh thông báo, header, footer, menu, Theme và Colour schemes.
- Không đổi ngay: tiêu đề tab và favicon; scheme hay menu mới tạo trong admin; mục SEO & Tracking. Những thứ này hiện sau lần build tiếp theo.
Cảnh báo
Ẩn một section không giữ kín được nội dung: trang /preview/… mang cả section đang ẩn và ai có đường dẫn cũng mở được. Đừng để chữ chưa được công bố trong section ẩn.
Admin xem thử
Bản build bằng pnpm build:review có một admin cho khách mở không cần đăng nhập. Nút Lưu bị một thanh cam "Bản xem thử: thay đổi sẽ không được lưu." che lại. Khách cứ sửa để xem preview đổi ra sao; không có gì được lưu, tải lại trang là về nội dung gốc.
Các mục trong admin
| Mục | Dùng để sửa | File |
|---|---|---|
| Theme | Tên thương hiệu, logo, favicon, font, cỡ chữ, góc bo, kiểu nút, khoảng cách, thông tin liên hệ, bật tắt bán hàng | content/theme.json |
| SEO & Tracking | SEO chung, mã xác minh, ID tracker, hỏi đồng ý của khách | content/seo.json |
| Colour schemes | Tám màu của mỗi bộ màu | content/schemes/ |
| Header & footer | Thanh thông báo, header và footer của từng ngôn ngữ | content/chrome/ |
| Menus | Các menu của từng ngôn ngữ | content/menus/ |
| Pages | Các trang, dựng từ section | content/pages/ |
Mẫu có blog thì có thêm Blog posts và Blog categories; mẫu bật bán hàng thì có Products và Product categories.