# Il repository dei widget del CMS: 43 widget e come aggiungerli

> Un giro in totaljs/cms-widgets, i widget ufficiali del CMS di Total.js: cosa coprono, quali vengono renderizzati sul server, come si genera db.json e come installare un widget da un file.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) contiene i widget ufficiali del CMS di Total.js. Nella revisione documentata qui (`dc92cb7`) ha **43 widget** in `widgets/`, un file HTML ciascuno, tutti con il gruppo *Content*, più lo script che genera il catalogo (`db.js`). Il formato di ogni file è descritto in [widget](/en/cms/widgets/).

## Cosa coprono

Il repository mette tutti i widget in un unico gruppo; la tabella qui sotto li ordina solo in base a ciò che suggeriscono i loro nomi, per aiutarti a trovarli.

| Tipo | Widget |
|---|---|
| Testo | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Struttura | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Testo con immagine | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Immagini e media | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Link e pulsanti | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integrazione | `importer`, `uibuilder` (vedi [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Nove di essi usano `exports.render` per costruire il proprio HTML sul server (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` e `uibuilder`); gli altri sono blocchi statici che l’editor configura e il CMS serve così come sono.

## Aggiungere un widget al tuo CMS

Ogni file è un widget completo. Nell’admin, apri il plugin *Widgets* e importa il file, oppure invialo con l’API:

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

Invialo con `POST` a `/admin/` con il cookie di sessione o l’intestazione `x-token` ([l’API dell’admin](/en/cms/the-admin-api/)).

## Il catalogo: `db.json`

L’editor può elencare i widget di un catalogo. `db.js` lo crea: legge ogni file di `widgets/`, prende `name`, `author` e `preview` dai suoi `exports`, costruisce l’indirizzo `https://cdn.totaljs.com/cms/<file>` e scrive `db.json` ordinato per nome, con una voce per widget (`id`, `name`, `url`, `author`, `preview`). `db.js` inizia con `require('total4')`, quindi richiede Total.js 4 per essere eseguito, come nel repository dei componenti di Flow ([il repository dei componenti](/en/flow/the-components-repository/)).

## I tuoi widget

Copia il widget più simile, cambia `exports.id` e `exports.name` e adatta stile, design e impostazioni. Se il widget ha bisogno di una libreria, indicala in `exports.dependencies` e il CMS la aggiunge all’head delle pagine che lo usano.