Tutorial 2x Move staff links to dropdown menu (with badges) - Di chuyển liên kết Staff vào menu dropdown cho XF2

[PVS]

Move staff links to dropdown menu (with badges) - Di chuyển liên kết Staff vào menu dropdown cho XF2

Thay vì thêm thanh màu xám vào đầu trang với các liên kết staff, mod này sẽ thêm các liên kết Admin/Reports/Approval vào menu thả xuống trong điều hướng trang web của bạn và ẩn thanh staff ban đầu bằng CSS.

​

1. Thêm tổng số # bài viết trong phê duyệt + tổng số # báo cáo cùng nhau trong huy hiệu chính
2. Di chuyển huy hiệu hàng đợi phê duyệt và báo cáo vào menu thả xuống riêng biệt
3. Ẩn thanh staff gốc bằng CSS

-----

HƯỚNG DẪN CÀI ĐẶT

BƯỚC 1: Tạo template mới trong Appearance > Templates được gọi là template_pnavStaffBar và dán vào đoạn code sau:

<xf:if contentcheck="true">
    <a class="p-navStaffBar p-navgroup-link p-navgroup-link-staffbar p-navgroup-link--iconic p-navgroup-link--moderatortools {{ ($xf.session.reportCounts.total OR ($xf.visitor.is_moderator && $xf.session.unapprovedCounts.total)) ? ' badgeContainer badgeContainer--highlighted' : '' }}"
        data-xf-click="menu" data-xf-key="alt+m" role="button" tabindex="0" aria-expanded="false" aria-haspopup="true"
        data-badge="{{ $xf.session.reportCounts.total|number + $xf.session.unapprovedCounts.total|number }}"
        title="{{ phrase('moderator') }}"
        aria-label="{{ phrase('approval_queue')|for_attr }}"
        aria-expanded="false"
        aria-haspopup="true">
        <i aria-hidden="true"></i>
        <span class="p-navgroup-linkText">{{ phrase('admin_navigation.tools') }}</span>
    </a>
    <div class="menu menu--structural" data-menu="menu" aria-hidden="true">
        <div class="menu-content">
            <h4 class="menu-header">{{ phrase('admin_navigation.tools') }}</h4>
            <xf:contentcheck>
            <!--[XF:mod_tools_menu:top]-->
                <xf:if is="$xf.visitor.is_admin">
                    <a href="{{ base_url('admin.php') }}" class="menu-linkRow" title="{{ phrase('admin_control_panel') }}">{{ phrase('admin_control_panel') }}</a>
                </xf:if>
                <xf:if is="$xf.visitor.is_moderator">
                    <a href="{{ link('approval-queue') }}" class="menu-linkRow{{ ($xf.visitor.is_moderator && $xf.session.unapprovedCounts.total) ? ' badgeContainer badgeContainer--highlighted' : '' }}" data-badge="{$xf.session.unapprovedCounts.total|number}">{{ phrase('approval_queue') }} </a>
                </xf:if>
                <xf:if is="$xf.visitor.is_moderator && !$xf.options.reportIntoForumId">
                    <a href="{{ link('reports') }}" class="menu-linkRow {{ $xf.session.reportCounts.total ? ' badgeContainer badgeContainer--highlighted' : '' }}" data-badge="{{ $xf.session.reportCounts.assigned ? $xf.session.reportCounts.assigned|number . ' / ' . $xf.session.reportCounts.total|number : $xf.session.reportCounts.total|number }}" title="{{ $xf.session.reportCounts.lastBuilt ? phrase('last_report_update:')|for_attr . ' ' . date_time($xf.session.reportCounts.lastBuilt) : '' }}">{{ phrase('reports') }} </a>
                </xf:if>
                <!--[XF:mod_tools_menu:bottom]-->
            </xf:contentcheck>
        </div>
    </div>
</xf:if>

-----

BƯỚC 2: Mở template PAGE_CONTAINER và tìm <div> mở sau:

<div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"

... tiếp theo chèn template bạn đã tạo vào sau </ div> đóng:

<xf:include template="template_pnavStaffBar" />

Code hoàn chỉnh sẽ trông như sau (CHỈ VÍ DỤ KHÔNG SAO CHÉP):

<div class="menu menu--structural menu--wide menu--account" data-menu="menu" aria-hidden="true"
    data-href="{{ link('account/visitor-menu') }}"
    data-load-target=".js-visitorMenuBody">
    <div class="menu-content js-visitorMenuBody">
        <div class="menu-row">
            {{ phrase('loading...') }}
        </div>
    </div>
</div>
<xf:include template="template_pnavStaffBar" />

-----

BƯỚC 3: Thêm CSS sau vào template Extra.less của bạn:

/* STAFF BAR */

.p-staffBar { display: none; }
.p-navStaffBar { display: inline-block; }
.p-navgroup-link {
    &.p-navgroup-link--moderatortools i:after { .m-faContent(@fa-var-tools, 1em); }
}

Lưu lại là xong.

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

Nguồn: xenforo.com​