El repositorio de widgets del CMS: 43 widgets y cómo añadirlos
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.
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) |
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:
{ "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).
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).
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.