# Уиджетите в CMS на Total.js: използвайте ги в страница и пишете свои
> Как се появява един уиджет в HTML на страница (атрибутът data-cms и неговият JSON), частите на файла на уиджет, заместителят CLASS, визуализиране на уиджет на сървъра с exports.render и инсталиране на уиджети през API.
Framework: cms
Product: CMS (cms@8071e48)
Language: bg
Content-SHA256: 2539c8e52eb7cb1a3e01396b60a9b12d247c4bc09e772ce4d099f0963b3a7f87
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
**Уиджетът** е блок, който поставяте в страница: заглавие, предупреждение, галерия. Носи собствен стил, форма за настройването му в редактора и по избор код, който го визуализира на сървъра. Уиджетът е един HTML файл, като компонент на [Flow](/en/flow/write-a-component/), а CMS го пази в метаданните си.
## Уиджет в страница
В HTML на страница уиджетът е `div` с два атрибута:
```html
```
- `data-cms` е `__`, където конфигурацията е JSON обект, записан с `encodeURIComponent`. Записва го редакторът; можете да го запишете и сами, когато генерирате страници.
- `data-cms-id` е идентификаторът на инстанцията в страницата.
Когато страницата се сервира, CMS премахва атрибута `data-cms`, запазва HTML вътре и добавя в head стила на всеки уиджет на страницата. Ако уиджетът не е инсталиран, блокът му се отпада.
## Частите на файла на уиджет
| Част | За какво служи |
|---|---|
| `
Hello world
```
`opt.config` е конфигурацията на инстанцията, `opt.html` е HTML, който е бил вътре в блока, а `opt.id`, `opt.uid` и `opt.body` го описват. `next(html, replace)` дава HTML за сервиране; с `true` като втори аргумент заменя целия блок. Записахме този файл в локален CMS и страница с `data-cms="hello__..."` и `{"text":"mundo"}` излезе като `Hello MUNDO
`, с `.w-hello{color:#07c}` в head. Официалният уиджет `picture` използва същата функция, за да добави `loading="lazy"` към изображението си, а `code` — за да изведе кода от настройките си.
`exports.install` и `exports.uninstall` се изпълняват с базата данни на CMS, когато уиджетът се добави, промени или премахне.
## Инсталиране и премахване на уиджети
Добавката *Widgets* на администрацията импортира файл; през API това е `widgets_save` с `{ "html": "", "singleton": true }` (`singleton` прескача уиджета, ако вече съществува), `widgets_list`, `widgets_read`, `widgets_detail` и `widgets_remove`. Изискват правото `widgets` (вижте [API на администрацията](/en/cms/the-admin-api/)). 43-те официални уиджета са в [хранилището с уиджети](/en/cms/the-widgets-repository/).