# O repositório de widgets do CMS: 43 widgets e como os adicionar

> Uma visita a totaljs/cms-widgets, os widgets oficiais do CMS do Total.js: o que cobrem, quais são renderizados no servidor, como se gera o db.json e como instalar um widget a partir de um ficheiro.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) contém os widgets oficiais do CMS do Total.js. Na revisão documentada aqui (`dc92cb7`) tem **43 widgets** em `widgets/`, um ficheiro HTML cada, todos com o grupo *Content*, além do script que gera o catálogo (`db.js`). O formato de cada ficheiro está descrito em [widgets](/en/cms/widgets/).

## O que cobrem

O repositório põe todos os widgets num único grupo; a tabela seguinte apenas os ordena pelo que os seus nomes sugerem, para o ajudar a encontrá-los.

| Tipo | Widgets |
|---|---|
| Texto | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Estrutura | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Texto com imagem | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Imagens e multimédia | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Ligações e botões | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integração | `importer`, `uibuilder` (veja [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Nove deles usam `exports.render` para construir o seu HTML no servidor (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` e `uibuilder`); os restantes são blocos estáticos que o editor configura e o CMS serve tal como estão.

## Adicionar um widget ao seu CMS

Cada ficheiro é um widget completo. No admin, abra o plugin *Widgets* e importe o ficheiro, ou envie-o com a API:

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

Envie-o com `POST` para `/admin/` com o cookie de sessão ou o cabeçalho `x-token` ([a API do admin](/en/cms/the-admin-api/)).

## O catálogo: `db.json`

O editor pode listar os widgets de um catálogo. O `db.js` cria-o: lê cada ficheiro de `widgets/`, tira `name`, `author` e `preview` dos seus `exports`, constrói o endereço `https://cdn.totaljs.com/cms/<file>` e escreve `db.json` ordenado por nome, com uma entrada por widget (`id`, `name`, `url`, `author`, `preview`). O `db.js` começa com `require('total4')`, por isso precisa do Total.js 4 para correr, como no repositório dos componentes do Flow ([o repositório de componentes](/en/flow/the-components-repository/)).

## Os seus próprios widgets

Copie o widget mais parecido, mude `exports.id` e `exports.name` e adapte o estilo, o design e as definições. Se o widget precisar de uma biblioteca, indique-a em `exports.dependencies` e o CMS acrescenta-a ao head das páginas que o usam.