# Widgetförrådet för CMS: 43 widgetar och hur du lägger till dem

> En rundtur i totaljs/cms-widgets, de officiella widgetarna för Total.js CMS: vad de täcker, vilka som renderar på servern, hur db.json genereras och hur du installerar en widget från en fil.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) innehåller de officiella widgetarna för Total.js CMS. I revisionen som dokumenteras här (`dc92cb7`) har det **43 widgetar** i `widgets/`, en HTML-fil vardera, alla med gruppen *Content*, plus skriptet som genererar katalogen (`db.js`). Formatet på varje fil beskrivs i [widgetar](/en/cms/widgets/).

## Vad de täcker

Förrådet lägger alla widgetar i en grupp; tabellen nedan ordnar dem bara efter vad deras namn antyder, för att hjälpa dig hitta dem.

| Slag | Widgetar |
|---|---|
| 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 med bild | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Bilder och media | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Länkar och knappar | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integration | `importer`, `uibuilder` (se [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Nio av dem använder `exports.render` för att bygga sin HTML på servern (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` och `uibuilder`); de övriga är statiska block som editorn konfigurerar och CMS serverar som de är.

## Lägg till en widget i ditt CMS

Varje fil är en komplett widget. Öppna pluginet *Widgets* i administrationen och importera filen, eller skicka den med API:et:

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

Skicka den med `POST` till `/admin/` med sessionscookien eller headern `x-token` ([administrations-API:et](/en/cms/the-admin-api/)).

## Katalogen: `db.json`

Editorn kan lista widgetarna i en katalog. `db.js` skapar den: den läser varje fil i `widgets/`, hämtar `name`, `author` och `preview` från dess `exports`, bygger adressen `https://cdn.totaljs.com/cms/<file>` och skriver `db.json` sorterad efter namn, med en post per widget (`id`, `name`, `url`, `author`, `preview`). `db.js` börjar med `require('total4')`, så den behöver Total.js 4 för att köras, som i förrådet för Flows komponenter ([komponentförrådet](/en/flow/the-components-repository/)).

## Dina egna widgetar

Kopiera den närmaste widgeten, ändra `exports.id` och `exports.name` och anpassa stil, design och inställningar. Om widgeten behöver ett bibliotek, ange det i `exports.dependencies` så lägger CMS till det i head på sidorna som använder den.