sv
English
Español
Slovenčina
Deutsch
Français
Italiano
Português
Polski
Čeština
Nederlands
Română
Magyar
Ελληνικά
БългарскиWidgetar i Total.js CMS: använd dem på en sida och skriv egna
En widget är ett block som du placerar på en sida: en rubrik, en varning, ett galleri. Den bär sin egen stil, ett formulär för att konfigurera den i editorn och, valfritt, kod som renderar den på servern. En widget är en HTML-fil, som en komponent i Flow, och CMS lagrar den i sin metadata.
En widget i en sida
I HTML för en sida är en widget en div med två attribut:
<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-cmsär<widget id>__<configuration>, där konfigurationen är ett JSON-objekt skrivet medencodeURIComponent. Editorn skriver det; du kan skriva det själv när du genererar sidor.data-cms-idär instansens identifierare i sidan.
När sidan serveras tar CMS bort attributet data-cms, behåller HTML inuti och lägger till stilen för varje widget på sidan i head. Om widgeten inte är installerad släpps dess block.
Delarna i en widgetfil
| Del | Vad den är till för |
|---|---|
<script total> | metadata och serverkod: exports.id, name, author, version, preview (en bild eller en data-URI), config (standardvärdena) och valfritt dependencies, install, uninstall och render |
<style> | widgetens CSS |
<body> | widgetens design som editorn visar den; element med klassen CMS_edit är de redigerbara; de andra CMS_*-klasserna (CMS_repeat, CMS_remove, CMS_unwrap...) är markörer för editorn, och kompilatorn tar bort dem innan sidan serveras |
<settings> | formuläret som redigerar config i editorn (jComponent-fält vars sökväg börjar med ?.) och ett <script> med exports.save(config, el) som ändrar designen när konfigurationen ändras |
<template> | en valfri mall för widgeten |
<readme> | widgetens hjälp |
CLASS i stilen, inställningarna, mallen och designen ersätts av en klass som tillhör widgeten (w- följt av dess id), så att två widgetar aldrig delar en regel: i widgeten alert blir .CLASS-color1 .w-alert-color1.
exports.dependencies accepterar en lista eller en kommaseparerad sträng: en adress som slutar på .js blir en <script src> och en som slutar på .css en <link rel="stylesheet">, tillagda i sidans head.
Rendera på servern
En widget utan exports.render rensas bara och serveras som den är. Med render kan den bygga sin HTML utifrån konfigurationen:
<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 är instansens konfiguration, opt.html HTML som fanns inuti blocket, och opt.id, opt.uid och opt.body beskriver det. next(html, replace) ger HTML att servera; med true som andra argument ersätter den hela blocket. Vi sparade den här filen i ett lokalt CMS och en sida med data-cms="hello__..." och {"text":"mundo"} kom ut som <p class="w-hello">Hello MUNDO</p>, med .w-hello{color:#07c} i head. Den officiella widgeten picture använder samma funktion för att lägga till loading="lazy" på sin bild, och code för att skriva ut koden från sina inställningar.
exports.install och exports.uninstall körs med CMS databas när widgeten läggs till, ändras eller tas bort.
Installera och ta bort widgetar
Pluginet Widgets i administrationen importerar en fil; via API:et är det widgets_save med { "html": "<file content>", "singleton": true } (singleton hoppar över widgeten om den redan finns), widgets_list, widgets_read, widgets_detail och widgets_remove. De kräver behörigheten widgets (se administrations-API:et). De 43 officiella widgetarna finns i widgetförrådet.