# De CMS-widgetsrepository: 43 widgets en hoe je ze toevoegt

> Een rondleiding door totaljs/cms-widgets, de officiële widgets van het Total.js CMS: wat ze dekken, welke op de server renderen, hoe db.json wordt gegenereerd en hoe je een widget uit een bestand installeert.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) bevat de officiële widgets van het Total.js CMS. In de hier gedocumenteerde revisie (`dc92cb7`) heeft het **43 widgets** in `widgets/`, elk één HTML-bestand, allemaal met de groep *Content*, plus het script dat de catalogus genereert (`db.js`). Het formaat van elk bestand wordt beschreven in [widgets](/en/cms/widgets/).

## Wat ze dekken

De repository zet alle widgets in één groep; de onderstaande tabel ordent ze alleen op wat hun namen suggereren, om je te helpen ze te vinden.

| Soort | Widgets |
|---|---|
| Tekst | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Indeling | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Tekst met afbeelding | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Afbeeldingen en media | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Links en knoppen | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integratie | `importer`, `uibuilder` (zie [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Negen ervan gebruiken `exports.render` om hun HTML op de server te bouwen (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` en `uibuilder`); de rest zijn statische blokken die de editor configureert en het CMS ongewijzigd serveert.

## Een widget aan je CMS toevoegen

Elk bestand is een complete widget. Open in het beheer de plugin *Widgets* en importeer het bestand, of stuur het met de API:

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

Stuur het met `POST` naar `/admin/` met de sessiecookie of de header `x-token` ([de beheer-API](/en/cms/the-admin-api/)).

## De catalogus: `db.json`

De editor kan de widgets van een catalogus tonen. `db.js` maakt hem: het leest elk bestand van `widgets/`, haalt `name`, `author` en `preview` uit de `exports`, bouwt het adres `https://cdn.totaljs.com/cms/<file>` en schrijft `db.json` gesorteerd op naam, met één item per widget (`id`, `name`, `url`, `author`, `preview`). `db.js` begint met `require('total4')`, dus het heeft Total.js 4 nodig om te draaien, zoals in de repository van de componenten van Flow ([de componentenrepository](/en/flow/the-components-repository/)).

## Je eigen widgets

Kopieer de dichtstbijzijnde widget, wijzig `exports.id` en `exports.name` en pas de stijl, het ontwerp en de instellingen aan. Als de widget een bibliotheek nodig heeft, zet je die in `exports.dependencies` en het CMS voegt hem toe aan de head van de pagina’s die hem gebruiken.