Tutorial 2x Thêm một hệ thống danh tiếng (Reputation System) đơn giản và hiệu quả cho XenForo 2

[PVS]

Thêm một hệ thống danh tiếng (Reputation System) đơn giản và hiệu quả cho XenForo 2

Đây là một hướng dẫn ngắn để sửa đổi template mà bạn có thể sử dụng để thêm hệ thống danh tiếng vào trang web của mình dựa trên điểm số reaction.

Đầu tiên bạn sẽ cần một số hình ảnh cho xếp hạng. Tôi hiện đang sử dụng hình ảnh nửa sao và toàn sao với phiên bản hoàn chỉnh có 10 sao đầy đủ với đường viền đậm xung quanh để hiển thị hoàn thiện và cũng bắt đầu với 10 sao trống nếu bạn có ít hơn 25 reaction. Hãy sử dụng bất kỳ hình ảnh bạn thích. Tôi đề nghị Flat Icon cho một số hình ảnh tốt.

Điều này về cơ bản hoạt động là khi ai đó nhận được 25 reaction, họ sẽ nhận được một nửa sao. Khi họ đạt tới 50 reaction, họ sẽ nhận được một ngôi sao đầy đủ và bên dưới bạn có thể thấy nơi nó được nhân rộng để hoạt động như một hệ thống nhỏ đẹp.

Hãy thoải mái thay đổi số lượng reaction và công cụ chú giải văn bản. Như bạn có thể thấy nó cũng thiết lập một tooltip nhỏ xinh để người dùng có ý tưởng về cách thức hoạt động của nó.

Vào template "message_macros"

Tìm:

    <xf:if is="$user.canViewIdentities()">
                            <xf:macro template="custom_fields_macros" name="custom_fields_view"
                                arg-type="users"
                                arg-group="contact"
                                arg-set="{$user.Profile.custom_fields}"
                                arg-additionalFilters="{{ ['message'] }}"
                                arg-valueClass="pairs pairs--justified" />
                        </xf:if>
                    </xf:if>

Thêm đoạn code sau vào bên dưới:

<div class="star-ranks" style="padding-top: 8px;">
 
<xf:if is="{$user.reaction_score} >=  1300"> <img src="/star-ranks-filled/complete-stars.png" data-xf-init="tooltip" title="Full Reputation Master">
<xf:elseif is="{$user.reaction_score} >=  1200" /> <img src="/star-ranks-filled/fullstar-10.png" data-xf-init="tooltip" title="1,200+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  1100" /> <img src="/star-ranks-filled/halfstar-10.png" data-xf-init="tooltip" title="1,100+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  1000" /> <img src="/star-ranks-filled/fullstar-9.png" data-xf-init="tooltip" title="1,000+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  900" /> <img src="/star-ranks-filled/halfstar-9.png" data-xf-init="tooltip" title="900+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  800" /> <img src="/star-ranks-filled/fullstar-8.png" data-xf-init="tooltip"title="800+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  700" /> <img src="/star-ranks-filled/halfstar-8.png" data-xf-init="tooltip" title="700+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  600" /> <img src="/star-ranks-filled/fullstar-7.png" data-xf-init="tooltip" title="600+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  500" /> <img src="/star-ranks-filled/halfstar-7.png" data-xf-init="tooltip" title="500+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  450" /> <img src="/star-ranks-filled/fullstar-6.png" data-xf-init="tooltip" title="450+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  400" /> <img src="/star-ranks-filled/halfstar-6.png" data-xf-init="tooltip" title="400+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  350" /> <img src="/star-ranks-filled/fullstar-5.png" data-xf-init="tooltip" title="350+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  300" /> <img src="/star-ranks-filled/halfstar-5.png" data-xf-init="tooltip" title="300+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  250" /> <img src="/star-ranks-filled/fullstar-4.png" data-xf-init="tooltip" title="250+ Ratings">
<xf:elseif is="{$user.reaction_score} >= 200" /> <img src="/star-ranks-filled/halfstar-4.png" data-xf-init="tooltip" title="200+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  150" /> <img src="/star-ranks-filled/fullstar-3.png" data-xf-init="tooltip" title="150+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  125" /> <img src="/star-ranks-filled/halfstar-3.png" data-xf-init="tooltip" title="125+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  100" /> <img src="/star-ranks-filled/fullstar-2.png" data-xf-init="tooltip" title="100+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  75" /> <img src="/star-ranks-filled/halfstar-2.png" data-xf-init="tooltip" title="75+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  50" /> <img src="/star-ranks-filled/fullstar-1.png" data-xf-init="tooltip" title="50+ Ratings">
<xf:elseif is="{$user.reaction_score} >=  25" /> <img src="/star-ranks-filled/halfstar-1.png" data-xf-init="tooltip" title="25+ Ratings">
    <xf:elseif is="{$user.reaction_score} <  25" /> <img src="/star-ranks-filled/empty-star.png" data-xf-init="tooltip" title="Needs 25+ Ratings for Rep">
                    </xf:if>
                    </div>

Điều đó cũng sẽ cung cấp cho nó một số padding đẹp và sau đó bất kỳ kiểu dáng nào khác có thể được thực hiện bằng cách sử dụng class "star-ranks" hoặc bất cứ điều gì bạn quyết định sử dụng. Bạn có thể thay thế <img src=""> bằng đường dẫn đến hình ảnh khác nếu bạn muốn.

​

Như bạn có thể thấy, hình ảnh ngôi sao bên trái.

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

Nguồn: xenforo.com​

 

[CoTich]

cảm ơn bro. e đã làm đc