nl
English
Español
Slovenčina
Deutsch
Français
Italiano
Português
Polski
Čeština
Română
Magyar
Svenska
Ελληνικά
БългарскиWidgets in het Total.js CMS: gebruik ze in een pagina en schrijf je eigen
Een widget is een blok dat je in een pagina plaatst: een kop, een waarschuwing, een galerij. Het draagt zijn eigen stijl, een formulier om het in de editor te configureren en, optioneel, code die het op de server rendert. Een widget is één HTML-bestand, zoals een component van Flow, en het CMS bewaart het in zijn metagegevens.
Een widget in een pagina
In de HTML van een pagina is een widget een div met twee attributen:
<div data-cms="headline__%7B%22h%22%3A%22h1%22%2C%22align%22%3A%22left%22%7D" data-cms-id="h1">
<h1 class="w-headline-h">Hello CMS</h1>
<p>Some text</p>
</div>data-cmsis<widget id>__<configuration>, waarbij de configuratie een JSON-object is dat metencodeURIComponentis geschreven. De editor schrijft het; je kunt het zelf schrijven wanneer je pagina’s genereert.data-cms-idis de identificatie van de instantie in de pagina.
Wanneer de pagina wordt geserveerd, verwijdert het CMS het attribuut data-cms, houdt de HTML erbinnen en voegt de stijl van elke widget van de pagina aan de head toe. Als de widget niet is geïnstalleerd, wordt zijn blok weggelaten.
De onderdelen van een widgetbestand
| Onderdeel | Waarvoor het dient |
|---|---|
<script total> | de metagegevens en de servercode: exports.id, name, author, version, preview (een afbeelding of een data-URI), config (de standaardwaarden) en optioneel dependencies, install, uninstall en render |
<style> | de CSS van de widget |
<body> | het ontwerp van de widget zoals de editor het toont; elementen met de klasse CMS_edit zijn de bewerkbare; de andere CMS_*-klassen (CMS_repeat, CMS_remove, CMS_unwrap...) zijn markeringen voor de editor, en de compiler verwijdert ze voordat de pagina wordt geserveerd |
<settings> | het formulier dat config in de editor bewerkt (jComponent-invoervelden waarvan het pad met ?. begint) en een <script> met exports.save(config, el) dat het ontwerp wijzigt wanneer de configuratie verandert |
<template> | een optioneel sjabloon voor de widget |
<readme> | de hulp van de widget |
CLASS in de stijl, de instellingen, het sjabloon en het ontwerp wordt vervangen door een klasse die bij de widget hoort (w- gevolgd door zijn id), zodat twee widgets nooit een regel delen: in de widget alert wordt .CLASS-color1 .w-alert-color1.
exports.dependencies accepteert een lijst of een met komma’s gescheiden tekenreeks: een adres dat op .js eindigt wordt een <script src> en een dat op .css eindigt een <link rel="stylesheet">, toegevoegd aan de head van de pagina.
Op de server renderen
Een widget zonder exports.render wordt alleen opgeschoond en geserveerd zoals hij is. Met render kan hij zijn HTML uit de configuratie opbouwen:
<script total>
exports.id = 'hello';
exports.name = 'Hello';
exports.author = 'Me';
exports.version = '1';
exports.config = { text: 'world' };
exports.render = function(opt, next) {
next('<p class="w-hello">Hello ' + (opt.config.text || '').toUpperCase() + '</p>', true);
};
</script>
<style>
.CLASS { color: #07c; }
</style>
<body>
<p class="CLASS CMS_edit">Hello world</p>
</body>opt.config is de configuratie van de instantie, opt.html de HTML die in het blok stond, en opt.id, opt.uid en opt.body beschrijven het. next(html, replace) geeft de te serveren HTML; met true als tweede argument vervangt het het hele blok. We bewaarden dit bestand in een lokaal CMS en een pagina met data-cms="hello__..." en {"text":"mundo"} kwam eruit als <p class="w-hello">Hello MUNDO</p>, met .w-hello{color:#07c} in de head. De officiële widget picture gebruikt dezelfde functie om loading="lazy" aan zijn afbeelding toe te voegen, en code om de code uit zijn instellingen af te drukken.
exports.install en exports.uninstall draaien met de database van het CMS wanneer de widget wordt toegevoegd, gewijzigd of verwijderd.
Widgets installeren en verwijderen
De plugin Widgets van het beheer importeert een bestand; via de API is het widgets_save met { "html": "<file content>", "singleton": true } (singleton slaat de widget over als hij al bestaat), widgets_list, widgets_read, widgets_detail en widgets_remove. Ze vereisen het recht widgets (zie de beheer-API). De 43 officiële widgets staan in de widgetsrepository.