# Repozytorium widżetów CMS: 43 widżety i jak je dodać

> Przegląd totaljs/cms-widgets, oficjalnych widżetów CMS Total.js: co obejmują, które renderują się na serwerze, jak generowany jest db.json i jak zainstalować widżet z pliku.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) zawiera oficjalne widżety CMS Total.js. W opisanej tu rewizji (`dc92cb7`) ma **43 widżety** w `widgets/`, każdy to jeden plik HTML, wszystkie w grupie *Content*, oraz skrypt generujący katalog (`db.js`). Format każdego pliku opisano w [widżety](/en/cms/widgets/).

## Co obejmują

Repozytorium umieszcza wszystkie widżety w jednej grupie; poniższa tabela porządkuje je tylko według tego, co sugerują ich nazwy, aby łatwiej było je znaleźć.

| Rodzaj | Widżety |
|---|---|
| Tekst | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Układ | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Tekst z obrazem | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Obrazy i media | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Odnośniki i przyciski | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integracja | `importer`, `uibuilder` (zobacz [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Dziewięć z nich używa `exports.render` do zbudowania HTML na serwerze (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` i `uibuilder`); pozostałe to statyczne bloki, które edytor konfiguruje, a CMS serwuje bez zmian.

## Dodanie widżetu do Twojego CMS

Każdy plik to kompletny widżet. W administracji otwórz wtyczkę *Widgets* i zaimportuj plik albo wyślij go przez API:

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

Wyślij go przez `POST` na `/admin/` z ciasteczkiem sesji lub nagłówkiem `x-token` ([API administracji](/en/cms/the-admin-api/)).

## Katalog: `db.json`

Edytor może wyświetlić widżety z katalogu. Tworzy go `db.js`: czyta każdy plik z `widgets/`, z jego `exports` bierze `name`, `author` i `preview`, buduje adres `https://cdn.totaljs.com/cms/<file>` i zapisuje `db.json` posortowany według nazwy, z jednym wpisem na widżet (`id`, `name`, `url`, `author`, `preview`). `db.js` zaczyna się od `require('total4')`, więc do uruchomienia potrzebuje Total.js 4, jak w repozytorium komponentów Flow ([repozytorium komponentów](/en/flow/the-components-repository/)).

## Twoje własne widżety

Skopiuj najbliższy widżet, zmień `exports.id` i `exports.name` i dostosuj styl, projekt oraz ustawienia. Jeśli widżet potrzebuje biblioteki, wpisz ją do `exports.dependencies`, a CMS doda ją do head stron, które go używają.