De CMS-widgetsrepository: 43 widgets en hoe je ze toevoegt
totaljs/cms-widgets bevat de officiële widgets van het Total.js CMS. In de hier gedocumenteerde revisie (dc92cb7) heeft het 43 widgets in widgets/, elk één HTML-bestand, allemaal met de groep Content, plus het script dat de catalogus genereert (db.js). Het formaat van elk bestand wordt beschreven in widgets.
Wat ze dekken
De repository zet alle widgets in één groep; de onderstaande tabel ordent ze alleen op wat hun namen suggereren, om je te helpen ze te vinden.
| Soort | Widgets |
|---|---|
| Tekst | headline, paragraph, paragraph2, article, alert, list, keyvalue, properties, summary, tags, code, codehighlighter |
| Indeling | container, vcontainer, columns100, columnshalfs, columnsthirds, panelsthirds, box, emptyspace, line, gradient |
| Tekst met afbeelding | textimageleft, textimageright, textimagecenter, textimageflex, features2, features3, insight, team, partners, expansionlist |
| Afbeeldingen en media | picture, images, imagelinks, gallery, video, bufferwall |
| Links en knoppen | linkbutton, buttonsgroup, socialnetworks |
| Integratie | importer, uibuilder (zie UI Builder) |
Negen ervan gebruiken exports.render om hun HTML op de server te bouwen (bufferwall, code, codehighlighter, images, imagelinks, importer, picture, partners en uibuilder); de rest zijn statische blokken die de editor configureert en het CMS ongewijzigd serveert.
Een widget aan je CMS toevoegen
Elk bestand is een complete widget. Open in het beheer de plugin Widgets en importeer het bestand, of stuur het met de API:
{ "schema": "widgets_save", "data": { "html": "<the content of headline.html>", "singleton": true } }Stuur het met POST naar /admin/ met de sessiecookie of de header x-token (de beheer-API).
De catalogus: db.json
De editor kan de widgets van een catalogus tonen. db.js maakt hem: het leest elk bestand van widgets/, haalt name, author en preview uit de exports, bouwt het adres https://cdn.totaljs.com/cms/<file> en schrijft db.json gesorteerd op naam, met één item per widget (id, name, url, author, preview). db.js begint met require('total4'), dus het heeft Total.js 4 nodig om te draaien, zoals in de repository van de componenten van Flow (de componentenrepository).
Je eigen widgets
Kopieer de dichtstbijzijnde widget, wijzig exports.id en exports.name en pas de stijl, het ontwerp en de instellingen aan. Als de widget een bibliotheek nodig heeft, zet je die in exports.dependencies en het CMS voegt hem toe aan de head van de pagina’s die hem gebruiken.