ro
English
Español
Slovenčina
Deutsch
Français
Italiano
Português
Polski
Čeština
Nederlands
Magyar
Svenska
Ελληνικά
БългарскиWidgeturile din CMS-ul Total.js: folosește-le într-o pagină și scrie-le pe ale tale
Un widget este un bloc pe care îl pui într-o pagină: un titlu, o alertă, o galerie. Poartă stilul lui, un formular pentru configurarea în editor și, opțional, cod care îl randează pe server. Un widget este un fișier HTML, ca o componentă din Flow, iar CMS-ul îl păstrează în metadatele sale.
Un widget într-o pagină
În HTML-ul unei pagini, un widget este un div cu două atribute:
<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-cmseste<widget id>__<configuration>, unde configurația este un obiect JSON scris cuencodeURIComponent. Îl scrie editorul; îl poți scrie și tu când generezi pagini.data-cms-ideste identificatorul instanței în pagină.
Când pagina este servită, CMS-ul elimină atributul data-cms, păstrează HTML-ul dinăuntru și adaugă în head stilul fiecărui widget al paginii. Dacă widgetul nu este instalat, blocul lui este abandonat.
Părțile unui fișier de widget
| Parte | La ce folosește |
|---|---|
<script total> | metadatele și codul serverului: exports.id, name, author, version, preview (o imagine sau un data URI), config (valorile implicite) și, opțional, dependencies, install, uninstall și render |
<style> | CSS-ul widgetului |
<body> | designul widgetului așa cum îl arată editorul; elementele cu clasa CMS_edit sunt cele editabile; celelalte clase CMS_* (CMS_repeat, CMS_remove, CMS_unwrap...) sunt marcaje pentru editor, iar compilatorul le elimină înainte ca pagina să fie servită |
<settings> | formularul care editează config în editor (intrări jComponent al căror path începe cu ?.) și un <script> cu exports.save(config, el) care schimbă designul când se schimbă configurația |
<template> | un șablon opțional pentru widget |
<readme> | ajutorul widgetului |
CLASS în stil, setări, șablon și design este înlocuit cu o clasă care aparține widgetului (w- urmat de id-ul lui), astfel încât două widgeturi nu împart niciodată o regulă: în widgetul alert, .CLASS-color1 devine .w-alert-color1.
exports.dependencies acceptă o listă sau un șir separat prin virgule: o adresă care se termină cu .js devine un <script src>, iar una care se termină cu .css un <link rel="stylesheet">, adăugate în head-ul paginii.
Randare pe server
Un widget fără exports.render este doar curățat și servit așa cum este. Cu render își poate construi HTML-ul din configurație:
<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 este configurația instanței, opt.html HTML-ul care era în interiorul blocului, iar opt.id, opt.uid și opt.body îl descriu. next(html, replace) dă HTML-ul de servit; cu true ca al doilea argument înlocuiește tot blocul. Am salvat acest fișier într-un CMS local și o pagină cu data-cms="hello__..." și {"text":"mundo"} a ieșit ca <p class="w-hello">Hello MUNDO</p>, cu .w-hello{color:#07c} în head. Widgetul oficial picture folosește aceeași funcție pentru a adăuga loading="lazy" imaginii sale, iar code pentru a tipări codul din setările sale.
exports.install și exports.uninstall rulează cu baza de date a CMS-ului când widgetul este adăugat, schimbat sau eliminat.
Instalarea și eliminarea widgeturilor
Pluginul Widgets al administrării importă un fișier; prin API este widgets_save cu { "html": "<file content>", "singleton": true } (singleton sare peste widget dacă există deja), widgets_list, widgets_read, widgets_detail și widgets_remove. Au nevoie de permisiunea widgets (vezi API-ul administrării). Cele 43 de widgeturi oficiale sunt în depozitul de widgeturi.