Sonata Extra Bundle: gestione delle risorse front-end

Presentazione

Il bundle SonataExtra introduce un modo flessibile e potente di gestire le risorse CSS e JavaScript nei blocchi Sonata. Questa funzionalità consente agli sviluppatori di includere facilmente ed efficacemente file CSS e JS esterni, così come stili e script inline.

Integrazione

Caricamento efficiente

Le risorse (CSS/JS) vengono caricate nella pagina solo se il blocco corrispondente viene utilizzato. Questo garantisce un caricamento efficiente ed evita sovraccarichi inutili, il che è particolarmente vantaggioso per l'ottimizzazione delle prestazioni.

Servizio di gestione delle risorse front-end

Il servizio AssetsHandler è al cuore di questa funzionalità. È responsabile della gestione dell'aggiunta delle risorse CSS e JS ai tuoi blocchi Sonata. Questo servizio si occupa di aggiungere risorse collegate e in linea e permette di specificare indici personalizzati per il raggruppamento delle risorse.

Dichiarare le risorse nei blocchi

Per utilizzare il servizio AssetsHandler nei vostri blocchi, seguite questi passaggi:

Iniettare dipendenze:

Iniettare il AssetsHandler e Environment servizi nel vostro reparto blocco utilizzando il autowireDependencies metodo.

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;
}

Aggiungere asset nel metodo execute :

Usa il addCss, addJs, addJsInline, e addCssInline metodi per aggiungere risorse al tuo blocco.

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 ...
}

Rendering delle risorse nei modelli

Per rendere le risorse nei vostri template Twig, utilizzate le seguenti funzioni Twig fornite dal 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' L'indice è utilizzato per impostazione predefinita se il valore non è definito, ma degli indici personalizzati possono essere specificati durante lo sviluppo di blocchi personalizzati.
Il |raw Il filtro è utilizzato per garantire la corretta resa dei tag HTML.
Puoi utilizzare il parametro di compressione (booleano predefinito false) per renderlo compresso sonata_extra_get_blocks_css_inline e sonata_extra_get_blocks_js_inline

Personalizzazione

Gli sviluppatori possono creare degli indici personalizzati per raggruppare le risorse durante lo sviluppo dei loro blocchi. Ciò offre una flessibilità nella gestione delle risorse attraverso diverse parti dell'applicazione.

Adattare l’esempio alla versione installata

Gli esempi Symfony e Sonata rimangono legati alle versioni indicate nell’articolo. Symfony 4.x e Symfony 6.2 non sono più supportati: per un progetto attuale, utilizzate un ramo mantenuto e la documentazione corrispondente esattamente alle vostre dipendenze.

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

Prima di riprendere il codice, controllate le firme, i servizi, le rotte e i template interessati. Aggiungete poi un test funzionale che copra le autorizzazioni, il codice HTTP e il risultato visibile.

Riferimento : versioni di Symfony supportate.