Skip to main content
On this page

Hướng dẫn Thiết lập Khóa học với Template custom-course & Tag

Theme TanaFlows tích hợp sẵn hệ thống quản lý học tập (LMS) mượt mà dạng Ứng dụng một trang (SPA). Bạn có thể biến bất kỳ bài viết hoặc trang đơn thông thường nào thành một giao diện học tập chuyên nghiệp bao gồm:

  • Thanh bên trái (Sidebar): Hiển thị danh sách các chương mục, bài học và tự động đánh dấu bài học đang xem.
  • Khu vực hiển thị bên phải: Trình phát video (nếu học bằng video) hoặc hiển thị nội dung bài viết và phần bình luận thảo luận.

Bên cạnh các khóa học bằng video (YouTube, Vimeo, Bunny…), theme hỗ trợ tag đặc biệt #textcourse để phục vụ riêng cho các khóa học dạng tài liệu, bài viết đọc hiểu (không có video).

1. Cách thiết lập Giao diện Khóa học cơ bản

Để bắt đầu thiết lập một khóa học (gọi là trang Hub):

  1. Tạo một Page (Trang) hoặc Post (Bài viết) mới trong Ghost Admin.
  2. Mở cài đặt trang (Page/Post settings), tìm đến phần Template và chọn: custom-course.
  3. Xuất bản trang Hub này.

2. Cách khai báo Danh sách Chương mục & Bài học

Để vẽ danh sách bài học ở thanh Sidebar bên trái, bạn cần chuẩn bị danh sách các bài học dưới dạng cấu trúc mã và dán vào nội dung trang Hub:

  1. Trong trang soạn thảo Ghost Editor của trang Hub, bấm dấu + và chọn khối HTML.

  2. Dán đoạn mã cấu trúc danh sách bài học vào:

    <script>
      window.lessons = [
        {
          "groupTitle": "CHƯƠNG 1: GIỚI THIỆU CHUNG",
          "lessons": [
            {
              "title": "Bài 1: Tổng quan về Tana bộ não số",
              "videoUrl": "tong-quan-tana-bo-nao-so" // Nhập slug của bài viết/trang chứa nội dung bài 1
            },
            {
              "title": "Bài 2: Hướng dẫn cài đặt ban đầu",
              "videoUrl": "cai-dat-tana-ban-dau" // Nhập slug của bài viết/trang chứa nội dung bài 2
            }
          ]
        },
        {
          "groupTitle": "CHƯƠNG 2: KỸ THUẬT NÂNG CAO",
          "lessons": [
            {
              "title": "Bài 3: Cách liên kết Node thông minh",
              "videoUrl": "lien-ket-node-thong-minh"
            }
          ]
        }
      ];
    </script>
  • groupTitle: Tên của chương học.
  • title: Tên hiển thị của từng bài học trên Sidebar.
  • videoUrl: Điền chính xác đường dẫn rút gọn (slug) của bài viết chứa nội dung chi tiết của bài học đó trên website Ghost của bạn.

3. Cách kích hoạt Chế độ Chỉ đọc Văn bản (#textcourse)

Đối với các khóa học không sử dụng video (khóa học qua email, cẩm nang tài liệu, khóa học viết lách…), trình phát video mặc định sẽ tạo ra một khoảng trống màu đen không cần thiết.

Để chuyển khóa học sang chế độ chỉ đọc văn bản, triệt tiêu hoàn toàn trình phát video:

  1. Mở trang Hub của khóa học trong Ghost Admin.
  2. Vào phần cài đặt bài viết, tìm mục Tags và thêm tag nội bộ: #textcourse (phải có dấu #).
  3. Bấm Update (Cập nhật).

Cơ chế hoạt động của tag #textcourse

  • Ẩn trình phát video: Giao diện bên phải sẽ chỉ tập trung hiển thị tiêu đề và nội dung bài viết, loại bỏ hoàn toàn các khung trình phát video trống (YouTube, Vimeo…).
  • Thay đổi nút hành động: Thay vì nút “Bắt đầu xem video”, ở trang giới thiệu sẽ hiển thị nút “Đọc tiếp” để học viên bấm vào bài học đầu tiên.
  • Trải nghiệm mượt mà: Khi học viên bấm chuyển giữa các bài học trên thanh Sidebar, nội dung văn bản mới sẽ được nạp động và cuộn lên đầu trang một cách mượt mà và tức thì.

4. Các lưu ý quan trọng khi soạn thảo bài học

Thiết lập bài học

Các bài học chi tiết (nêu trong danh sách window.lessons) phải được tạo sẵn dưới dạng Post (Bài viết) hoặc Page (Trang) trên Ghost.

Quyền truy cập

Bạn có thể để các bài học này ở trạng thái công khai hoặc khóa thành viên (Members-only). Nếu khóa thành viên, khi học viên chưa đăng nhập bấm vào bài học, hệ thống sẽ hiển thị form yêu cầu đăng nhập/đăng ký.

Lưu tiến trình tự động

Tiến độ học tập của học viên (bài học đang xem dở) sẽ được lưu tự động trên trình duyệt của họ, giúp họ tiếp tục học chính xác bài đang học dở khi quay trở lại.