Override dei modelli di DXPR Builder.
DXPR Builder renderizza i suoi elementi nel browser, da modelli compilati nell’editor. Non esiste un modello di elemento che puoi copiare in un tema. Il modulo fornisce quattro modelli Twig per le sue pagine, e quelli li sottoponi a override nel normale modo Drupal. Questa pagina li elenca, spiega perché il markup degli elementi non può subire override e indica le route supportate dal modulo.
Modelli Twig di cui puoi fare l’override
I modelli vivono nella cartella templates/ del modulo:
| Modello | Uso | Variabili |
|---|---|---|
dxpr-license-info.html.twig |
Il riepilogo di utilizzo nelle pagine User Licenses e Content items, più il License info block | used_count, total_count, limit, block_label, total_label, used_label, more_info_link |
page--dxpr-builder--media-library.html.twig |
Il wrapper di pagina della finestra Media Library in /dxpr_builder/media-library |
le variabili page standard |
html--dxpr-builder--media-library.html.twig |
Il wrapper <html> della stessa finestra |
le variabili html standard |
page--people-list.html.twig |
Un punto di partenza per la pagina People (/admin/people) con un riepilogo delle licenze |
le variabili page standard più user_license |
I primi tre funzionano così come sono. Drupal non carica page--people-list.html.twig dal modulo. DXPR Builder aggiunge solo il suggerimento page__people_list e la variabile user_license nella pagina People. Per mostrare lì il riepilogo, copia il file nel tuo tema admin.
Per fare l’override di un modello:
- Copia il file da
modules/contrib/dxpr_builder/templates/nella cartellatemplates/del tema che lo renderizza. Le pagine admin e la finestra Media Library usano il tema admin. Il blocco License info usa il tema della regione in cui l’hai messo. - Modifica la copia.
- Svuota le cache con
drush cr.
Perché il markup degli elementi non può subire override
Il markup di ogni elemento è un modello twig.js in dxpr_builder/templates/, ad esempio elements/alert/alert.twig.html. La build compila questi modelli in dxpr_builder/dxpr_templates.js. L’editor li renderizza nel browser e salva l’HTML risultante nel campo. Ne conseguono due cose:
- Un modello modificato richiede una rebuild dell’editor. I siti che caricano l’editor dalla CDN di DXPR non possono usare affatto un modello modificato.
- Le pagine salvate mantengono l’HTML con cui sono state salvate. Un nuovo modello influisce solo sugli elementi renderizzati dopo la modifica.
Quindi il modulo non offre override dei modelli di elemento per sito. Usa una delle route sotto.
Route di personalizzazione supportate
| Obiettivo | Route |
|---|---|
| Layout riutilizzabili per gli editor | Modelli di pagina e Modelli utente, entrambi scelti nel builder |
| Cambia l’aspetto degli elementi | CSS personalizzato nel tema, mirato alle tue classi o alle classi az-*. |
| Dai agli editor stili con nome | Classi di utilità dal .info.yml del tema e stili personalizzati per l’editor di testo |
| Set di icone extra | Librerie di icone |
| Nuovi tipi di elemento | Creare elementi personalizzati |
Prossimi passi
- Modelli di pagina: il sistema di modelli usato dagli editor.
- Tematizzazione di DXPR Builder: come il CSS del builder e il tuo tema stanno insieme.