Skip to main content
On this page

Hướng dẫn Sử dụng Template Trang trống (Blank Page)

Giao diện custom-blank.hbs là một template trang trống hoàn toàn được tích hợp sẵn trong theme TanaFlows.

Khi sử dụng template này, trang của bạn sẽ loại bỏ hoàn toàn các thành phần điều hướng mặc định của website như: Thanh menu (Header), Chân trang (Footer), hay các cột căn lề mặc định.

1. Mục đích sử dụng Trang trống (Blank Page)

Template trang trống là công cụ đắc lực khi bạn muốn:

  • Tự thiết kế Landing Page đặc biệt: Bạn có mã HTML/CSS/JS tự viết hoặc xuất ra từ các công cụ thiết kế ngoài (như Webflow, Canva, Carrd, LadiPage…) và muốn nhúng thẳng vào website.
  • Trang cá nhân độc lập (Biolink / Portfolio): Bạn muốn tự thiết kế một trang danh thiếp cá nhân độc đáo hoàn toàn theo phong cách riêng.
  • Trang thông báo / Bảo trì: Tạo trang thông báo đơn giản, không có menu gây xao nhãng.
  • Trang nhúng biểu mẫu (Form đăng ký): Hiển thị một form khảo sát toàn màn hình.

2. Cách thiết lập Trang trống trong Ghost Admin

Để áp dụng giao diện trang trống cho một trang cụ thể:

  1. Vào Ghost Admin > Pages > bấm New Page (hoặc tạo Post mới).
  2. Mở cài đặt trang (biểu tượng bánh răng ở góc trên bên phải):
    • Tìm mục Template và chọn: custom-blank.
  3. Bấm Publish (Xuất bản) trang này.

3. Cách soạn thảo nội dung trên Trang trống

Vì trang này trống hoàn toàn, bạn có 2 cách để đưa nội dung hiển thị lên trang:

Cách 1: Sử dụng khối HTML Card (Khuyên dùng cho mã thiết kế riêng)

Nếu bạn đã chuẩn bị sẵn mã HTML/CSS cho trang của mình:

  1. Trong trình soạn thảo Ghost Editor, bấm dấu + và chọn khối HTML.

  2. Dán toàn bộ mã nguồn HTML và thẻ <style> trang trí của bạn vào khối này:

    <style>
      .my-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        text-align: center;
      }
      .my-title {
        font-size: 3rem;
        margin-bottom: 1rem;
      }
      .my-btn {
        background-color: white;
        color: #764ba2;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
        text-decoration: none;
        font-weight: bold;
      }
    </style>
    

    <div class="my-container">
      <h1 class="my-title">Sắp ra mắt sản phẩm mới!</h1>
      <p>Đăng ký nhận tin để trở thành những người đầu tiên trải nghiệm.</p>
      <a href="https://tanaflows.com" class="my-btn">Ghé thăm TanaFlows</a>
    </div>

  3. Cập nhật lại trang để xem kết quả hiển thị toàn màn hình.

Cách 2: Sử dụng trình soạn thảo mặc định của Ghost

Bạn vẫn có thể viết chữ, chèn ảnh, nhúng video bằng các khối mặc định của Ghost Editor. Tuy nhiên:

  • Nội dung sẽ hiển thị tràn sát lề (vì không có khung container căn lề của theme).
  • Mẹo: Bạn nên chèn thêm một khối HTML Card ở đầu bài viết để bổ sung căn lề bằng CSS cho nội dung dễ đọc hơn:
    <style>
      body {
        max-width: 800px;
        margin: 0 auto;
        padding: 2rem 1rem;
      }
    </style>

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

Đảm bảo chức năng SEO

Dù trang trống hoàn toàn về mặt giao diện hiển thị, theme vẫn tự động nạp các mã SEO Meta cần thiết ({{ghost_head}} và {{ghost_foot}}). Do đó, các thẻ Meta title, Meta description, Facebook OpenGraph, Twitter Cards cấu hình trong Ghost Admin vẫn hoạt động bình thường 100%.

Mã theo dõi

Các đoạn mã theo dõi (Google Analytics, Pixels) chèn trong mục Code Injection của Ghost Admin vẫn tự động hoạt động bình thường trên các trang áp dụng template custom-blank.