Other How to add a new sidebar in the forum list - Cách thêm sidebar mới trong forum list

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,704
How to add a new sidebar in the forum list - Cách thêm sidebar mới trong forum list 1.0

Bài viết này sẽ hướng dẫn bạn cách làm thế nào để thêm một sidebar mới với nội dung tùy chỉnh trong trang danh sách diễn đàn.

Đây là kết quả cuối cùng:

1.PNG

Bước 1 - Tạo Add-on

Đầu tiên chúng ta cần tạo một add-on mới. Đây là một bước rất đơn giản. Để có thể tạo bạn cần bật Debug Mode.

Để tạo một add-on mới đi đến AdminCP -> Home -> List Add-ons và nhấn vào nút Create Add-on. Trong màn hình tiếp theo bạn cần phải điền vào các lĩnh vực để tạo ra add-on. Sử dụng các thông tin dưới đây:
  • Add-on ID: NewSidebar
  • Title: Tutorial New Sidebar
  • Add-on is active: Checked
  • Version String: 1.0.0
  • Version ID: 1
Và các lĩnh vực còn lại chỉ cho phép để trống. Chúng ta không cần phải điền. Add-on này chỉ là add-on đơn giản, vì vậy chúng ta không có bất kỳ quá trình cài đặt hoặc một cái gì đó.

Nhấp vào Lưu Add-on và tiện ích của bạn được tạo ra!

Trước khi tiếp tục, hãy tạo thư mục của chúng ta và các tập tin cần thiết. Tới your_xenforo_root/library và tạo một thư mục mới đặt tên nó là NewSidebar. Bên trong thư mục tạo mới này, tạo ra một tập tin gọi là: Listener.php.

Bước 2 - Template

Bây giờ chúng ta cần để tạo ra các template mà sẽ tổ chức nội dung của chúng ta để được hiển thị trong sidebar. Bạn có thể đặt bất cứ điều gì bạn muốn trong template, nhưng đối với hướng dẫn này chúng ta sẽ chỉ đưa ra một văn bản đơn giản "Hello World".

Để tạo ra một template mới (sẽ được sử dụng trong sidebar mới của chúng ta) đi đến AdminCP -> Appearance -> Templates và nhấn vào nút + Create new Template.

Bạn có thể sao chép và dán trong trình soạn thảo template đoạn mã sau:

Template name: newsidebar_sidebar

Nội dung:
Mã:
<div class="section">
    <div class="secondaryContent">
        <div class="visitorText">
            <h3>Our new Sidebar!</h3>
            <div class="stats">
                              Hello World!
            </div>
        </div>
    </div>
</div>

Lưu lại. Xong, template của chúng ta đã sẵn sàng để được sử dụng trong sidebar.

Bước 3 - Chèn vào nơi nào trong sidebar?

XenForo làm việc với template hooks. Nếu bạn không quen thuộc với hệ thống này, hãy xem đoạn video sau:


Sau khi xem video, bạn đã quen thuộc với hệ thống (tôi đoán!). Vì vậy, chúng ta cần phải tìm hook chúng ta sẽ sử dụng để chèn ngay sidebar của chúng ta vào sau sidebar mặc định XenForo trong trang danh sách diễn đàn.

Do đó, chúng ta cần phải có một cái nhìn tại template forum_list, đó là template của trang danh sách diễn đàn. Bạn có thể tìm kiếm nó tại AdminCP -> Appearance -> Search Templates và trong box Title Contains điền với điều này: forum_list và tìm kiếm.

Bạn sẽ được trình bày với chỉ một kết quả, đó là template chúng ta đang tìm kiếm. Mở template và có một cái nhìn tại các mã. Nếu bạn tìm thấy bất kỳ template hooks.

(Mất thời gian của bạn)

....

Được! Tìm? Tôi đã tìm thấy những gì chúng ta muốn:
Mã:
<xen:hook name="forum_list_sidebar">

Xem ... Đây là hook ngay trước danh sách diễn đàn bắt đầu sidebar. Vì vậy, chúng ta sẽ sử dụng một event listener để chèn một số nội dung tùy chỉnh trong đó. Xin hãy lưu ý về tên hook, chúng ta sẽ sử dụng nó sau này.

Bạn có thể viết ra trong notepad hoặc một cái gì đó của bạn, hoặc chỉ tham khảo lại bài hướng dẫn này.

Bước 4 - Listener

Để tạo ra một mã event listener mới đến AdminCP -> Development -> Code Event Listeners và nhấn vào nút + Create New Code Event Listener và bạn sẽ có được điều này:

2.PNG

Điền vào các thông tin sau:
  • Listen to event: template_hook
  • Execute CallBack: do not fill anything, we'll create one
  • Callback Execution Order:: 10
  • Enable Callback Execution: checked
  • Description:: New Sidebar Tutorial
  • Add-on: Tutorial New Sidebar
Hãy thử lưu lại! Bạn sẽ nhận được một lỗi, phải không? Đó là bởi vì chúng ta đã không tạo ra class callback và phương pháp để sử dụng trong event listener.

Để lại trang Code Event Listener mở và chúng ta hãy tạo ra class callback.

Nhớ lúc đầu của hướng dẫn này chúng ta đã tạo ra một thư mục và tập tin? Vì vậy, bạn phải đến đó và mở tập tin Listener.php.

Nếu bạn không nhớ đến: xenforo_root/library/NewSidebar. Mở tập tin và dán đoạn mã sau:
Mã:
<?php
/**
* This is our callback class.
* We must define a callback class to be used in the code event listener.
*/
class NewSidebar_Listener
{
    /**
    * This is our callback method. It uses 4 params. This method will check if the current requested hook is what we want ('forum_list_sidebar')
    * and if it is, we will insert in the contents our template. This way we will have a sidebar right after the XenForo default sidebar.
    *
    */
    public static function templateHook($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
    {
        /* If this hook is what we want! Remember: we have found the hook name when we was looking in the forum_list template! */
        if ($hookName == 'forum_list_sidebar')
        {
            /* Insert our template in the contents. This way our sidebar will be inserted right after the last XenForo sidebar in the forum list page */
            $contents .= $template->create('newsidebar_sidebar');
            /* If you want that our sidebar be BEFORE the XenForo sidebars uncomment the following line (don't forget to comment the line above) */
            //$contents = $template->create('newsidebar_sidebar') . $contents;
        }
    }
}

Được. Chúng ta bây giờ có class callback và callback method:
Mã:
NewSidebar_Listener::templateHook

Quay trở lại trang Code Event Listener. Nếu bạn để trang mở ra, bạn sẽ có thể có điều này:

3.PNG

Vì vậy, bây giờ điền vào Execute Callback những thông tin bạn đã có:

Class: NewSidebar_Listener
Method: templateHook

Lưu lại. (Sẽ không có lỗi xuất hiện)

Bây giờ đến trang danh sách diễn đàn của bạn và kết quả của bạn sẽ là thế này:

4.PNG

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


Nguồn: xenforo.com​
 

Đính kèm

  • NewSideBarTutorial.zip
    1.6 KB · Lượt xem: 2

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom