Tutorial 2x Hướng dẫn Lập trình Nâng cao với Template Syntax của XenForo 2.3

[PVS]

Xem nhanh

Ẩn Hiện

Ôn lại kiến thức cũ: Điều kiện xf:if và biến​

Sức mạnh của vòng lặp: xf:foreach​

Tái sử dụng code với xf:macro​

Bước 1: Định nghĩa một Macro​

Bước 2: Gọi Macro​

Biểu thức và cú pháp nâng cao​

Toán tử ba ngôi (Ternary Operator)​

Gọi các hàm PHP an toàn​

Khai báo biến với xf:set​

Ví dụ thực tế: Tùy biến hồ sơ thành viên​

Kết luận​

Hướng dẫn Lập trình Nâng cao với Template Syntax của XenForo 2.3

Khi các tùy chỉnh trong Style Properties không còn đủ đáp ứng, và việc tạo một add-on hoàn chỉnh lại quá phức tạp, thì Template Syntax chính là cây cầu nối quyền năng dành cho bạn. XenForo sử dụng một hệ thống cú pháp mẫu (templating engine) mạnh mẽ, cho phép bạn chèn logic, vòng lặp, và thậm chí gọi các hàm PHP trực tiếp vào trong các file template HTML.

Việc làm chủ các kỹ thuật này sẽ mở ra một cánh cửa tùy biến gần như vô hạn, giúp bạn tạo ra những tính năng và hiển thị độc đáo cho riêng cộng đồng của mình. Bài viết này sẽ đi sâu vào các cú pháp nâng cao mà bất kỳ quản trị viên chuyên nghiệp nào cũng nên biết.

Ôn lại kiến thức cũ: Điều kiện xf:if và biến​

Chắc hẳn bạn đã quen thuộc với việc hiển thị một biến, ví dụ {$user.username}, hoặc sử dụng một câu lệnh điều kiện đơn giản:

<xf:if is="$user.is_admin">Chào mừng quản trị viên!</xf:if>

Để đi xa hơn, hãy nhớ rằng bạn có thể sử dụng các toán tử phức tạp hơn như AND, OR, hoặc kiểm tra các giá trị khác nhau:

<xf:if is="$user.message_count > 100 AND $user.trophy_points > 50">Thành viên tích cực!</xf:if>

Sức mạnh của vòng lặp: xf:foreach​

Đây là một trong những cú pháp hữu ích nhất, cho phép bạn lặp qua một mảng dữ liệu. Ví dụ kinh điển là hiển thị danh sách các huy hiệu (trophy) của người dùng.

Giả sử bạn có một biến mảng là {$userTrophies}.

<ul class="listInline">
    <xf:foreach loop="{$userTrophies}" value="$trophy">
        <li>{$trophy.title}</li>
    </xf:foreach>
</ul>

• loop: Chỉ định biến mảng cần lặp.
• value: Đặt tên cho biến đại diện cho mỗi phần tử trong mỗi vòng lặp.

Tái sử dụng code với xf:macro​

Macro giống như một "hàm" trong template. Bạn định nghĩa một khối mã HTML ở một nơi, và sau đó có thể gọi lại nó ở nhiều nơi khác nhau, thậm chí từ các template khác nhau. Điều này giúp code của bạn sạch sẽ và dễ bảo trì.

Bước 1: Định nghĩa một Macro​

Trong một template bất kỳ (ví dụ: my_custom_macros), bạn định nghĩa macro như sau:

<xf:macro name="user_card" arg-user="!" arg-extraClass="">
    <div class="userCard {$extraClass}">
        <h3>{$user.username}</h3>
        <p>Số bài viết: {$user.message_count}</p>
    </div>
</xf:macro>

• name: Tên của macro.
• arg-user="!": Định nghĩa một tham số (argument) tên là user. Dấu ! có nghĩa là tham số này là bắt buộc.
• arg-extraClass="": Định nghĩa một tham số không bắt buộc tên là extraClass với giá trị mặc định là rỗng.

Bước 2: Gọi Macro​

Từ một template khác (ví dụ forum_view), bạn có thể gọi macro này:

<xf:macro template="my_custom_macros" name="user_card" arg-user="{$xf.visitor}" arg-extraClass="is-highlighted" />

Biểu thức và cú pháp nâng cao​

Đây là nơi sức mạnh thực sự được thể hiện.

Toán tử ba ngôi (Ternary Operator)​

Đây là cách viết tắt cho một câu lệnh if/else đơn giản, rất tiện lợi khi bạn muốn hiển thị một trong hai giá trị. Cú pháp này phải được đặt trong dấu ngoặc kép {{ }}.

{{ $user.user_id ? $user.username : 'Khách' }}

Câu lệnh trên tương đương với:

<xf:if is="$user.user_id">
    {$user.username}
<xf:else />
    Khách
</xf:if>

Gọi các hàm PHP an toàn​

XenForo cho phép bạn gọi một danh sách các hàm PHP đã được "whitelist" để xử lý dữ liệu.

• phrase: Lấy một cụm từ trong hệ thống ngôn ngữ.
  {{ phrase('your_phrase_key_here') }}
• date: Định dạng một dấu thời gian (timestamp).
  {{ date($user.register_date, 'd/m/Y') }}
• property: Lấy một giá trị từ Style Properties.
  {{ property('publicHeader-background-color') }}
• count: Đếm số phần tử trong một mảng.
  Có tổng cộng {{ count($userTrophies) }} huy hiệu.

Cảnh báo: Tuyệt đối không cố gắng gọi các hàm PHP tùy ý. Hệ thống chỉ cho phép các hàm an toàn, không làm thay đổi dữ liệu.

Khai báo biến với xf:set​

Đôi khi bạn cần một biến tạm để lưu trữ một giá trị hoặc kết quả của một phép tính phức tạp.

<xf:set var="$postsNeeded" value="{{ 100 - $user.message_count }}" />
<p>
    <xf:if is="$postsNeeded > 0">
        Bạn cần thêm {$postsNeeded} bài viết nữa để đạt mốc 100.
    <xf:else />
        Chúc mừng bạn đã đạt mốc 100 bài viết!
    </xf:if>
</p>

Ví dụ thực tế: Tùy biến hồ sơ thành viên​

Hãy áp dụng những gì đã học để thêm một khối thông tin tùy chỉnh vào trang hồ sơ thành viên (template member_view).

<xf:if is="$user.isMemberOf(5)"> <div class="block">
        <div class="block-container">
            <h3 class="block-header">Thông tin VIP</h3>
            <div class="block-body block-row">
                <xf:set var="$yearsActive" value="{{ floor((time() - $user.register_date) / 31536000) }}" />
                Thành viên VIP này đã tham gia cùng chúng ta được {$yearsActive} năm!
                <br />
                Ngày đăng ký: {{ date($user.register_date, 'F j, Y') }}
            </div>
        </div>
    </div>
</xf:if>

Đoạn mã trên sẽ:

1. Kiểm tra xem người dùng có thuộc nhóm thành viên với ID là 5 hay không.
2. Nếu có, nó tạo ra một khối thông tin mới.
3. Sử dụng xf:set và hàm floor, time để tính số năm thành viên này đã hoạt động.
4. Sử dụng hàm date để định dạng lại ngày đăng ký cho đẹp hơn.

Kết luận​

Template Syntax của XenForo là một bộ công cụ cực kỳ linh hoạt. Bằng cách kết hợp các biến, điều kiện, vòng lặp, macro và các hàm có sẵn, bạn có thể thay đổi gần như mọi khía cạnh hiển thị của diễn đàn. Hãy bắt đầu từ những tùy chỉnh nhỏ, và đừng ngại thử nghiệm. Nắm vững kỹ năng này chính là chìa khóa để tạo ra một cộng đồng thực sự khác biệt và độc đáo.

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

VNXF.VN​