# Widgetek a Total.js CMS-ben: használd őket oldalon és írj sajátot
> Hogyan jelenik meg egy widget egy oldal HTML-jében (a data-cms attribútum és JSON-ja), egy widgetfájl részei, a CLASS helyőrző, widget megjelenítése a szerveren az exports.render segítségével és widgetek telepítése az API-val.
Framework: cms
Product: CMS (cms@8071e48)
Language: hu
Content-SHA256: d4e6ab01fce74bc10cdd2195a9ff14b166d197560867a78f1cf7de80b13ba3c5
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
A **widget** egy blokk, amelyet egy oldalra helyezel: címsor, figyelmeztetés, galéria. Saját stílust, a szerkesztőben beállító űrlapot és opcionálisan a szerveren megjelenítő kódot hordoz. A widget egyetlen HTML fájl, mint a [Flow](/en/flow/write-a-component/) egy komponense, és a CMS a metaadataiban tárolja.
## Widget egy oldalon belül
Egy oldal HTML-jében a widget két attribútumú `div`:
```html
```
- A `data-cms` értéke `__`, ahol a konfiguráció `encodeURIComponent`-tel írt JSON objektum. A szerkesztő írja; te is megírhatod, amikor oldalakat generálsz.
- A `data-cms-id` a példány azonosítója az oldalon.
Amikor az oldalt kiszolgálja, a CMS eltávolítja a `data-cms` attribútumot, megtartja a benne lévő HTML-t, és a fejlécbe teszi az oldal minden widgetjének stílusát. Ha a widget nincs telepítve, a blokkja kimarad.
## Egy widgetfájl részei
| Rész | Mire való |
|---|---|
| `
Hello world
```
Az `opt.config` a példány konfigurációja, az `opt.html` a blokkban lévő HTML, az `opt.id`, `opt.uid` és `opt.body` pedig leírja azt. A `next(html, replace)` adja a kiszolgálandó HTML-t; második argumentumként `true`-val az egész blokkot lecseréli. Ezt a fájlt elmentettük egy helyi CMS-be, és a `data-cms="hello__..."` és `{"text":"mundo"}` értékű oldal `Hello MUNDO
` formában jött ki, a fejlécben `.w-hello{color:#07c}` szabállyal. A hivatalos `picture` widget ugyanezt a függvényt használja, hogy `loading="lazy"` attribútumot adjon a képéhez, a `code` pedig a beállításai kódjának kiírására.
Az `exports.install` és `exports.uninstall` a CMS adatbázisával fut, amikor a widgetet hozzáadják, módosítják vagy eltávolítják.
## Widgetek telepítése és eltávolítása
Az admin *Widgets* bővítménye importál egy fájlt; az API-n keresztül ez a `widgets_save` a `{ "html": "", "singleton": true }` törzzsel (a `singleton` kihagyja a widgetet, ha már létezik), `widgets_list`, `widgets_read`, `widgets_detail` és `widgets_remove`. Ezekhez `widgets` jogosultság kell (lásd [az admin API](/en/cms/the-admin-api/)). A 43 hivatalos widget a [widgettárolóban](/en/cms/the-widgets-repository/) van.