Màu, font và menu

Màu nằm trong Colour schemes, font và cỡ chữ trong Theme, menu trong Menus. Ba mục này đổi giao diện cả site mà không cần sửa code.

Đổi màu

Vào Colour schemes, mở bộ màu cần đổi. Mỗi bộ có tám màu:

content/schemes/base.json

{
  "name": "base",
  "background": "#ffffff",
  "surface": "#f5f4f8",
  "text": "#18161f",
  "textMuted": "#5a5766",
  "accent": "#4f2db8",
  "buttonBg": "#4f2db8",
  "buttonText": "#ffffff",
  "border": "#e2dfe9"
}

Sau khi sửa, chạy pnpm contrast để chắc chữ vẫn đọc được: lệnh kiểm chữ trên nền, chữ trên nút và viền ô nhập của mọi bộ màu.

Cảnh báo

Ba bộ màu base, soft và inverse phải luôn có; đừng xoá. Section không chọn bộ màu thì dùng base.

Màu của một section

Muốn một section khác màu, chọn bộ màu khác ở ô Colour scheme của section đó.

Đổi font và cỡ chữ

Vào Theme. Heading font và Body font: gõ tên một font trên fonts.google.com có hỗ trợ tiếng Việt, đúng chính tả (ví dụ Lora, Be Vietnam Pro); mô tả dưới ô liệt kê các font đã dùng thử.

Extra weights và Width (wdth axis) ngay dưới mỗi ô font: tải thêm độ đậm (400, 600, 700 luôn được tải) hay độ rộng cho font có trục này.
Base text size từ 12 đến 24 px, Type scale ratio từ 1.05 đến 1.6 (gợi ý 1.125, 1.2, 1.25 hoặc 1.333).
Button style "Outline" đổi mọi nút sang dạng viền.
Favicon: tải ảnh vuông lên để thay biểu tượng tab tự sinh từ chữ cái đầu tên thương hiệu.

Nguy hiểm

Chỉ chọn độ đậm và độ rộng mà font đó có trên fonts.google.com. Xin một thứ font không có thì mất cả font đó: chữ quay về font dự phòng.

Đổi tên thương hiệu

Vào Theme → Brand → Business name. Tên này hiện ở header, footer và tiêu đề tab; tên viết trong chữ của các trang thì sửa ở từng trang, cho cả hai ngôn ngữ.

Vào Menus → vi/main hoặc vi/footer (rồi bản en). Mỗi mục có Label, Liên kết và tối đa một cấp Children. Header và cột link của footer chọn menu bằng tên file (main, footer) ở ô Menu.

Link tới một trang của site viết dạng /gioi-thieu; site tự thêm /en cho bản tiếng Anh và dấu / ở cuối.

Đổi màu

Màu của một section

Đổi font và cỡ chữ

Đổi tên thương hiệu

Sửa menu