# Widgeturile din CMS-ul Total.js: folosește-le într-o pagină și scrie-le pe ale tale
> Cum apare un widget în HTML-ul unei pagini (atributul data-cms și JSON-ul lui), părțile unui fișier de widget, substituentul CLASS, randarea unui widget pe server cu exports.render și instalarea widgeturilor prin API.
Framework: cms
Product: CMS (cms@8071e48)
Language: ro
Content-SHA256: d7c192bbabd2ed1b7b2cf3e49415808712d9909f62310f319589910a63b8af92
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
Un **widget** este un bloc pe care îl pui într-o pagină: un titlu, o alertă, o galerie. Poartă stilul lui, un formular pentru configurarea în editor și, opțional, cod care îl randează pe server. Un widget este un fișier HTML, ca o componentă din [Flow](/en/flow/write-a-component/), iar CMS-ul îl păstrează în metadatele sale.
## Un widget într-o pagină
În HTML-ul unei pagini, un widget este un `div` cu două atribute:
```html
```
- `data-cms` este `__`, unde configurația este un obiect JSON scris cu `encodeURIComponent`. Îl scrie editorul; îl poți scrie și tu când generezi pagini.
- `data-cms-id` este identificatorul instanței în pagină.
Când pagina este servită, CMS-ul elimină atributul `data-cms`, păstrează HTML-ul dinăuntru și adaugă în head stilul fiecărui widget al paginii. Dacă widgetul nu este instalat, blocul lui este abandonat.
## Părțile unui fișier de widget
| Parte | La ce folosește |
|---|---|
| `
Hello world
```
`opt.config` este configurația instanței, `opt.html` HTML-ul care era în interiorul blocului, iar `opt.id`, `opt.uid` și `opt.body` îl descriu. `next(html, replace)` dă HTML-ul de servit; cu `true` ca al doilea argument înlocuiește tot blocul. Am salvat acest fișier într-un CMS local și o pagină cu `data-cms="hello__..."` și `{"text":"mundo"}` a ieșit ca `Hello MUNDO
`, cu `.w-hello{color:#07c}` în head. Widgetul oficial `picture` folosește aceeași funcție pentru a adăuga `loading="lazy"` imaginii sale, iar `code` pentru a tipări codul din setările sale.
`exports.install` și `exports.uninstall` rulează cu baza de date a CMS-ului când widgetul este adăugat, schimbat sau eliminat.
## Instalarea și eliminarea widgeturilor
Pluginul *Widgets* al administrării importă un fișier; prin API este `widgets_save` cu `{ "html": "", "singleton": true }` (`singleton` sare peste widget dacă există deja), `widgets_list`, `widgets_read`, `widgets_detail` și `widgets_remove`. Au nevoie de permisiunea `widgets` (vezi [API-ul administrării](/en/cms/the-admin-api/)). Cele 43 de widgeturi oficiale sunt în [depozitul de widgeturi](/en/cms/the-widgets-repository/).