# Das CMS-Widgets-Repository: 43 Widgets und wie man sie hinzufügt

> Ein Rundgang durch totaljs/cms-widgets, die offiziellen Widgets des Total.js CMS: was sie abdecken, welche auf dem Server rendern, wie db.json erzeugt wird und wie man ein Widget aus einer Datei installiert.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) enthält die offiziellen Widgets des Total.js CMS. In der hier dokumentierten Revision (`dc92cb7`) hat es **43 Widgets** in `widgets/`, jeweils eine HTML-Datei, alle mit der Gruppe *Content*, sowie das Skript, das den Katalog erzeugt (`db.js`). Das Format jeder Datei ist in [Widgets](/en/cms/widgets/) beschrieben.

## Was sie abdecken

Das Repository legt jedes Widget in eine Gruppe; die folgende Tabelle ordnet sie nur nach dem, was ihre Namen nahelegen, damit Sie sie leichter finden.

| Art | Widgets |
|---|---|
| Text | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Layout | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Text mit Bild | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Bilder und Medien | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Links und Schaltflächen | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integration | `importer`, `uibuilder` (siehe [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Neun davon verwenden `exports.render`, um ihr HTML auf dem Server zu bauen (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` und `uibuilder`); die übrigen sind statische Blöcke, die der Editor konfiguriert und das CMS unverändert ausliefert.

## Ein Widget zu Ihrem CMS hinzufügen

Jede Datei ist ein vollständiges Widget. Öffnen Sie im Admin das Plugin *Widgets* und importieren Sie die Datei, oder senden Sie sie mit der API:

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

Senden Sie es per `POST` an `/admin/` mit dem Sitzungs-Cookie oder dem Header `x-token` ([die Admin-API](/en/cms/the-admin-api/)).

## Der Katalog: `db.json`

Der Editor kann die Widgets eines Katalogs auflisten. `db.js` erzeugt ihn: Es liest jede Datei in `widgets/`, entnimmt `name`, `author` und `preview` ihren `exports`, baut die Adresse `https://cdn.totaljs.com/cms/<file>` und schreibt `db.json` nach Namen sortiert, mit einem Eintrag pro Widget (`id`, `name`, `url`, `author`, `preview`). `db.js` beginnt mit `require('total4')` und braucht daher Total.js 4 zum Ausführen, wie im Repository der Komponenten von Flow ([das Komponenten-Repository](/en/flow/the-components-repository/)).

## Ihre eigenen Widgets

Kopieren Sie das ähnlichste Widget, ändern Sie `exports.id` und `exports.name` und passen Sie Stil, Design und Einstellungen an. Braucht das Widget eine Bibliothek, tragen Sie sie in `exports.dependencies` ein, und das CMS fügt sie dem Head der Seiten hinzu, die es verwenden.