Le dépôt de widgets du CMS : 43 widgets et comment les ajouter
totaljs/cms-widgets contient les widgets officiels du CMS de Total.js. Dans la révision documentée ici (dc92cb7), il compte 43 widgets dans widgets/, un fichier HTML chacun, tous avec le groupe Content, plus le script qui génère le catalogue (db.js). Le format de chaque fichier est décrit dans widgets.
Ce qu’ils couvrent
Le dépôt met tous les widgets dans un seul groupe ; le tableau ci-dessous ne fait que les ordonner d’après ce que leurs noms suggèrent, pour vous aider à les trouver.
| Type | Widgets |
|---|---|
| Texte | headline, paragraph, paragraph2, article, alert, list, keyvalue, properties, summary, tags, code, codehighlighter |
| Mise en page | container, vcontainer, columns100, columnshalfs, columnsthirds, panelsthirds, box, emptyspace, line, gradient |
| Texte avec image | textimageleft, textimageright, textimagecenter, textimageflex, features2, features3, insight, team, partners, expansionlist |
| Images et médias | picture, images, imagelinks, gallery, video, bufferwall |
| Liens et boutons | linkbutton, buttonsgroup, socialnetworks |
| Intégration | importer, uibuilder (voir UI Builder) |
Neuf d’entre eux utilisent exports.render pour construire leur HTML côté serveur (bufferwall, code, codehighlighter, images, imagelinks, importer, picture, partners et uibuilder) ; les autres sont des blocs statiques que l’éditeur configure et que le CMS sert tels quels.
Ajouter un widget à votre CMS
Chaque fichier est un widget complet. Dans l’admin, ouvrez le plugin Widgets et importez le fichier, ou envoyez-le avec l’API :
{ "schema": "widgets_save", "data": { "html": "<the content of headline.html>", "singleton": true } }Envoyez-le en POST à /admin/ avec le cookie de session ou l’en-tête x-token (l’API de l’admin).
Le catalogue : db.json
L’éditeur peut lister les widgets d’un catalogue. db.js le crée : il lit chaque fichier de widgets/, prend name, author et preview dans ses exports, construit l’adresse https://cdn.totaljs.com/cms/<file> et écrit db.json trié par nom, avec une entrée par widget (id, name, url, author, preview). db.js commence par require('total4'), il faut donc Total.js 4 pour l’exécuter, comme dans le dépôt des composants de Flow (le dépôt des composants).
Vos propres widgets
Copiez le widget le plus proche, changez exports.id et exports.name, et adaptez le style, le design et les réglages. Si le widget a besoin d’une bibliothèque, listez-la dans exports.dependencies et le CMS l’ajoute à l’en-tête des pages qui l’utilisent.