Tutorial 2x Tạo trang tùy chỉnh (About Us, Rules...) bằng Page Node trong XenForo 2.3

[PVS]

Tạo trang tùy chỉnh (About Us, Rules...) bằng Page Node trong XenForo 2.3

Mọi diễn đàn không chỉ có các cuộc thảo luận. Để trở nên chuyên nghiệp, bạn cần có những trang nội dung tĩnh để giới thiệu về cộng đồng, công bố nội quy, hay cung cấp thông tin liên hệ. Nhiều người nghĩ rằng phải cần đến các add-on phức tạp, nhưng thực tế XenForo đã cung cấp một công cụ cực kỳ mạnh mẽ và linh hoạt để làm việc này: Page Node.

Page Node là một loại "chuyên mục" đặc biệt, thay vì chứa các chủ đề, nó hiển thị nội dung HTML tùy chỉnh do chính bạn tạo ra. Bài viết này sẽ hướng dẫn bạn từng bước cách tạo một trang "Về chúng tôi" (About Us) hoàn chỉnh và đưa nó lên thanh điều hướng chính của diễn đàn.

Bước 1: Tạo và cấu hình Page Node​

Chúng ta sẽ đi qua từng mục trên trang "Add page" để bạn hiểu rõ chức năng của chúng.

1. Truy cập AdminCP > Forums > Nodes.
2. Nhấp vào nút + Add node.
3. Chọn loại node là Page.

Bây giờ bạn sẽ thấy một trang cấu hình duy nhất. Hãy điền các thông tin theo thứ tự:

• Title: Tiêu đề của trang (ví dụ: Về chúng tôi).
• URL portion: Phần URL thân thiện (ví dụ: ve-chung-toi).
• Description: Mô tả ngắn, sẽ hiển thị dưới tiêu đề trang.
• Parent Node: Chọn vị trí của trang trong cây cấu trúc node. Chọn (None) nếu muốn nó là một trang độc lập.
• Display order: Sắp xếp thứ tự hiển thị của nó.
• Display in the node list:Đây là một tùy chọn quan trọng.
  • Tick vào ô này: Nếu bạn muốn trang này xuất hiện trên trang chủ diễn đàn, giống như một chuyên mục bình thường.
  • Bỏ tick: Nếu bạn muốn tạo một trang ẩn và chỉ liên kết đến nó từ nơi khác (ví dụ: từ thanh menu chính).
• Navigation section: Chọn tab menu chính nào sẽ được đánh dấu là "active" khi người dùng xem trang này. Thường thì để Default (Forums) là hợp lý.
• Template HTML: Đây là nơi bạn nhập toàn bộ nội dung của trang. Khung soạn thảo này hỗ trợ HTML đầy đủ.
  Ví dụ về một trang "Về chúng tôi":
  

  <div class="block-container">
      <div class="block-body block-row">
          <h3>Chào mừng đến với Diễn đàn ABC!</h3>
          <p>Chúng tôi là cộng đồng những người đam mê [chủ đề của bạn], được thành lập vào năm 2025. Mục tiêu của chúng tôi là tạo ra một sân chơi lành mạnh, nơi mọi người có thể học hỏi, chia sẻ kinh nghiệm và kết nối với nhau.</p>
          <h4>Giá trị cốt lõi của chúng tôi:</h4>
          <ul>
              <li>Tôn trọng & Lịch sự</li>
              <li>Chia sẻ & Học hỏi</li>
              <li>Sáng tạo & Đổi mới</li>
          </ul>
          <p>Hãy thoải mái tham gia và trở thành một phần của cộng đồng!</p>
      </div>
  </div>

• Optional components: Tick vào Log and count visits to this page để theo dõi lượt xem cho trang này.
• PHP callback / Advanced mode: Các tùy chọn nâng cao dành cho lập trình viên, người dùng thông thường nên bỏ qua.

Sau khi điền xong, hãy nhấp Save.

Bước 2: Đưa trang lên thanh điều hướng chính (Navigation)​

Nếu bạn đã bỏ tick ở mục Display in the node list, bạn sẽ cần thêm trang này vào menu chính để người dùng có thể truy cập.

1. Truy cập AdminCP > Setup > Public navigation.
2. Nhấp + Add navigation entry.
3. Điền các thông tin sau:
   • Navigation ID: Đặt một ID duy nhất, không dấu (ví dụ: about_us).
   • Title: Tên sẽ hiển thị trên menu (ví dụ: Về chúng tôi).
   • Type: Chọn Basic.
   • Link: Nhập theo cú pháp sau, thay url-portion bằng phần URL bạn đã đặt ở Bước 1: {{ link('pages/url-portion') }}.
     Ví dụ: {{ link('pages/ve-chung-toi') }}
4. Nhấp Save và kéo thả để sắp xếp lại vị trí trên menu.

Thủ thuật nâng cao: Sử dụng Template riêng​

Khi nội dung trang của bạn phức tạp, việc sửa code trong một khung nhỏ sẽ rất bất tiện. Cách làm chuyên nghiệp hơn là:

1. Tạo một template riêng tại AdminCP > Appearance > Style bạn đang sử dụng > Templates > + Add template (ví dụ: _page_about_us).
2. Soạn thảo toàn bộ nội dung HTML của bạn trong template này.
3. Quay lại cấu hình Page Node, trong mục Template HTML, xóa hết nội dung và chỉ chèn một dòng duy nhất:
   

   <xf:include template="_page_about_us" />

Lợi ích: Cách làm này giúp bạn quản lý code dễ dàng hơn và giữ cho cấu hình node luôn gọn gàng.

Kết luận​

Hệ thống Page Node của XenForo là một công cụ mạnh mẽ và linh hoạt. Bằng cách hiểu rõ các tùy chọn trên trang cấu hình, bạn có thể tạo ra các trang nội dung tĩnh một cách nhanh chóng và chuyên nghiệp, dễ dàng xây dựng một cấu trúc website hoàn chỉnh cho cộng đồng của mình.

Chúc các bạn thành công.

VNXF.VN​