# Widgets im Total.js CMS: in einer Seite verwenden und eigene schreiben
> Wie ein Widget im HTML einer Seite erscheint (das Attribut data-cms und sein JSON), die Teile einer Widget-Datei, der Platzhalter CLASS, ein Widget mit exports.render auf dem Server rendern und Widgets über die API installieren.
Framework: cms
Product: CMS (cms@8071e48)
Language: de
Content-SHA256: 27c261d69f131f9633ab9d72b9b544dd15bb65663566c5cb68bb859ff44f6bc4
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
Ein **Widget** ist ein Block, den Sie in eine Seite setzen: eine Überschrift, ein Hinweis, eine Galerie. Es bringt seinen eigenen Stil, ein Formular zur Konfiguration im Editor und optional Code mit, der es auf dem Server rendert. Ein Widget ist eine HTML-Datei, wie eine Komponente von [Flow](/en/flow/write-a-component/), und das CMS speichert es in seinen Metadaten.
## Ein Widget in einer Seite
Im HTML einer Seite ist ein Widget ein `div` mit zwei Attributen:
```html
```
- `data-cms` ist `__`, wobei die Konfiguration ein mit `encodeURIComponent` geschriebenes JSON-Objekt ist. Der Editor schreibt es; Sie können es selbst schreiben, wenn Sie Seiten erzeugen.
- `data-cms-id` ist die Kennung der Instanz in der Seite.
Wenn die Seite ausgeliefert wird, entfernt das CMS das Attribut `data-cms`, behält das HTML darin und fügt den Stil jedes Widgets der Seite in den Head ein. Ist das Widget nicht installiert, wird sein Block verworfen.
## Die Teile einer Widget-Datei
| Teil | Wozu er dient |
|---|---|
| `
Hello world
```
`opt.config` ist die Konfiguration der Instanz, `opt.html` das HTML, das im Block stand, und `opt.id`, `opt.uid` und `opt.body` beschreiben ihn. `next(html, replace)` liefert das auszuliefernde HTML; mit `true` als zweitem Argument ersetzt es den ganzen Block. Wir haben diese Datei in einem lokalen CMS gespeichert, und eine Seite mit `data-cms="hello__..."` und `{"text":"mundo"}` kam als `Hello MUNDO
` heraus, mit `.w-hello{color:#07c}` im Head. Das offizielle Widget `picture` nutzt dieselbe Funktion, um seinem Bild `loading="lazy"` hinzuzufügen, und `code`, um den Code aus seinen Einstellungen auszugeben.
`exports.install` und `exports.uninstall` laufen mit der Datenbank des CMS, wenn das Widget hinzugefügt, geändert oder entfernt wird.
## Widgets installieren und entfernen
Das Plugin *Widgets* des Admins importiert eine Datei; über die API ist es `widgets_save` mit `{ "html": "", "singleton": true }` (`singleton` überspringt das Widget, wenn es schon existiert), `widgets_list`, `widgets_read`, `widgets_detail` und `widgets_remove`. Sie brauchen die Berechtigung `widgets` (siehe [die Admin-API](/en/cms/the-admin-api/)). Die 43 offiziellen Widgets stehen im [Widgets-Repository](/en/cms/the-widgets-repository/).