# Depozitul de widgeturi CMS: 43 de widgeturi și cum le adaugi

> Un tur al totaljs/cms-widgets, widgeturile oficiale ale CMS-ului Total.js: ce acoperă, care se randează pe server, cum se generează db.json și cum instalezi un widget dintr-un fișier.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) conține widgeturile oficiale ale CMS-ului Total.js. În revizia documentată aici (`dc92cb7`) are **43 de widgeturi** în `widgets/`, câte un fișier HTML, toate cu grupul *Content*, plus scriptul care generează catalogul (`db.js`). Formatul fiecărui fișier este descris în [widgeturi](/en/cms/widgets/).

## Ce acoperă

Depozitul pune toate widgeturile într-un singur grup; tabelul de mai jos le ordonează doar după ce sugerează numele lor, ca să le găsești mai ușor.

| Tip | Widgeturi |
|---|---|
| Text | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Structură | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Text cu imagine | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Imagini și media | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Linkuri și butoane | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integrare | `importer`, `uibuilder` (vezi [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Nouă dintre ele folosesc `exports.render` pentru a-și construi HTML-ul pe server (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` și `uibuilder`); restul sunt blocuri statice pe care editorul le configurează, iar CMS-ul le servește așa cum sunt.

## Adaugă un widget în CMS-ul tău

Fiecare fișier este un widget complet. În administrare, deschide pluginul *Widgets* și importă fișierul sau trimite-l cu API-ul:

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

Trimite-l cu `POST` la `/admin/` cu cookie-ul de sesiune sau antetul `x-token` ([API-ul administrării](/en/cms/the-admin-api/)).

## Catalogul: `db.json`

Editorul poate lista widgeturile unui catalog. `db.js` îl creează: citește fiecare fișier din `widgets/`, ia `name`, `author` și `preview` din `exports`, construiește adresa `https://cdn.totaljs.com/cms/<file>` și scrie `db.json` sortat după nume, cu o intrare pe widget (`id`, `name`, `url`, `author`, `preview`). `db.js` începe cu `require('total4')`, deci are nevoie de Total.js 4 pentru a rula, ca în depozitul componentelor Flow ([depozitul de componente](/en/flow/the-components-repository/)).

## Widgeturile tale

Copiază widgetul cel mai apropiat, schimbă `exports.id` și `exports.name` și adaptează stilul, designul și setările. Dacă widgetul are nevoie de o bibliotecă, scrie-o în `exports.dependencies`, iar CMS-ul o adaugă în head-ul paginilor care îl folosesc.