Hệ Thống Layout

Hệ Thống Layout của Jankx cung cấp cách quản lý layout động mạnh mẽ và linh hoạt.

Tổng Quan

┌─────────────────────────────────────────┐
│         Layout Registry                 │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐  │
│  │  Grid   │ │  List   │ │Carousel │  │
│  │ Layout  │ │ Layout  │ │ Layout  │  │
│  └────┬────┘ └────┬────┘ └────┬────┘  │
│       └────────────┴────────────┘       │
│              BlockTemplate              │
└─────────────────────────────────────────┘

Layout Registry

LayoutRegistry quản lý tất cả các layout đã đăng ký:

use Jankx\Layouts\DynamicDataLayout\LayoutRegistry;
use Jankx\Foundation\Application;

$app = Application::getInstance();
$registry = new LayoutRegistry($app);

// Đăng ký layout
$registry->register('grid', GridLayout::class);

// Kiểm tra và resolve
if ($registry->has('grid')) {
    $layout = $registry->resolve('grid', ['columns' => 3]);
}

Các Phương Thức

Phương Thức	Mô Tả
`register(string $name, string $class)`	Đăng ký layout mới
`unregister(string $name)`	Xóa layout
`has(string $name)`	Kiểm tra layout tồn tại
`get(string $name)`	Lấy tên class layout
`resolve(string $name, array $options)`	Tạo instance layout
`all()`	Lấy tất cả layouts
`getNames()`	Lấy tên tất cả layouts

Các Layout Có Sẵn

Grid Layout

use Jankx\Layouts\DynamicDataLayout\BlockLayouts\GridLayout;

$layout = new GridLayout();
$layout->setOptions([
    'columns' => 3,
    'gap' => 20,
    'class_name' => 'my-grid',
]);

echo $layout->render($data);

Tùy chọn:

columns (int): Số cột (1-12)
gap (int): Khoảng cách giữa items (px)
responsive (bool): Bật responsive
class_name (string): Tên class CSS

List Layout

use Jankx\Layouts\DynamicDataLayout\BlockLayouts\ListLayout;

$layout = new ListLayout();
$layout->setOptions([
    'style' => 'vertical',
    'class_name' => 'my-list',
]);

Tùy chọn:

style (string): 'vertical' | 'horizontal'
class_name (string): Tên class CSS

Carousel Layout PRO

use Jankx\Layouts\DynamicDataLayout\BlockLayouts\CarouselLayout;

$layout = new CarouselLayout();
$layout->setOptions([
    'slides_per_view' => 3,
    'autoplay' => true,
    'navigation' => true,
]);

Tùy chọn:

slides_per_view (int): Số slides hiển thị
autoplay (bool): Bật autoplay
navigation (bool): Hiện nút điều hướng
pagination (bool): Hiện dots phân trang

Tạo Layout Tùy Chỉnh

Bước 1: Tạo Class Layout

<?php
namespace MyTheme\Layouts;

use Jankx\Layouts\DynamicDataLayout\BlockTemplateLayout;

class MasonryLayout extends BlockTemplateLayout
{
    protected $defaultOptions = [
        'columns' => 3,
        'gap' => 15,
        'class_name' => 'masonry-layout',
    ];

    public function getHtmlStructure(): string
    {
        return '<div class="{{class_name}} masonry-grid">
            {{#items}}
                <div class="masonry-item" style="margin-bottom: {{gap}}px;">
                    {{content}}
                </div>
            {{/items}}
        </div>';
    }
}

Bước 2: Đăng Ký Layout

use Jankx\Layouts\DynamicDataLayout\LayoutRegistry;
use MyTheme\Layouts\MasonryLayout;

add_action('jankx/layouts/register', function(LayoutRegistry $registry) {
    $registry->register('masonry', MasonryLayout::class);
});

Các Cách Sử Dụng

Tích Hợp Template

$layout = LayoutRegistry::getInstance()->resolve('list', [
    'style' => 'vertical',
    'class_name' => 'post-list',
]);

$query = new WP_Query(['posts_per_page' => 10]);
$items = [];

while ($query->have_posts()) {
    $query->the_post();
    $items[] = [
        'title' => get_the_title(),
        'content' => get_the_excerpt(),
        'link' => get_permalink(),
    ];
}

echo $layout->render(['items' => $items]);

Các Nguyên Tắc Tốt

Luôn dùng LayoutRegistry - Không tạo layout trực tiếp
Xác thực tùy chọn - Dùng setOptions() với kiểm tra kiểu
Cache render - Cân nhắc cache output cho layout phức tạp
Thiết kế responsive - Dùng tùy chọn responsive tích hợp
Accessibility - Thêm ARIA labels và semantic HTML

← Quay Lại Tài Liệu