# Widgety v CMS Total.js: použijte je na stránce a napište vlastní
> Jak se widget zobrazuje v HTML stránky (atribut data-cms a jeho JSON), části souboru widgetu, zástupný symbol CLASS, vykreslení widgetu na serveru přes exports.render a instalace widgetů přes API.
Framework: cms
Product: CMS (cms@8071e48)
Language: cs
Content-SHA256: b3125b0471c599a83d549132c7db326ad50de6706226a4932b7f1386d60f74cf
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
**Widget** je blok, který umístíte na stránku: nadpis, upozornění, galerii. Nese vlastní styl, formulář pro jeho nastavení v editoru a volitelně kód, který jej vykreslí na serveru. Widget je jeden soubor HTML, jako komponenta [Flow](/en/flow/write-a-component/), a CMS jej ukládá do svých metadat.
## Widget na stránce
V HTML stránky je widget `div` se dvěma atributy:
```html
```
- `data-cms` je `__`, kde konfigurace je objekt JSON zapsaný přes `encodeURIComponent`. Zapisuje jej editor; můžete jej zapsat i sami, když generujete stránky.
- `data-cms-id` je identifikátor instance na stránce.
Když se stránka obslouží, CMS odstraní atribut `data-cms`, ponechá HTML uvnitř a do hlavičky přidá styl každého widgetu stránky. Pokud widget není nainstalován, jeho blok se vynechá.
## Části souboru widgetu
| Část | K čemu slouží |
|---|---|
| `
Hello world
```
`opt.config` je konfigurace instance, `opt.html` HTML, které bylo uvnitř bloku, a `opt.id`, `opt.uid` a `opt.body` jej popisují. `next(html, replace)` předá HTML k obsluze; s `true` jako druhým argumentem nahradí celý blok. Tento soubor jsme uložili do lokálního CMS a stránka s `data-cms="hello__..."` a `{"text":"mundo"}` vyšla jako `Hello MUNDO
` s `.w-hello{color:#07c}` v hlavičce. Oficiální widget `picture` používá stejnou funkci k přidání `loading="lazy"` ke svému obrázku a `code` k vypsání kódu ze svých nastavení.
`exports.install` a `exports.uninstall` se spustí s databází CMS, když se widget přidá, změní nebo odstraní.
## Instalace a odstranění widgetů
Plugin *Widgets* administrace importuje soubor; přes API je to `widgets_save` s `{ "html": "", "singleton": true }` (`singleton` widget vynechá, pokud už existuje), `widgets_list`, `widgets_read`, `widgets_detail` a `widgets_remove`. Vyžadují oprávnění `widgets` (viz [API administrace](/en/cms/the-admin-api/)). 43 oficiálních widgetů je v [repozitáři widgetů](/en/cms/the-widgets-repository/).