Thêm nút chuyển Light / Dark Mode cạnh chuông thông báo trên XenForo 2.3

[OneHub]

Thêm nút chuyển Light / Dark Mode cạnh chuông thông báo trên XenForo 2.3​

Bạn muốn thành viên có thể chuyển nhanh giữa giao diện sáng và tối ngay trên thanh điều hướng?

Với đoạn code nhỏ dưới đây, chúng ta có thể đưa nút chuyển Style Variation / Light - Dark Mode lên khu vực navbar, ngay cạnh biểu tượng thông báo .

Tương thích XenForo 2.3.x
Không cần cài add-on
Sử dụng chức năng Style Variation có sẵn của XenForo
Icon tự thay đổi theo giao diện hiện tại
Có menu chọn Style Variation
Hoạt động cho cả desktop và responsive

1. Mở template PAGE_CONTAINER​

Truy cập:

Admin CP → Appearance → Templates

Tìm template:

PAGE_CONTAINER

Mở template này để chỉnh sửa.

2. Tìm vị trí cần chèn code​

Trong PAGE_CONTAINER, tìm đoạn:

<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">

Đây là khu vực navigation phía bên phải của XenForo.

Chúng ta sẽ đặt code chuyển Light / Dark Mode ngay phía trên đoạn này.

3. Thêm code Light / Dark Mode​

Dán đoạn code sau ngay phía trên đoạn vừa tìm:

<xf:if is="$xf.visitor.canChangeStyleVariation($xf.style)">
    <a href="{{ link('misc/style-variation') }}"
        rel="nofollow"
        class="p-navgroup-link p-navgroup-link--iconic js-styleVariationsLink"
        data-xf-init="tooltip"
        title="{{ phrase('style_variation') }}"
        data-xf-click="menu"
        data-z-index-ref=".u-bottomFixer"
        role="button"
        aria-expanded="false"
        aria-haspopup="true">

        <xf:fa icon="{{ $xf.style.getVariationIcon($xf.visitor.style_variation) }}" />
    </a>

    <div class="menu" data-menu="menu" aria-hidden="true">
        <div class="menu-content js-styleVariationsMenu">
            <xf:macro name="style_variation_macros::variation_menu"
                arg-style="{$xf.style}"
                arg-live="{{ true }}" />
        </div>
    </div>
</xf:if>

<xf:macro name="account_alerts::nav" />

Sau khi thêm, cấu trúc sẽ có dạng:

<xf:if is="$xf.visitor.canChangeStyleVariation($xf.style)">
    <a href="{{ link('misc/style-variation') }}"
        rel="nofollow"
        class="p-navgroup-link p-navgroup-link--iconic js-styleVariationsLink"
        data-xf-init="tooltip"
        title="{{ phrase('style_variation') }}"
        data-xf-click="menu"
        data-z-index-ref=".u-bottomFixer"
        role="button"
        aria-expanded="false"
        aria-haspopup="true">

        <xf:fa icon="{{ $xf.style.getVariationIcon($xf.visitor.style_variation) }}" />
    </a>

    <div class="menu" data-menu="menu" aria-hidden="true">
        <div class="menu-content js-styleVariationsMenu">
            <xf:macro name="style_variation_macros::variation_menu"
                arg-style="{$xf.style}"
                arg-live="{{ true }}" />
        </div>
    </div>
</xf:if>

<xf:macro name="account_alerts::nav" />

<div class="p-navgroup p-discovery{{ !$xf.visitor.canSearch() ? ' p-discovery--noSearch' : '' }}">

4. Lưu template​

Nhấn:

Save

Sau đó quay lại diễn đàn và refresh trang.

Nếu trình duyệt vẫn hiển thị giao diện cũ, có thể dùng:

Ctrl + F5

để tải lại toàn bộ CSS và template.

5. Kết quả​

Sau khi hoàn tất, trên thanh navigation sẽ xuất hiện thêm icon Style Variation.

Thành viên có thể nhấn vào icon để chuyển giữa các chế độ giao diện mà style đang hỗ trợ, ví dụ:

Light Mode

Dark Mode

System / Auto

Icon cũng sẽ tự thay đổi theo Style Variation đang sử dụng.

Code hoạt động như thế nào?​

Điều kiện:

<xf:if is="$xf.visitor.canChangeStyleVariation($xf.style)">

giúp XenForo chỉ hiển thị nút khi style hiện tại hỗ trợ chuyển Style Variation.

Đoạn:

<xf:fa icon="{{ $xf.style.getVariationIcon($xf.visitor.style_variation) }}" />

sử dụng icon Style Variation có sẵn của XenForo.

Vì vậy icon có thể tự thay đổi tương ứng với Light Mode hoặc Dark Mode hiện tại.

Phần:

<xf:macro name="style_variation_macros::variation_menu"
    arg-style="{$xf.style}"
    arg-live="{{ true }}" />

gọi menu Style Variation mặc định của XenForo.

Nhờ đó chúng ta không cần tự viết JavaScript hoặc tự xây dựng menu Light / Dark Mode.

Lưu ý quan trọng​

Nếu trong PAGE_CONTAINER đã có:

<xf:macro name="account_alerts::nav" />

ở khu vực navbar, hãy kiểm tra kỹ trước khi thêm.

Không nên để hai dòng:

<xf:macro name="account_alerts::nav" />

cùng tồn tại trong cùng khu vực, vì có thể làm xuất hiện hai biểu tượng chuông thông báo.

Trong trường hợp đó, hãy sử dụng đoạn Light / Dark Mode nhưng giữ lại duy nhất một:

<xf:macro name="account_alerts::nav" />

Tổng kết​

Chỉ với một thay đổi nhỏ trong PAGE_CONTAINER, chúng ta có thể đưa chức năng chuyển Light / Dark Mode lên navbar XenForo theo cách gọn gàng và thuận tiện hơn cho người dùng.

Không cần add-on, không cần JavaScript riêng và tận dụng hoàn toàn hệ thống Style Variation có sẵn của XenForo 2.3.