en
Español
Slovenčina
Deutsch
Français
Italiano
Português
Polski
Čeština
Nederlands
Română
Magyar
Svenska
Ελληνικά
БългарскиThe CMS widgets repository: 43 widgets and how to add them
totaljs/cms-widgets holds the official widgets of the Total.js CMS. In the revision documented here (dc92cb7) it has 43 widgets in widgets/, one HTML file each, all with the group Content, plus the script that generates the catalogue (db.js). The format of every file is described in widgets.
What they cover
The repository puts every widget in one group; the table below only orders them by what their names suggest, to help you find them.
| Kind | Widgets |
|---|---|
| Text | headline, paragraph, paragraph2, article, alert, list, keyvalue, properties, summary, tags, code, codehighlighter |
| Layout | container, vcontainer, columns100, columnshalfs, columnsthirds, panelsthirds, box, emptyspace, line, gradient |
| Text with image | textimageleft, textimageright, textimagecenter, textimageflex, features2, features3, insight, team, partners, expansionlist |
| Images and media | picture, images, imagelinks, gallery, video, bufferwall |
| Links and buttons | linkbutton, buttonsgroup, socialnetworks |
| Integration | importer, uibuilder (see UI Builder) |
Nine of them use exports.render to build their HTML on the server (bufferwall, code, codehighlighter, images, imagelinks, importer, picture, partners and uibuilder); the rest are static blocks that the editor configures and the CMS serves as they are.
Add a widget to your CMS
Each file is a complete widget. In the admin, open the plugin Widgets and import the file, or send it with the API:
{ "schema": "widgets_save", "data": { "html": "<the content of headline.html>", "singleton": true } }POST it to /admin/ with the session cookie or the x-token header (the admin API).
The catalogue: db.json
The editor can list the widgets of a catalogue. db.js creates it: it reads every file of widgets/, takes name, author and preview from its exports, builds the address https://cdn.totaljs.com/cms/<file> and writes db.json sorted by name, with one entry per widget (id, name, url, author, preview). db.js starts with require('total4'), so it needs Total.js 4 to run, as in the repository of the components of Flow (the components repository).
Your own widgets
Copy the closest widget, change exports.id and exports.name, and adapt the style, the design and the settings. If the widget needs a library, list it in exports.dependencies and the CMS adds it to the head of the pages that use it.