Tutorial 2x Sub-Forums Grid - Tạo Sub-Forum dạng Grid cho XenForo 2

[PVS]

Sub-Forums Grid - Tạo Sub-Forum dạng Grid cho XenForo 2

Sửa đổi template này hiển thị các sub-forum bên dưới parent node body.

Bước đầu tiên: Đảm bảo rằng style property nodeListSubDisplay được đặt thành "Listed below node", bạn có thể tìm thấy trong Style properties > Node/forum list

Template node_list_forum

Tìm đoạn code dưới đây và sao chép nó vào clipboard rồi xóa nó.

<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
            <xf:macro template="forum_list" name="sub_nodes_flat"
                      arg-children="{$children}"
                      arg-childExtras="{$childExtras}"
                      arg-depth="{{ $depth + 1 }}" />
        </xf:if>

Tìm:

    </div>

    <xf:if is="{$depth} == 1">

Thêm ở trên: (Dán đoạn code bạn đã sao chép từ bước trên)

<xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
            <xf:macro template="forum_list" name="sub_nodes_flat"
                      arg-children="{$children}"
                      arg-childExtras="{$childExtras}"
                      arg-depth="{{ $depth + 1 }}" />
        </xf:if>

=================================
Template: node_list_category

Tìm đoạn code dưới đây và sao chép nó vào clipboard rồi xóa nó.

        <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
            <xf:macro template="forum_list" name="sub_nodes_flat"
                      arg-children="{$children}"
                      arg-childExtras="{$childExtras}"
                      arg-depth="{{ $depth + 1 }}" />
        </xf:if>

Tìm:

    </div>
</xf:macro>

<xf:macro name="depthN" arg-node="!" arg-extras="!" arg-children="!" arg-childExtras="!" arg-depth="1">

Thêm ở trên: (Dán đoạn code bạn đã sao chép từ bước trên)

        <xf:if is="$depth == 2 AND property('nodeListSubDisplay') == 'flat'">
            <xf:macro template="forum_list" name="sub_nodes_flat"
                      arg-children="{$children}"
                      arg-childExtras="{$childExtras}"
                      arg-depth="{{ $depth + 1 }}" />
        </xf:if>

Thêm vào template extra.less:

<xf:if is="property('nodeListSubDisplay') == 'flat'">
.node-subNodeFlatList {
        background: @xf-paletteColor1;
        border-top: 1px solid @xf-borderColorFaint;
        padding: 10px 25px;
}
.node-subNodeFlatList > li {
        margin-right: 0;
        width: 25%;  /** Change this value to increase the amount of links in each row **/
}

@media (max-width: @xf-responsiveMedium)
{
    .block-body .node
    {
        .node-subNodesFlat
        {
            display: block;
        }
    }
}
@media (max-width: @xf-responsiveNarrow)
{
    .block-body .node
    {
        .node-subNodesFlat
        {
            display: none;
        }
    }
}
</xf:if>

Điều chỉnh giá trị width, giá trị thấp hơn đồng nghĩa với nhiều cột hơn. Hướng dẫn này thực hiện trên style mặc định, mọi style tùy chỉnh sẽ yêu cầu nhiều việc hơn, bài viết này chỉ có thể hỗ trợ style mặc định hoặc các style có cấu trúc tương tự.

Kết quả:

​

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

Nguồn: xenforo.com​