# Widżety w CMS Total.js: używaj ich na stronie i pisz własne
> Jak widżet pojawia się w HTML strony (atrybut data-cms i jego JSON), części pliku widżetu, symbol CLASS, renderowanie widżetu na serwerze przez exports.render i instalowanie widżetów przez API.
Framework: cms
Product: CMS (cms@8071e48)
Language: pl
Content-SHA256: 3d0fef16a691b46baeda1d4577800bda3d9df8d131f431d25b3c47abd7cac247
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
**Widżet** to blok, który umieszczasz na stronie: nagłówek, alert, galeria. Niesie własny styl, formularz do konfiguracji w edytorze i opcjonalnie kod renderujący go na serwerze. Widżet to jeden plik HTML, jak komponent [Flow](/en/flow/write-a-component/), a CMS przechowuje go w swoich metadanych.
## Widżet na stronie
W HTML strony widżet to `div` z dwoma atrybutami:
```html
```
- `data-cms` to `__`, gdzie konfiguracja jest obiektem JSON zapisanym przez `encodeURIComponent`. Zapisuje go edytor; możesz zapisać go sam, gdy generujesz strony.
- `data-cms-id` to identyfikator instancji na stronie.
Gdy strona jest serwowana, CMS usuwa atrybut `data-cms`, zachowuje HTML w środku i dodaje do head styl każdego widżetu strony. Jeśli widżet nie jest zainstalowany, jego blok jest pomijany.
## Części pliku widżetu
| Część | Do czego służy |
|---|---|
| `
Hello world
```
`opt.config` to konfiguracja instancji, `opt.html` to HTML, który był w środku bloku, a `opt.id`, `opt.uid` i `opt.body` go opisują. `next(html, replace)` podaje HTML do serwowania; z `true` jako drugim argumentem zastępuje cały blok. Zapisaliśmy ten plik w lokalnym CMS, a strona z `data-cms="hello__..."` i `{"text":"mundo"}` wyszła jako `Hello MUNDO
`, z `.w-hello{color:#07c}` w head. Oficjalny widżet `picture` używa tej samej funkcji, aby dodać `loading="lazy"` do swojego obrazu, a `code`, aby wypisać kod ze swoich ustawień.
`exports.install` i `exports.uninstall` uruchamiają się z bazą danych CMS, gdy widżet jest dodawany, zmieniany lub usuwany.
## Instalowanie i usuwanie widżetów
Wtyczka *Widgets* administracji importuje plik; przez API jest to `widgets_save` z `{ "html": "", "singleton": true }` (`singleton` pomija widżet, jeśli już istnieje), `widgets_list`, `widgets_read`, `widgets_detail` i `widgets_remove`. Wymagają uprawnienia `widgets` (zobacz [API administracji](/en/cms/the-admin-api/)). 43 oficjalne widżety są w [repozytorium widżetów](/en/cms/the-widgets-repository/).