Đã đăng vào 26 phút trước 6 phút đọc

Joomla Bài học 27: Kỹ thuật Layout Overrides (JLayout): Tái sử dụng các thành phần giao diện dùng chung

Ở Bài học 26, chúng ta đã học cách ghi đè toàn bộ giao diện của một Component hoặc Module thông qua thư mục html/. Tuy nhiên, nếu bạn nhận thấy một khối giao diện nhỏ (như Khối thông tin tác giả, Nút chia sẻ mạng xã hội, Thẻ hiển thị sản phẩm, hay Phân trang) lặp đi lặp lại ở nhiều nơi khác nhau trên website (cả trang chi tiết bài viết, trang danh mục lẫn trang tìm kiếm), việc copy-paste đoạn HTML đó vào từng file Override sẽ vi phạm nguyên tắc lập trình DRY (Don't Repeat Yourself).

Trong Joomla Bài học 27, chúng ta sẽ làm chủ JLayout — kiến trúc render các thành phần giao diện dạng "Partial View" (tương tự như @include trong Laravel Blade hoặc các thành phần Component trong React), giúp mã nguồn Template của bạn trở nên gọn gàng, mô-đun hóa và cực kỳ dễ bảo trì.

1. Bản chất kỹ thuật của JLayout trong Joomla 5

JLayout là một Design Pattern dạng Sub-renderer được Joomla xây dựng nhằm tách biệt hoàn toàn logic hiển thị của các khối HTML nhỏ ra khỏi các View lớn.

Đối tượng tương đương ở các Framework khác:
- Trong Laravel: Giống như các file Partial hoặc Component (@include('components.card')).
- Trong React/Vue: Giống như các Stateless Functional Components.
Cơ chế hoạt động: Thay vì viết trực tiếp hàng trăm dòng HTML lặp lại, bạn gom chúng vào một file layout độc lập. Khi cần hiển thị, bạn chỉ cần gọi một hàm duy nhất truyền vào Đường dẫn layout và Dữ liệu đầu vào ($displayData). Joomla sẽ tiến hành render và trả về chuỗi HTML hoàn chỉnh.

2. Cấu trúc thư mục và Quy tắc định vị JLayout

Hệ thống JLayout quét qua các file PHP nằm trong thư mục /layouts/ theo thứ tự ưu tiên ghi đè (Fallback Mechanism):

Thư mục của Template (Mức ưu tiên cao nhất):/templates/joomlalab/html/layouts/ (Nếu bạn tự tạo JLayout riêng hoặc muốn ghi đè một JLayout có sẵn của Joomla Core).
Thư mục Core của hệ thống (Fallback):/layouts/ (Nơi chứa hàng chục JLayout có sẵn của Joomla như joomla.content.info_block, joomla.pagination.links, joomla.form.field.render).

3. Thực hành: Tự tạo một JLayout tùy chỉnh (Custom JLayout)

Giả sử bạn muốn thiết kế một khối hiển thị thông tin tác giả bài viết dạng Card đẹp mắt để tái sử dụng ở cả trang chi tiết bài viết lẫn trang danh mục.

Bước 1: Tạo file JLayout

Tạo một file PHP mới tại đường dẫn:src/templates/joomlalab/html/layouts/joomlalab/card/author_box.php

Bước 2: Lập trình nội dung bên trong JLayout

Trong JLayout, toàn bộ dữ liệu bạn truyền vào từ bên ngoài sẽ được gom chung trong một biến duy nhất có tên là $displayData (thường được ép kiểu hoặc trích xuất thành các biến cục bộ cho dễ thao tác):

PHP

<?php
\defined('_JEXEC') or die;

/**
 * JLayout hiển thị hộp thông tin tác giả (Author Box)
 * $displayData có thể là một Object chứa: name, avatar, bio, profile_url
 */
$author = $displayData['author'] ?? null;

if (!$author) {
    return;
}
?>

<div class="card border-0 bg-light rounded-4 p-4 shadow-sm my-4 author-box-layout">
    <div class="d-flex align-items-center">
        <?php if (!empty($author->avatar)) : ?>
            <img src="<?php echo htmlspecialchars($author->avatar, ENT_QUOTES, 'UTF-8'); ?>" 
                 alt="<?php echo htmlspecialchars($author->name, ENT_QUOTES, 'UTF-8'); ?>" 
                 class="rounded-circle me-3 object-fit-cover" width="70" height="70">
        <?php else : ?>
            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3 fw-bold fs-4" style="width: 70px; height: 70px;">
                <?php echo mb_substr($author->name, 0, 1); ?>
            </div>
        <?php endif; ?>
        
        <div>
            <h5 class="fw-bold mb-1 text-dark"><?php echo htmlspecialchars($author->name, ENT_QUOTES, 'UTF-8'); ?></h5>
            <p class="text-secondary small mb-2"><?php echo htmlspecialchars($author->bio ?? 'Tác giả chuyên mục tại JoomlaLab.', ENT_QUOTES, 'UTF-8'); ?></p>
            <?php if (!empty($author->profile_url)) : ?>
                <a href="<?php echo htmlspecialchars($author->profile_url, ENT_QUOTES, 'UTF-8'); ?>" class="btn btn-sm btn-outline-primary rounded-pill px-3">Xem tất cả bài viết</a>
            <?php endif; ?>
        </div>
    </div>
</div>

Bước 3: Gọi JLayout này ra bất kỳ đâu bằng PHP (`LayoutHelper`)

Bây giờ, tại bất kỳ file nào trong Template (như article/default.php hoặc blog.php), bạn chỉ cần gọi lớp LayoutHelper::render() để nhúng khối tác giả đó vào:

PHP

use Joomla\CMS\Layout\LayoutHelper;

// Chuẩn bị dữ liệu truyền vào JLayout
$authorData = [
    'author' => (object) [
        'name'       => $this->item->author,
        'avatar'     => $this->item->author_avatar ?? '',
        'bio'        => 'Kỹ sư phần mềm & Chuyên gia lập trình hệ thống backend Joomla.',
        'profile_url'=> '#'
    ]
];

// Gọi JLayout và in ra HTML
echo LayoutHelper::render('joomlalab.card.author_box', $authorData);

(Lưu ý: Tên layout truyền vào dùng dấu chấm . thay thế cho dấu gạch chéo / của thư mục: joomlalab.card.author_box tương ứng với đường dẫn joomlalab/card/author_box.php bên trong thư mục html/layouts/).

4. Kỹ thuật Ghi đè JLayout của Joomla Core (`Layout Overrides`)

Không chỉ tự viết JLayout riêng, bạn còn có thể ghi đè toàn bộ các JLayout có sẵn của Joomla Core để thay đổi giao diện cốt lõi của hệ thống mà không cần đụng đến file gốc.

Ví dụ thực tế: Joomla Core sử dụng JLayout joomla.content.info_block để hiển thị dòng thông tin "Được viết bởi... Đăng vào ngày..." trên các bài viết. Bạn muốn thay đổi hoàn toàn cách sắp xếp HTML của khối này:

Tìm file gốc của Joomla Core tại thư mục gốc: /layouts/joomla/content/info_block.php.
Copy file đó ra thư mục của template: /templates/joomlalab/html/layouts/joomla/content/info_block.php.
Mở file trong thư mục template lên và chỉnh sửa lại cấu trúc HTML, thêm các icon Bootstrap tùy ý.
Ngay lập tức, mọi Component trong toàn bộ hệ thống khi gọi JLayout joomla.content.info_block sẽ tự động sử dụng bản giao diện mới của bạn!

5. Tổng kết bài học

Hiểu rõ mô hình Componentized UI với JLayout giúp tái sử dụng các khối mã HTML nhỏ gọn theo nguyên tắc DRY.
Nắm vững cách tổ chức thư mục /templates/<template>/html/layouts/ và cách gọi hàm LayoutHelper::render('path.to.layout', $displayData).
Thành thạo kỹ thuật ghi đè các JLayout có sẵn của Joomla Core (Layout Overrides) để kiểm soát tuyệt đối từng chi tiết hiển thị nhỏ nhất trên website.

Trong Bài học 28, chúng ta sẽ chuyển sang phần tùy biến cấu hình động cho giao diện quản trị: Tạo các tham số cấu hình động cho Template (Template Parameters) trong trang quản trị.

joomla