Other Tạo add-on để chèn các tab trong trang hồ sơ cá nhân (sử dụng hooks)

[PVS]

Tạo add-on để chèn các tab trong trang hồ sơ cá nhân (sử dụng hooks)

Hướng dẫn này sẽ dạy bạn làm thế nào để chèn các tab mới trong trang hồ sơ cá nhân bằng cách sử dụng các templates hooks. Bạn có thể thấy một lời giải thích chi tiết hơn ở đây:

Bước 1 - Đầu tiên của tất cả

Bạn phải chắc chắn rằng XenForo của bạn đang ở chế độ gỡ lỗi. Để làm điều này, mở file config.php của bạn (yourForum/library/config.php) và đặt dòng này vào:

$config['debug'] = true;

Lưu lại. Tới AdminCP của bạn và bạn sẽ thấy một tab mới. "Development".

Bước 2 - Add-on

Đăng nhập vào AdminCP của bạn đi đến Development>Create Add-on

Hãy điền vào các trường thông tin này:
Add-on ID: newProfileTabs
Title: New Profile Tabs in profile page
Version String: 1.0
Version ID: 1

Lưu lại.

Bước 3 - Template hook

Tiện ích này sẽ sử dụng hệ thống template hook, vì vậy các tab mới luôn luôn giữ hoạt động ngay cả sau khi nâng cấp XenForo.

Trước hết chúng ta hãy tìm template của trang profile. Có rất nhiều cách để làm điều đó, đây là những gì tôi làm:

Trong trình duyệt của tôi (Chrome), tôi đi đến trang hồ sơ và kiểm tra nó (F12). Tôi đang tìm một số class mà tôi có thể sử dụng để tìm kiếm trong "Search Template" AdminCP.

​

Xuất hiện rằng chúng ta có thể sử dụng class "profilePage" cho việc tìm kiếm. Ok, vào AdminCP của bạn> Appearance> Search Templates và tìm kiếm.

​

Và chúng ta đã thấy nó! Template là "member_view".

Nếu bạn nhìn vào bên trong template, bạn sẽ tìm thấy:

<ul class="tabs mainTabs Tabs" data-panes="#ProfilePanes > li" data-history="on">
<li><a href="{$requestPaths.requestUri}#profilePosts">{xen:phrase profile_posts}</a></li>
<xen:if is="{$showRecentActivity}"><li><a href="{$requestPaths.requestUri}#recentActivity">{xen:phrase recent_activity}</a></li></xen:if>
<li><a href="{$requestPaths.requestUri}#postings">{xen:phrase postings}</a></li>
<li><a href="{$requestPaths.requestUri}#info">{xen:phrase information}</a></li>
<xen:if is="{$warningCount}"><li><a href="{$requestPaths.requestUri}#warnings">{xen:phrase warnings} ({xen:number $warningCount})</a></li></xen:if>
<xen:hook name="member_view_tabs_heading" params="{xen:array 'user={$user}'}" />
</ul>

Đó là những gì chúng ta đang tìm kiếm! Mã này làm cho các tab hiện tại, và có các template hook. Bây giờ là tên template mà làm cho các tab. Bây giờ chúng ta phải biết nhiều tên của template hook! Xem dòng này:

<xen:hook name="member_view_tabs_heading" params="{xen:array 'user={$user}'}" />

Đây là tên hook: "member_view_tabs_heading". Viết xuống một nơi nào, chúng ta sẽ sử dụng nó.

Bước 4 - Tạo tập tin cho add-on

Chúng ta cần các tập tin để làm cho tất cả các công trình. Đến yourForum/library/

Add-on của chúng ta cấu trúc sẽ được như thế này:

yourForum
--library
----newProfileTabs
------Listener.php

Hãy chắc chắn rằng bạn làm theo cấu trúc này, vì vậy hướng dẫn này sẽ làm việc cho bạn. Bên trong thư mục "newProfileTabs" tạo ra một tập tin gọi là "Listener.php" và để nó ở đó.

Bước 5 - Code Event Listeners

Bây giờ chúng ta có thể tạo ra một Code Event Listener mới và đưa template hook này vào công việc.

Đi đến AdminCP>Development>Code Event Listeners. Click vào nút "+Create New Code Event Listener".

​

Hãy điền vào tất cả các thông tin.

Listen to Event: Bất cứ khi nào bạn muốn sử dụng hệ thống template hook, bạn sẽ chọn trong "Listen to Event" các "template_hook". Vì vậy, hãy chọn "template_hook". Đây là lời giải thích nó:

Được gọi là bất cứ khi nào một template hook bắt gặp (qua thẻ <xen:hook>). Bạn có thể sử dụng sự kiện này để sửa đổi các kết quả cuối cùng của phần này của template. Template hook có thể vượt qua một khối template đầu ra cuối cùng với nó; bạn có thể hoặc là điều chỉnh văn bản này (chẳng hạn như với biểu thức thông thường) hoặc thêm đầu ra bổ sung trước hoặc sau các nội dung. Một số khối sẽ không vượt qua nội dung với họ; chúng được thiết kế chủ yếu để cho phép bạn thêm các thành phần bổ sung trong những vị trí.

Execute Callback:: Không điền vào điều này được nêu ra.

Callback Execution Order:: Để lại số trong đó. Đừng thay đổi.

Enable Callback Execution: Hãy chắc chắn rằng điều này được check. Vì vậy, chức năng gọi lại của bạn sẽ làm việc.

Description: Bạn có thể đặt bất cứ điều gì bạn muốn ở đây. Hãy chắc chắn rằng bạn đặt một cái gì đó mà bạn có thể hiểu. Tôi sẽ đặt "Listen to some template hooks".

Add-on: Chọn add-on của bạn, "newProfileTabs"

Chúng ta cần phải điền các thông tin với Execute Callback. Nhưng chúng ta cần phải tạo ra các phương pháp trước, phải không? Được. Tôi đã thực hiện hướng dẫn này theo cách này để đảm bảo rằng các phương pháp chúng ta cần phải tạo ra sẽ được hiểu bởi bạn.

Trong trang chúng tôi, chúng tôi đã nhận "Callback signature". Nó nằm dưới mô tả sự kiện. Xem ở đây:

$hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template

Đó là tất cả là các thông số chúng ta cần phải sử dụng chức năng. Viết ra ở một số nơi. Chúng tôi sẽ sử dụng nó trong các bước tiếp theo.

Rời khỏi trang mở. Đừng đóng.

Bước 6 - Tập tin Listener.php

Hãy nhớ vào đầu của hướng dẫn này, chúng tôi phát hiện ra tên của các template hook?
Để giúp bạn:
template hook:member_view_tabs_heading
callback signature: $hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template

Mở tập tin "Listener.php" của bạn, thêm:

<?php
//Look! The name of the class follow our directory structure!
//nameOfTheAddon_File (without the ".php" for sure!)
//This can be: nameOfTheAddon_Folder_File or nameOfTheAddon_Folder_Folder_File
class newProfileTabs_Listener
{
    //Our callback signature! We are using here! Look:
    public static function template_hook ($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        //Yey! its our template hook!
        if ($hookName == 'member_view_tabs_heading')
        {
            //Our tab! We will do somethin better, hang on.
            $contents .= '<li><a href="{$requestPaths.requestUri}#ourTab">Our Tab</a></li>';
        }
    }
}
?>

Lưu lại.

Bước 7 - Sao lưu với Code Event Listeners

Mở lại trang của Code Events Listeners, chúng ta tạo ra trước. Hãy nhớ rằng bạn đừng nhấn vào nút "Save Event Listener", do đó event listener chưa làm việc.

Bây giờ chúng ta có method và class của chúng ta tạo ra chúng ta có thể điền vào trường "Execute Callback".

Execute Callback: Đầu vào đầu tiên là tên của class. Class của chúng ta có tên "newProfileTabs_Listener". Vì vậy, đặt nó trên.
Đầu vào thứ hai là tên của method mà chúng ta sẽ sử dụng cho gọi lại. Chúng tôi đã đưa ra tên của "template_hook". Vì vậy, đặt nó trên.

Sau đó, bạn sẽ có một cái gì đó như thế này:

​

Click "Save Event Listener".

Bước 8 - Cách hoạt động

Tới một số hồ sơ tại diễn đàn của bạn. Xem, tab mới được tạo ra!

Hãy thử click!

...

Oh, không có gì tải, phải không? Chuyện này buồn!

Chúng tôi đã đạt được mục tiêu đầu tiên của chúng tôi: để tạo ra các tab. Bây giờ cho phép tạo ra các nội dung.

Bước 9 - Tạo nội dung

Hãy nhớ rằng, lúc bắt đầu của hướng dẫn này, chúng tôi tìm thấy tên của các template hook chúng tôi muốn sử dụng, phải không? Bây giờ chúng tôi muốn có một số template hook khác để đưa các nội dung!

Template như sau: member_view. Bạn có thể mở lại template này (nếu bạn đã có đóng).

Di chuyển đến dưới cùng của template (member_view) và bạn sẽ tìm thấy những gì chúng tôi đang tìm kiếm:

<xen:if is="{$warningCount}">
<li id="warnings" class="profileContent" data-loadUrl="{xen:link members/warnings, $user}">
{xen:phrase loading}...
<noscript><a href="{xen:link members/warnings, $user}">{xen:phrase view}</a></noscript>
</li>
</xen:if>
<xen:hook name="member_view_tabs_content" params="{xen:array 'user={$user}'}" />

Hook:

<xen:hook name="member_view_tabs_content" params="{xen:array 'user={$user}'}" />

Name: member_view_tabs_content

Chúng tôi sẽ sử dụng hook này để chèn nội dung vào tab của chúng tôi trong trang hồ sơ cá nhân. Viết xuống một nơi nào, chúng tôi sẽ sử dụng nó.

Bước 10 - Trở lại với tập tin Listener.php

Trong file Listener.php, bạn sẽ thêm một số dòng.

Nhớ điều này?

if ($hookName == 'member_view_tabs_heading')
{
    //We will do something later. Hang on.
    $contents .= '<li><a href="{$requestPaths.requestUri}#ourTab">Our Tab</a></li>';
}

Bây giờ chúng ta sẽ thêm điều kiện khác để có được tên hook. Dưới điều kiện đầu tiên, thêm này:

//Our second template hook name!
if ($hookName == 'member_view_tabs_content')
{
    $contents .= '<li id="ourTab" class="profileContent">
                  <div class="section">Your content</div>
                  </li>';
}

Tập tin của bạn sẽ chứa này:

<?php
//Look! The name of the class follow our directory structure!
//nameOfTheAddon_File (without the ".php" for sure!)
//This can be: nameOfTheAddon_Folder_File or nameOfTheAddon_Folder_Folder_File
class newProfileTabs_Listener
{
    //Our callback signature! We are using here! Look:
    public static function template_hook ($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        //Yey! its our template hook!
        if ($hookName == 'member_view_tabs_heading')
        {
                //We will do something later. Hang on.
                $contents .= '<li><a href="{$requestPaths.requestUri}#ourTab">Our Tab</a></li>';
        }
        if ($hookName == 'member_view_tabs_content')
        {
            $contents .= '<li id="ourTab" class="profileContent">
                        <div class="section">This is the content of our tab</div>
                        </li>';
        }
    }
}
?>

Bước 11 - Cách làm việc

Đến trang hồ sơ một lần nữa, trong diễn đàn của bạn. Nhấp vào "Our Tab". Chúng ta nhận điều này:

​

Tất cả đã được làm xong. Điều đó sẽ làm các công việc.

Bước 12 - Adittionals

Để làm cho mã sạch hơn và addon của bạn có tổ chức hơn, cho phép thay đổi một số thứ.
Thay vì thêm mã vào tab của chúng tôi trực tiếp thông qua tập tin Listener.php, chúng tôi sẽ tạo ra hai template: một cho Tab Heading và một với nội dung của tab.

Bước 13 - Tạo template

Đến AdminCP>Appearance>Templates and hit the button "+Create New Template".

Tên chúng tôi sẽ sử dụng trong hướng dẫn này cho tab heading sẽ là "newProfileTab_ourTab"

Tiếp theo mã của nó cho template của chúng tôi. Chúng tôi sẽ thêm mã hiện có trong tập tin Listener.php.

<li><a href="{$requestPaths.requestUri}#ourTab">Our Tab</a></li>

Trong Add-on chọn tên của add-on "New Profile Tabs". Nhấn "Save all changes".
Bây giờ cho phép tạo ra các nội dung.

Cùng quá trình:

"+Create new Template"
Điền với tên (chúng tôi sẽ sử dụng newProfileTab_ourTab_content)
Template:

<li id="ourTab" class="profileContent">
      <div class="section">This is the content of our tab</div>
</li>

Chọn Add-on.

Save all changes.

Ok, vậy bây giờ chúng ta phải có template mới, phải không?

-> NewProfileTab_ourTab
-> NewProfileTab_ourTab_content

Cho phép sử dụng chúng!

Bước 14 - Hãy sử dụng chúng!

Chúng tôi đã tạo ra các template mới cho một lý do. Chúng tôi sẽ thay đổi tập tin Listener.php thay vì các mã trực tiếp trong template của chúng tôi được tải từ Listener.php sẽ sử dụng các template chúng tôi có.
Đây là tập tin mong muốn của bạn trông giống như:
(Tôi đã thay đổi các điều kiện "if" để "switch" i preferr)

<?php
class newProfileTabs_Listener
{
    public static function template_hook ($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        //Swiiitch!
        switch ($hookName) //the hookname
        {
            //first template hook
            case 'member_view_tabs_heading':
                //Get our template!
                $ourTemplate = $template->create('newProfileTab_ourTab', $template->getParams());
                //Render
                $rendered = $ourTemplate->render();
                //Put the rendered template in the contents.
                $contents .= $rendered;
                break;
            //second template hook
            case 'member_view_tabs_content':
                //Get our template!
                $ourTemplate = $template->create('newProfileTab_ourTab_content', $template->getParams());
                //Render
                $rendered = $ourTemplate->render();
                //Put the rendered template in the contents.
                $contents .= $rendered;
                break;
        }
    }
}
?>

Chúng tôi hiện đang sử dụng các template để làm cho tab hồ sơ của riêng của chúng tôi! Thú vị thật...
... Nhưng vẫn không xong!
Trước khi chúng ta chèn template trong các diễn đàn sử dụng template hook, chúng ta cần phải tải sẵn chúng.

Bước 15 - Tải sẵn template

Để tải sẵn một template, chúng ta cần phải sử dụng một Code Event Listener được gọi là "template_create".
Vì vậy, đi đến AdminCP>Development>Code Event Listeners của bạn và nhấn "+Create New Code Event Listener".
Nó sẽ mở cùng một màn hình chúng tôi sử dụng để làm cho Listener khác. Vì thế:

Listen to Event: Chúng tôi sẽ sử dụng tại template_create event.

Được gọi là bất cứ khi nào hàm dựng template đối tượng được gọi. Bạn có thể sử dụng event này để sửa đổi tên của template được gọi, để sửa đổi các params được truyền cho các template, hoặc trước khi tải thêm các template khi cần thiết.

Xem Callback signature? Sao chép nó. Chúng ta sẽ sử dụng trong bước tiếp theo.

Điền Description và chọn Add-On. Điều tương tự trước đây. Đừng chọn lưu vì chúng ta không có chức năng để lắng nghe sự kiện này được nêu ra. Rời khỏi trang mở. Đến bước tiếp theo.

Bước 16 - Tạo chức năng

Mở Listener.php và thêm mã này:

//Our callback signature!
public static function template_create($templateName, array &$params, XenForo_Template_Abstract $template)
{
    switch ($templateName) {
        case 'member_view':
            $template->preloadTemplate('newProfileTab_ourTab');
            $template->preloadTemplate('newProfileTab_ourTab_content');
            break;
    }
}

Bất cứ khi nào template "member_view" được tạo ra hệ thống sẽ tải sẵn hai template: newProfileTab_ourTab và newProfileTab_ourTab_content.
Đây là tập tin của bạn trông giống như:

<?php
class newProfileTabs_Listener
{
    //Our callback signature!
    public static function template_create($templateName, array &$params, XenForo_Template_Abstract $template)
    {
        switch ($templateName) {
            case 'member_view':
            $template->preloadTemplate('newProfileTab_ourTab');
            $template->preloadTemplate('newProfileTab_ourTab_content');
            break;
        }
    }
    //Our callback signature! We are using here! Look:
    public static function template_hook ($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        //Swiiitch!
        switch ($hookName) //the hookname
        {
            //first hook
            case 'member_view_tabs_heading':
                //Get our template!
                $ourTemplate = $template->create('newProfileTab_ourTab', $template->getParams());
                //Render
                $rendered = $ourTemplate->render();
                //Put the rendered template in the contents.
                $contents .= $rendered;
                break;
            //second hook
            case 'member_view_tabs_content':
                //Get our template!
                $ourTemplate = $template->create('newProfileTab_ourTab_content', $template->getParams());
                //Render
                $rendered = $ourTemplate->render();
                //Put the rendered template in the contents.
                $contents .= $rendered;
                break;
        }
    }
}
?>

Lưu lại.

Bước 17 - Lưu event listener mới

Quay trở lại trang của event listener mà chúng ta chưa lưu (template_create).

Điền Execute Callback.

Lĩnh vực đầu tiên: tên của class "newProfileTabs_Listener"

Lĩnh vực thứ hai: tên của method "template_create"

Add-on để chèn các tab mới trong trang hồ sơ cá nhân được thực hiện!

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

Nguồn: xenforo.com​