# Repozitář widgetů CMS: 43 widgetů a jak je přidat

> Prohlídka totaljs/cms-widgets, oficiálních widgetů CMS Total.js: co pokrývají, které se vykreslují na serveru, jak se generuje db.json a jak nainstalovat widget ze souboru.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) obsahuje oficiální widgety CMS Total.js. V zde dokumentované revizi (`dc92cb7`) má **43 widgetů** ve `widgets/`, každý je jeden soubor HTML, všechny ve skupině *Content*, plus skript, který generuje katalog (`db.js`). Formát každého souboru je popsán v [widgety](/en/cms/widgets/).

## Co pokrývají

Repozitář dává všechny widgety do jedné skupiny; tabulka níže je jen řadí podle toho, co naznačují jejich názvy, aby se vám snáze hledaly.

| Druh | Widgety |
|---|---|
| Text | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Rozvržení | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Text s obrázkem | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Obrázky a média | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Odkazy a tlačítka | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integrace | `importer`, `uibuilder` (viz [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Devět z nich používá `exports.render` k sestavení HTML na serveru (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` a `uibuilder`); ostatní jsou statické bloky, které editor nastavuje a CMS je obsluhuje tak, jak jsou.

## Přidání widgetu do vašeho CMS

Každý soubor je kompletní widget. V administraci otevřete plugin *Widgets* a soubor importujte, nebo jej pošlete přes API:

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

Pošlete jej přes `POST` na `/admin/` s cookie relace nebo hlavičkou `x-token` ([API administrace](/en/cms/the-admin-api/)).

## Katalog: `db.json`

Editor může vypsat widgety z katalogu. `db.js` jej vytvoří: přečte každý soubor ve `widgets/`, z jeho `exports` vezme `name`, `author` a `preview`, sestaví adresu `https://cdn.totaljs.com/cms/<file>` a zapíše `db.json` seřazený podle názvu s jedním záznamem na widget (`id`, `name`, `url`, `author`, `preview`). `db.js` začíná `require('total4')`, takže ke spuštění potřebuje Total.js 4, jako v repozitáři komponent Flow ([repozitář komponent](/en/flow/the-components-repository/)).

## Vaše vlastní widgety

Zkopírujte nejbližší widget, změňte `exports.id` a `exports.name` a upravte styl, návrh a nastavení. Pokud widget potřebuje knihovnu, uveďte ji v `exports.dependencies` a CMS ji přidá do hlavičky stránek, které jej používají.