# Хранилището с уиджети на CMS: 43 уиджета и как да ги добавите

> Разходка из totaljs/cms-widgets, официалните уиджети на CMS на Total.js: какво покриват, кои се визуализират на сървъра, как се генерира db.json и как да инсталирате уиджет от файл.

Framework: cms
Product: CMS (cms@8071e48)
Language: bg
Content-SHA256: ef02d2b3d63fa4d01a116281897b1aff5ae150cd128f87ed619a0fd37c9ef18e
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) съдържа официалните уиджети на CMS на Total.js. В документираната тук ревизия (`dc92cb7`) има **43 уиджета** в `widgets/`, по един HTML файл, всички с групата *Content*, плюс скрипта, който генерира каталога (`db.js`). Форматът на всеки файл е описан в [уиджети](/en/cms/widgets/).

## Какво покриват

Хранилището поставя всички уиджети в една група; таблицата по-долу само ги подрежда по това, което подсказват имената им, за да ги намирате по-лесно.

| Вид | Уиджети |
|---|---|
| Текст | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Структура | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Текст с изображение | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Изображения и медия | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Връзки и бутони | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Интеграция | `importer`, `uibuilder` (вижте [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Девет от тях използват `exports.render`, за да изградят своя HTML на сървъра (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` и `uibuilder`); останалите са статични блокове, които редакторът настройва, а CMS сервира такива, каквито са.

## Добавяне на уиджет към вашия CMS

Всеки файл е цял уиджет. В администрацията отворете добавката *Widgets* и импортирайте файла или го изпратете с API:

```json
{ "schema": "widgets_save", "data": { "html": "<the content of headline.html>", "singleton": true } }
```

Изпратете го с `POST` към `/admin/` със сесийната бисквитка или заглавката `x-token` ([API на администрацията](/en/cms/the-admin-api/)).

## Каталогът: `db.json`

Редакторът може да изброява уиджетите на каталог. `db.js` го създава: чете всеки файл от `widgets/`, взема `name`, `author` и `preview` от неговите `exports`, изгражда адреса `https://cdn.totaljs.com/cms/<file>` и записва `db.json`, подреден по име, с по един запис за уиджет (`id`, `name`, `url`, `author`, `preview`). `db.js` започва с `require('total4')`, затова за изпълнение му трябва Total.js 4, както в хранилището на компонентите на Flow ([хранилището с компоненти](/en/flow/the-components-repository/)).

## Вашите собствени уиджети

Копирайте най-близкия уиджет, сменете `exports.id` и `exports.name` и приспособете стила, дизайна и настройките. Ако уиджетът се нуждае от библиотека, впишете я в `exports.dependencies` и CMS я добавя в head на страниците, които го ползват.