# El repositorio de widgets del CMS: 43 widgets y cómo añadirlos

> Un recorrido por totaljs/cms-widgets, los widgets oficiales del CMS de Total.js: qué cubren, cuáles se renderizan en el servidor, cómo se genera db.json y cómo instalar un widget desde un archivo.

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

[`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) contiene los widgets oficiales del CMS de Total.js. En la revisión documentada aquí (`dc92cb7`) tiene **43 widgets** en `widgets/`, un archivo HTML cada uno, todos con el grupo *Content*, además del script que genera el catálogo (`db.js`). El formato de cada archivo se describe en [widgets](/en/cms/widgets/).

## Qué cubren

El repositorio pone todos los widgets en un solo grupo; la tabla siguiente solo los ordena según lo que sugieren sus nombres, para ayudarte a encontrarlos.

| Tipo | Widgets |
|---|---|
| Texto | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Estructura | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Texto con imagen | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Imágenes y multimedia | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Enlaces y botones | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Integración | `importer`, `uibuilder` (consulta [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Nueve de ellos usan `exports.render` para construir su HTML en el servidor (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` y `uibuilder`); el resto son bloques estáticos que el editor configura y el CMS sirve tal cual.

## Añadir un widget a tu CMS

Cada archivo es un widget completo. En el admin, abre el plugin *Widgets* e importa el archivo, o envíalo con la API:

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

Envíalo con `POST` a `/admin/` con la cookie de sesión o la cabecera `x-token` ([la API del admin](/en/cms/the-admin-api/)).

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

El editor puede listar los widgets de un catálogo. `db.js` lo crea: lee cada archivo de `widgets/`, toma `name`, `author` y `preview` de sus `exports`, construye la dirección `https://cdn.totaljs.com/cms/<file>` y escribe `db.json` ordenado por nombre, con una entrada por widget (`id`, `name`, `url`, `author`, `preview`). `db.js` empieza con `require('total4')`, así que necesita Total.js 4 para ejecutarse, como en el repositorio de los componentes de Flow ([el repositorio de componentes](/en/flow/the-components-repository/)).

## Tus propios widgets

Copia el widget más parecido, cambia `exports.id` y `exports.name` y adapta el estilo, el diseño y los ajustes. Si el widget necesita una biblioteca, ponla en `exports.dependencies` y el CMS la añade a la cabecera de las páginas que lo usan.