Dưới đây là hướng dẫn đầy đủ và chi tiết về cách cấu hình, sử dụng và cơ chế vận hành của Gallery Layout (Bento Grid kết hợp Video Modal) trong theme TanaFlows.

Hướng Dẫn Sử Dụng & Vận Hành Gallery Layout

Gallery Layout (tệp gallery-layout.hbs) là một mẫu trang (Page Template) cao cấp của TanaFlows, thiết kế theo phong cách Bento Grid hiện đại. Nó cho phép hiển thị danh sách bài viết dưới dạng các ô lưới lớn - nhỏ xen kẽ đẹp mắt, đồng thời hỗ trợ phát video (YouTube, Vimeo, MP4) trực tiếp thông qua một cửa sổ nổi (Modal) tích hợp thư viện Plyr.js siêu nhẹ.

1. Cách Cấu Hình Trang Gallery trên Ghost Admin

Bạn có thể áp dụng Gallery Layout cho trang của mình theo hai cách:

Cách 1: Tạo một trang tĩnh (Khuyên dùng - Đơn giản nhất)

1. Truy cập Ghost Admin -> Pages -> Click New Page.
2. Đặt tiêu đề cho trang (Ví dụ: Thư viện Video, Gallery, v.v.).
3. Ở cột cấu hình bên phải (Page Settings):
   • Tại mục Template, chọn Gallery Layout (mặc định Ghost sẽ nhận diện từ file gallery-layout.hbs).
4. Click Publish để xuất bản trang.

Cách 2: Định nghĩa qua tệp routes.yaml (Dành cho nhà phát triển)

Nếu bạn muốn trang Gallery này làm trang chủ hoặc một chuyên mục tin tức riêng biệt (Collection) phân trang:

1. Tải tệp routes.yaml từ Ghost Admin về máy.
2. Định nghĩa route mới sử dụng template gallery-layout:

   routes:
     /gallery/:
       controller: channel
       template: gallery-layout
       data: page.gallery # nếu bạn muốn gắn dữ liệu từ 1 page tĩnh

3. Upload lại tệp routes.yaml lên Ghost Admin.

2. Cách Viết Bài để Kích Hoạt Trình Phát Video

Để một bài viết xuất hiện nút “Play video” và chạy được video trên trang Gallery, bạn thực hiện các bước sau trong Ghost Editor:

1. Thêm ảnh đại diện (Feature Image): Đăng tải một ảnh bìa chất lượng cao cho bài viết.
2. Nhúng liên kết video vào Alt Text:
   • Click vào ảnh đại diện vừa đăng, chọn biểu tượng Alt (hoặc nút viết caption/alt của ảnh).
   • Nhập liên kết video của bạn vào đó.
   • Các định dạng URL được hỗ trợ:
     • YouTube: https://www.youtube.com/watch?v=xxxxxx hoặc https://youtu.be/xxxxxx
     • Vimeo: https://vimeo.com/xxxxxx
     • Video trực tiếp (Direct MP4/WebM): https://domain.com/video.mp4

3. Cơ Chế Hoạt Động của Bento Card

Mỗi bài viết hiển thị trên trang thông qua thành phần bento-card.hbs:

• Bố cục Bento Grid: Tự động sắp xếp các thẻ theo tỷ lệ xen kẽ: thẻ đầu tiên lớn (chiếm 2 cột, tỷ lệ 16:9), các thẻ sau nhỏ hơn (chiếm 1 cột), tạo hiệu ứng thị giác b Bento cao cấp.
• Hiệu ứng Hover: Tiêu đề bài viết và mô tả ngắn (excerpt) được ẩn đi và chỉ trượt lên nhẹ nhàng kèm hiệu ứng làm tối nền khi người dùng rê chuột qua card.
• Chế độ Hover Play (Chỉ áp dụng với Direct Video MP4):
  • Khi bạn hover vào một card chứa link video MP4 trực tiếp, card sẽ tự động kích hoạt thẻ <video> ẩn để phát video không tiếng (muted) thay thế cho ảnh nền tĩnh.
  • Rê chuột ra ngoài sẽ lập tức hủy bỏ thẻ <video> này để tránh ngốn RAM.
• Nút Phát Video (Play Button):
  • Một nút phát dạng Glassmorphic màu xanh thương hiệu sẽ nổi ở góc card (trên mobile) hoặc chính giữa card (trên desktop).
  • Click vào nút Play: Sẽ mở Video Modal để xem trực tiếp.
  • Click vào vùng khác của Card: Sẽ chuyển hướng người dùng đến trang đọc bài viết chi tiết ({{url}}).

4. Cơ Chế Hoạt Động của Video Playback Modal

Khi click nút Play, cửa sổ Modal toàn màn hình sẽ xuất hiện với các tính năng:

1. Tự động tải trình phát Plyr chuyên dụng: Modal sẽ lazy load thư viện Plyr cho video YouTube/Vimeo/MP4 giúp giao diện đồng bộ, hiển thị thanh điều khiển đẹp mắt thay vì dùng trình phát mặc định của trình duyệt.
2. Hiển thị thông tin đầy đủ bên dưới video:
   • Tiêu đề bài viết: Định dạng chữ to, đậm, màu trắng nổi bật trên nền đen của modal.
   • Mô tả ngắn đầy đủ (Excerpt): Hiển thị đoạn tóm tắt bài viết (tối đa 80 từ) giúp người xem nắm được nội dung chính mà không cần bấm chuyển trang.
3. Nút hành động “Đọc bài viết”: Căn giữa hoàn hảo bên dưới mô tả, bo tròn tinh tế và có hiệu ứng mũi tên dịch chuyển nhẹ khi hover, giúp dẫn dắt người xem click vào trang chi tiết để đọc nội dung đầy đủ.
4. Giải phóng tài nguyên (Memory Cleanup): Khi bạn đóng modal bằng cách click nút X, click ra ngoài vùng đen, hoặc nhấn phím Escape:
   • Trình phát Plyr sẽ chạy hàm .destroy() để xóa sạch tiến trình chạy ngầm.
   • Toàn bộ DOM bên trong vùng chứa video sẽ bị dọn dẹp bằng innerHTML = '' để tối ưu RAM và GPU cho thiết bị.