Thủ Thuật Cách hiện banner trên header khác nhau theo từng category riêng

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
17,142
Được Like
12,745
Cách hiện banner trên header khác nhau theo từng category riêng

Một thủ thuật nhỏ giúp bạn tuỳ chỉnh diễn đàn của mình theo ý muốn và trong thủ thuật lần này, mình sẽ mang đến cho các bạn cách để hiện banner trên header tuỳ theo mỗi category riêng trên diễn đàn.

custom-node-forum-banner-1.png


custom-node-forum-banner-2.png


custom-node-forum-banner-3.png

Bước 1: Thêm một điều kiện vào nơi chứa mã hiển thị banner.

Ở đây mình sẽ thực hiện cách làm trên giao diện mặc định của XenForo, nếu bạn dùng giao diện do người khác chia sẽ có thể sẽ khác nhau về vị trí template đôi chút.

Trên giao diện mặc định thì nơi chứa mã hiển thị banner của XenForo sẽ nằm trong template logo_block, các bạn truy cập vào template logo_block sẽ thấy một đoạn mã như sau:
Mã:
<img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />

Bây giờ các bạn thay đoạn mã phía trên bằng lệnh khai báo điều kiện dưới đây:
Mã:
<xen:if is="{$headerLogo}"><img src="{xen:raw $headerLogo}" alt="{$xenOptions.boardTitle}" /><xen:else /><img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" /></xen:if>

Giải thích ý nghĩa:
  • <xen:if is="{$headerLogo}">{xen:raw $headerLogo}: Bắt đầu điều kiện bằng xen:if có nghĩa là nếu trong điều kiện $headerLogo có thay đổi thì sẽ được hiển thị.
  • <xen:else /><img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" /></xen:if>: Ở đây mình thêm xen:else vì nếu ngược lại trong điều kiện $headerLogo không có thay đổi thì sẽ hiện logo mặc định cho tất cả các trang và sau cùng là kết thúc lệnh điều kiện.
xenforo-template-logo-block-edit-1.png

Vậy là bước 1 khai báo điều kiện đã xong, chúng ta bắt đầu tiến hành qua bước 2.

Bước 2: Khai báo cho điều kiện $headerLogo đã đặt ở bước 1 cho từng category.

Ở bước này chính là làm cho banner có thể thay đổi theo từng category, trên XenForo mỗi category sẽ có một số ID riêng và template dùng để hiển thị nội dung của category là forum_view, các bạn hãy mở template forum_view và thêm đoạn mã dưới đây vào phía trên hoặc dưới thẻ </xen:navigation> của template forum_view.
Mã:
<xen:if is="{$forum.node_id} == 2">
    <xen:container var="$headerLogo">Địa chỉ hình ảnh logo chuyên mục 1</xen:container>
<xen:elseif is="{$forum.node_id} == 6" />
    <xen:container var="$headerLogo">Địa chỉ hình ảnh logo chuyên mục 1</xen:container>
</xen:if>

Giải thích ý nghĩa:
  • <xen:if is="{$forum.node_id} == 2"><xen:container var="$headerLogo">Địa chỉ hình ảnh logo chuyên mục 1</xen:container>: Cũng như giải thích ở trên, đoạn này mình tự dịch ý nghĩa là "Nếu chuyên mục có ID là 2 thì sẽ khai báo cho điều kiện $headerLogo là Địa chỉ hình ảnh chuyên mục 1.
  • <xen:elseif is="{$forum.node_id} == 6" /><xen:container var="$headerLogo">Địa chỉ hình ảnh logo chuyên mục 1</xen:container></xen:if>: Còn đoạn dưới đây là khai báo cho chuyên mục thứ 2 muốn hiện banner riêng mình cũng tạm dịch như sau "Ngược lại nếu chuyên mục có ID là 6 thì sẽ khai báo cho điều kiện $headerLogo là Địa chỉ hình ảnh chuyên mục 2".
xenforo-template-forum-view-edit-1.png

Cuối cùng nếu các bạn muốn thay banner riêng cho bất kỳ category nào thì hãy thêm lệnh <xen:elseif is="{$forum.node_id} == 6" /><xen:container var="$headerLogo">Địa chỉ hình ảnh logo chuyên mục 1</xen:container> vào trên thẻ </xen:if> và nhớ thay đổi ID category theo ý mình nhé.

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


Nguồn: thuthuatso.net​
 

tpoclub

Corporal
Tham gia
07/03/2015
Bài viết
115
Được Like
100
muốn logo auto responsive để tránh vỡ khung khi thêm banner quảng cáo thì trong link ảnh cần thêm điều kiện hay dạng code thường sử dụng là sao vậy bác? Thân!
 
  • Like
Reactions: THB

Top Bottom