Skip to main content
On this page

Hướng dẫn Cấu hình Phân cột & Nhãn nổi (Badge) cho Menu Footer

Theme TanaFlows hỗ trợ cơ chế tự động chia cột và tạo nhãn nổi bật (Badge như: HOT, NEW, FREE) cho khu vực chân trang (Footer Menu) một cách tối giản từ trang quản trị Ghost Admin mà không cần sửa code.

1. Cơ chế quản lý Menu Footer trong Ghost

  • Menu Footer của theme được đồng bộ trực tiếp từ mục Secondary Navigation (Menu phụ) trong Ghost Admin.
  • Bạn sẽ vào Ghost Admin > Settings > Navigation và cuộn xuống phần Secondary Navigation để thực hiện cấu hình.

2. Cách tạo Cột và các Liên kết con trong Footer

Footer hỗ trợ chia thành nhiều cột liên kết song song. Bạn sử dụng quy ước đặt tên với dấu gạch ngang - để phân cấp cột và các liên kết con.

Quy tắc cấu hình:

  1. Tiêu đề cột (Column Title): Viết tên bình thường (không có dấu -). Theme sẽ tạo một cột mới và lấy nhãn này làm tiêu đề cột (chữ in đậm).
  2. Liên kết con (Column Link): Viết tên bắt đầu bằng dấu gạch ngang - (Ví dụ: - Tên liên kết). Các liên kết này sẽ được xếp vào cột tiêu đề nằm ngay phía trên chúng.
  3. Sắp xếp: Luôn đặt các Liên kết con nằm ngay phía dưới Tiêu đề cột tương ứng.

Ví dụ cấu hình thực tế trong Ghost Admin (Secondary Navigation):

  • Khám phá (Link: #) ← Tiêu đề Cột 1
  • - Về chúng tôi (Link: /about/) ← Liên kết con của Cột 1
  • - Liên hệ (Link: /contact/) ← Liên kết con của Cột 1
  • Tài nguyên (Link: #) ← Tiêu đề Cột 2 (Tạo cột mới bên cạnh)
  • - Khóa học (Link: /courses/) ← Liên kết con của Cột 2
  • - Ebook miễn phí (Link: /free-ebook/) ← Liên kết con của Cột 2

Kết quả hiển thị trên trang web:

Hệ thống tự động chia Footer thành 2 cột riêng biệt:

  • Cột 1 (Khám phá): Gồm 2 link con: Về chúng tôi và Liên hệ (dấu - được tự động ẩn đi).
  • Cột 2 (Tài nguyên): Gồm 2 link con: Khóa học và Ebook miễn phí.

3. Cách tạo Nhãn nổi bật (Badge) bên cạnh Menu Footer

Bạn cũng có thể thêm nhãn nổi bật như NEW, HOT, FREE cho cả Tiêu đề cột hoặc các Liên kết con ở chân trang để thu hút sự chú ý.

Quy tắc cấu hình:

Sử dụng ký tự gạch đứng | trong ô đặt tên Nhãn (Label) của Ghost Admin theo cấu trúc: Tên_Mục_Menu|Tên_Badge

Ví dụ thực tế trong Ghost Admin:

  • Với Tiêu đề cột: Khóa học|NEW
    • Hiển thị: Tiêu đề cột Khóa học in đậm và có badge NEW màu xanh nhỏ bên cạnh.
  • Với Liên kết con: - Template Notion|FREE
    • Hiển thị: Đường link Template Notion có badge FREE nhỏ bên cạnh.

4. Mẹo nâng cao: Tùy biến hiển thị Cột trên Thiết bị di động (Mobile)

Mặc định trên điện thoại di động, các cột liên kết ở Footer sẽ hiển thị song song thành 2 cột để tiết kiệm diện tích. Tuy nhiên, nếu bạn có nhiều cột hoặc muốn các cột quan trọng chiếm toàn bộ chiều ngang (1 cột full-width), bạn có thể dùng mẹo CSS sau:

Cách thực hiện:

  1. Vào Ghost Admin > Settings > Code Injection.

  2. Dán đoạn mã dưới đây vào ô Site Header:

    <style>
      @media screen and (max-width: 767px) {
        /* Ép Cột 2 và Cột 3 chiếm trọn 100% chiều ngang trên điện thoại */
        div#footer-col-2, div#footer-col-3 {
          grid-column: span 2 / span 2;
        }
      }
    </style>

Giải thích:

  • div#footer-col-2, div#footer-col-3: Là mã nhận diện (ID) của Cột 2 và Cột 3 trong Footer.
  • grid-column: span 2 / span 2: Ép cột đó kéo dài hết cả 2 phần của lưới (tương đương 100% chiều ngang).
  • Bạn có thể thay đổi số thứ tự cột (ví dụ div#footer-col-1, div#footer-col-4) tùy theo mong muốn hiển thị trên trang của mình.

5. Các lưu ý quan trọng

Thứ tự các liên kết con

Hãy đảm bảo các Liên kết con (bắt đầu bằng dấu -) luôn được xếp ngay dưới Tiêu đề cột tương ứng trong Ghost Admin. Nếu bạn để một Liên kết con lên đầu danh sách mà không có Tiêu đề cột ở trên, nó sẽ tự động tạo một cột trống không có tiêu đề.

Xem thay đổi

Sau khi bấm Save (Lưu) trong Ghost Admin, hãy tải lại trang web để xem sự thay đổi hiển thị ngay ở Footer.