Sonata Extra Bundle: quản lý tài nguyên front-end

Giới thiệu

Gói SonataExtra giới thiệu một cách linh hoạt và mạnh mẽ để quản lý các tài nguyên CSS và JavaScript trong các khối của Sonata. Tính năng này cho phép các nhà phát triển dễ dàng và hiệu quả bao gồm các tệp CSS và JS bên ngoài, cũng như các kiểu và kịch bản trực tuyến.

Hội nhập

Tải hiệu quả

Các tài nguyên (CSS/JS) chỉ được tải trong trang nếu khối tương ứng được sử dụng. Điều này đảm bảo tải hiệu quả và tránh tải thừa không cần thiết, điều này đặc biệt có lợi cho việc tối ưu hóa hiệu suất.

Dịch vụ quản lý tài nguyên giao diện người dùng

Dịch vụ AssetsHandler là trung tâm của tính năng này. Nó chịu trách nhiệm quản lý việc thêm các tài nguyên CSS và JS vào các khối Sonata của bạn. Dịch vụ này hỗ trợ việc thêm các tài nguyên liên quan và trực tuyến và cho phép chỉ định các chỉ số tùy chỉnh cho việc nhóm các tài nguyên.

Khai báo tài nguyên trong các khối

Để sử dụng dịch vụ AssetsHandler trong các khối của bạn, hãy làm theo các bước sau:

Tiêm phụ thuộc:

Tiêm vào AssetsHandler và Environment dịch vụ trong khoa phẫu thuật của bạn bằng cách sử dụng autowireDependencies phương pháp.

use Partitech\SonataExtra\Service\AssetsHandler;
use Twig\Environment;
use Symfony\Contracts\Service\Attribute\Required;

private $assetsHandler;

#[Required]
public function autowireDependencies(Environment $twig, AssetsHandler $assetsHandler): void {
    parent::__construct($twig);
    $this->assetsHandler = $assetsHandler;
}

Thêm tài sản trong phương thức execute :

Sử dụng addCss, addJs, addJsInline, và addCssInline phương pháp để thêm tài sản vào khối của bạn.

public function execute(BlockContextInterface $blockContext, Response $response = null)
{
    // Adding external CSS
    $this->assetsHandler->addCss('https://unpkg.com/library@latest/dist/style.css', 'default');

    // Adding external JS with @bool defer parameter (default false)
    $this->assetsHandler->addJs('https://unpkg.com/library@latest/dist/script.js', true, 'default');

    // Adding inline JS 
    $this->assetsHandler->addJsInline('console.log(window)', true, 'default');

    // Adding inline CSS
    $this->assetsHandler->addCssInline('.class{ }', 'default');

    // ... rest of the execute method ...
}

Kết xuất tài nguyên trong các mô hình

Để hiển thị các tài nguyên trong các template Twig của bạn, hãy sử dụng các hàm Twig sau được cung cấp bởi bundle SonataExtra:

{{ sonata_extra_get_blocks_css('default')|raw }}
{{ sonata_extra_get_blocks_css_inline('default', true)|raw }}
{{ sonata_extra_get_blocks_js('default')|raw }}
{{ sonata_extra_get_blocks_js_inline('default', true)|raw }}

'default' Chỉ mục được sử dụng theo mặc định nếu giá trị không được đặt, nhưng các chỉ mục tùy chỉnh có thể được chỉ định khi phát triển các khối tùy chỉnh.
Cái |raw Bộ lọc được sử dụng để đảm bảo hiển thị đúng các thẻ HTML.
Bạn có thể sử dụng tham số nén (boolean mặc định là false) để làm cho dữ liệu được nén sonata_extra_get_blocks_css_inline và sonata_extra_get_blocks_js_inline

Cá nhân hóa

Các nhà phát triển có thể tạo các chỉ mục tùy chỉnh để nhóm các tài nguyên khi phát triển các khối của họ. Điều này mang lại sự linh hoạt trong việc quản lý tài nguyên qua các phần khác nhau của ứng dụng.

Điều chỉnh ví dụ cho phù hợp với phiên bản đã cài đặt

Các ví dụ Symfony và Sonata vẫn gắn với các phiên bản được chỉ ra trong bài viết. Symfony 4.x và Symfony 6.2 không còn được duy trì: đối với một dự án hiện tại, hãy sử dụng một nhánh được duy trì và tài liệu tương ứng chính xác với các phụ thuộc của bạn.

php bin/console about
composer show symfony/framework-bundle sonata-project/admin-bundle

Trước khi tiếp tục với mã, hãy kiểm tra các chữ ký, dịch vụ, tuyến đường và mẫu liên quan. Sau đó thêm một bài kiểm tra chức năng bao phủ quyền, mã HTTP và kết quả hiển thị.

Tham chiếu : phiên bản Symfony được hỗ trợ.