cs
English
Español
Slovenčina
Deutsch
Français
Italiano
Português
Polski
Nederlands
Română
Magyar
Svenska
Ελληνικά
БългарскиWidgety v CMS Total.js: použijte je na stránce a napište vlastní
Widget je blok, který umístíte na stránku: nadpis, upozornění, galerii. Nese vlastní styl, formulář pro jeho nastavení v editoru a volitelně kód, který jej vykreslí na serveru. Widget je jeden soubor HTML, jako komponenta Flow, a CMS jej ukládá do svých metadat.
Widget na stránce
V HTML stránky je widget div se dvěma atributy:
<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 konfigurace je objekt JSON zapsaný přesencodeURIComponent. Zapisuje jej editor; můžete jej zapsat i sami, když generujete stránky.data-cms-idje identifikátor instance na stránce.
Když se stránka obslouží, CMS odstraní atribut data-cms, ponechá HTML uvnitř a do hlavičky přidá styl každého widgetu stránky. Pokud widget není nainstalován, jeho blok se vynechá.
Části souboru widgetu
| Část | K čemu slouží |
|---|---|
<script total> | metadata a serverový kód: exports.id, name, author, version, preview (obrázek nebo data URI), config (výchozí hodnoty) a volitelně dependencies, install, uninstall a render |
<style> | CSS widgetu |
<body> | návrh widgetu tak, jak jej zobrazuje editor; prvky s třídou CMS_edit jsou upravitelné; ostatní třídy CMS_* (CMS_repeat, CMS_remove, CMS_unwrap...) jsou značky pro editor a kompilátor je před obsluhou stránky odstraní |
<settings> | formulář, který upravuje config v editoru (vstupy jComponent, jejichž cesta začíná ?.) a <script> s exports.save(config, el), který změní návrh při změně konfigurace |
<template> | volitelná šablona widgetu |
<readme> | nápověda widgetu |
CLASS ve stylu, nastavení, šabloně a návrhu se nahradí třídou, která patří widgetu (w- a jeho id), takže dva widgety nikdy nesdílejí pravidlo: ve widgetu alert se .CLASS-color1 stane .w-alert-color1.
exports.dependencies přijímá seznam nebo řetězec oddělený čárkami: adresa končící .js se stane <script src> a končící .css se stane <link rel="stylesheet">, přidanými do hlavičky stránky.
Vykreslení na serveru
Widget bez exports.render se jen vyčistí a obslouží tak, jak je. S render může sestavit své HTML z konfigurace:
<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 konfigurace instance, opt.html HTML, které bylo uvnitř bloku, a opt.id, opt.uid a opt.body jej popisují. next(html, replace) předá HTML k obsluze; s true jako druhým argumentem nahradí celý blok. Tento soubor jsme uložili do lokálního CMS a stránka s data-cms="hello__..." a {"text":"mundo"} vyšla jako <p class="w-hello">Hello MUNDO</p> s .w-hello{color:#07c} v hlavičce. Oficiální widget picture používá stejnou funkci k přidání loading="lazy" ke svému obrázku a code k vypsání kódu ze svých nastavení.
exports.install a exports.uninstall se spustí s databází CMS, když se widget přidá, změní nebo odstraní.
Instalace a odstranění widgetů
Plugin Widgets administrace importuje soubor; přes API je to widgets_save s { "html": "<file content>", "singleton": true } (singleton widget vynechá, pokud už existuje), widgets_list, widgets_read, widgets_detail a widgets_remove. Vyžadují oprávnění widgets (viz API administrace). 43 oficiálních widgetů je v repozitáři widgetů.