sk
English
Español
Deutsch
Français
Italiano
Português
Polski
Čeština
Nederlands
Română
Magyar
Svenska
Ελληνικά
БългарскиWidgety v CMS Total.js: použite ich na stránke a napíšte vlastné
Widget je blok, ktorý umiestnite na stránku: nadpis, upozornenie, galériu. Nesie vlastný štýl, formulár na jeho nastavenie v editore a voliteľne kód, ktorý ho vykreslí na serveri. Widget je jeden súbor HTML, ako komponent Flow, a CMS ho ukladá do svojich metadát.
Widget na stránke
V HTML stránky je widget div s dvoma atribútmi:
<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-cmsje<widget id>__<configuration>, kde konfigurácia je objekt JSON zapísaný cezencodeURIComponent. Zapisuje ho editor; môžete ho zapísať aj sami, keď generujete stránky.data-cms-idje identifikátor inštancie na stránke.
Keď sa stránka obslúži, CMS odstráni atribút data-cms, ponechá HTML vo vnútri a do hlavičky pridá štýl každého widgetu stránky. Ak widget nie je nainštalovaný, jeho blok sa vynechá.
Časti súboru widgetu
| Časť | Na čo slúži |
|---|---|
<script total> | metadáta a serverový kód: exports.id, name, author, version, preview (obrázok alebo data URI), config (predvolené hodnoty) a voliteľne dependencies, install, uninstall a render |
<style> | CSS widgetu |
<body> | dizajn widgetu tak, ako ho zobrazuje editor; prvky s triedou CMS_edit sú upraviteľné; ostatné triedy CMS_* (CMS_repeat, CMS_remove, CMS_unwrap...) sú značky pre editor a kompilátor ich pred obsluhou stránky odstráni |
<settings> | formulár, ktorý upravuje config v editore (vstupy jComponent, ktorých cesta začína ?.) a <script> s exports.save(config, el), ktorý zmení dizajn pri zmene konfigurácie |
<template> | voliteľná šablóna widgetu |
<readme> | pomocník widgetu |
CLASS v štýle, nastaveniach, šablóne a dizajne sa nahradí triedou, ktorá patrí widgetu (w- a jeho id), takže dva widgety nikdy nezdieľajú pravidlo: vo widgete alert sa .CLASS-color1 stane .w-alert-color1.
exports.dependencies prijíma zoznam alebo reťazec oddelený čiarkami: adresa končiaca .js sa stane <script src> a adresa končiaca .css sa stane <link rel="stylesheet">, pridaným do hlavičky stránky.
Vykreslenie na serveri
Widget bez exports.render sa iba vyčistí a obslúži tak, ako je. S render môže zostaviť svoje HTML z konfigurácie:
<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 je konfigurácia inštancie, opt.html HTML, ktoré bolo vo vnútri bloku, a opt.id, opt.uid a opt.body ho opisujú. next(html, replace) odovzdá HTML, ktoré sa obslúži; s true ako druhým argumentom nahradí celý blok. Tento súbor sme uložili do lokálneho CMS a stránka s data-cms="hello__..." a {"text":"mundo"} vyšla ako <p class="w-hello">Hello MUNDO</p> s .w-hello{color:#07c} v hlavičke. Oficiálny widget picture používa rovnakú funkciu na pridanie loading="lazy" k obrázku a code na vypísanie kódu zo svojich nastavení.
exports.install a exports.uninstall sa spustia s databázou CMS, keď sa widget pridá, zmení alebo odstráni.
Inštalácia a odstránenie widgetov
Plugin Widgets administrácie importuje súbor; cez API je to widgets_save s { "html": "<file content>", "singleton": true } (singleton vynechá widget, ak už existuje), widgets_list, widgets_read, widgets_detail a widgets_remove. Vyžadujú oprávnenie widgets (pozri API administrácie). 43 oficiálnych widgetov je v repozitári widgetov.