# Le dépôt de widgets du CMS : 43 widgets et comment les ajouter

> Une visite de totaljs/cms-widgets, les widgets officiels du CMS de Total.js : ce qu’ils couvrent, lesquels se rendent côté serveur, comment db.json est généré et comment installer un widget depuis un fichier.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) contient les widgets officiels du CMS de Total.js. Dans la révision documentée ici (`dc92cb7`), il compte **43 widgets** dans `widgets/`, un fichier HTML chacun, tous avec le groupe *Content*, plus le script qui génère le catalogue (`db.js`). Le format de chaque fichier est décrit dans [widgets](/en/cms/widgets/).

## Ce qu’ils couvrent

Le dépôt met tous les widgets dans un seul groupe ; le tableau ci-dessous ne fait que les ordonner d’après ce que leurs noms suggèrent, pour vous aider à les trouver.

| Type | Widgets |
|---|---|
| Texte | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Mise en page | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Texte avec image | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Images et médias | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Liens et boutons | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Intégration | `importer`, `uibuilder` (voir [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Neuf d’entre eux utilisent `exports.render` pour construire leur HTML côté serveur (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` et `uibuilder`) ; les autres sont des blocs statiques que l’éditeur configure et que le CMS sert tels quels.

## Ajouter un widget à votre CMS

Chaque fichier est un widget complet. Dans l’admin, ouvrez le plugin *Widgets* et importez le fichier, ou envoyez-le avec l’API :

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

Envoyez-le en `POST` à `/admin/` avec le cookie de session ou l’en-tête `x-token` ([l’API de l’admin](/en/cms/the-admin-api/)).

## Le catalogue : `db.json`

L’éditeur peut lister les widgets d’un catalogue. `db.js` le crée : il lit chaque fichier de `widgets/`, prend `name`, `author` et `preview` dans ses `exports`, construit l’adresse `https://cdn.totaljs.com/cms/<file>` et écrit `db.json` trié par nom, avec une entrée par widget (`id`, `name`, `url`, `author`, `preview`). `db.js` commence par `require('total4')`, il faut donc Total.js 4 pour l’exécuter, comme dans le dépôt des composants de Flow ([le dépôt des composants](/en/flow/the-components-repository/)).

## Vos propres widgets

Copiez le widget le plus proche, changez `exports.id` et `exports.name`, et adaptez le style, le design et les réglages. Si le widget a besoin d’une bibliothèque, listez-la dans `exports.dependencies` et le CMS l’ajoute à l’en-tête des pages qui l’utilisent.