hu
English
Español
Slovenčina
Deutsch
Français
Italiano
Português
Polski
Čeština
Nederlands
Română
Svenska
Ελληνικά
БългарскиWidgetek a Total.js CMS-ben: használd őket oldalon és írj sajátot
A widget egy blokk, amelyet egy oldalra helyezel: címsor, figyelmeztetés, galéria. Saját stílust, a szerkesztőben beállító űrlapot és opcionálisan a szerveren megjelenítő kódot hordoz. A widget egyetlen HTML fájl, mint a Flow egy komponense, és a CMS a metaadataiban tárolja.
Widget egy oldalon belül
Egy oldal HTML-jében a widget két attribútumú div:
<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>- A
data-cmsértéke<widget id>__<configuration>, ahol a konfigurációencodeURIComponent-tel írt JSON objektum. A szerkesztő írja; te is megírhatod, amikor oldalakat generálsz. - A
data-cms-ida példány azonosítója az oldalon.
Amikor az oldalt kiszolgálja, a CMS eltávolítja a data-cms attribútumot, megtartja a benne lévő HTML-t, és a fejlécbe teszi az oldal minden widgetjének stílusát. Ha a widget nincs telepítve, a blokkja kimarad.
Egy widgetfájl részei
| Rész | Mire való |
|---|---|
<script total> | a metaadatok és a szerverkód: exports.id, name, author, version, preview (kép vagy data URI), config (az alapértékek) és opcionálisan dependencies, install, uninstall és render |
<style> | a widget CSS-e |
<body> | a widget terve úgy, ahogy a szerkesztő mutatja; a CMS_edit osztályú elemek szerkeszthetők; a többi CMS_* osztály (CMS_repeat, CMS_remove, CMS_unwrap...) a szerkesztő jelölője, és a fordító eltávolítja őket, mielőtt az oldalt kiszolgálja |
<settings> | a config értéket szerkesztő űrlap a szerkesztőben (jComponent beviteli mezők, amelyek útvonala ?.-tal kezdődik) és egy <script> az exports.save(config, el) függvénnyel, amely a konfiguráció változásakor módosítja a tervet |
<template> | a widget opcionális sablonja |
<readme> | a widget súgója |
A CLASS a stílusban, a beállításokban, a sablonban és a tervben a widgethez tartozó osztályra cserélődik (w- és az azonosítója), így két widget soha nem osztozik szabályon: az alert widgetben a .CLASS-color1 .w-alert-color1 lesz.
Az exports.dependencies listát vagy vesszővel elválasztott karakterláncot fogad: a .js-re végződő cím <script src>, a .css-re végződő <link rel="stylesheet"> lesz, és az oldal fejlécébe kerül.
Megjelenítés a szerveren
Az exports.render nélküli widgetet csak megtisztítja és úgy szolgálja ki, ahogy van. A render segítségével a konfigurációból építheti fel a HTML-jét:
<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>Az opt.config a példány konfigurációja, az opt.html a blokkban lévő HTML, az opt.id, opt.uid és opt.body pedig leírja azt. A next(html, replace) adja a kiszolgálandó HTML-t; második argumentumként true-val az egész blokkot lecseréli. Ezt a fájlt elmentettük egy helyi CMS-be, és a data-cms="hello__..." és {"text":"mundo"} értékű oldal <p class="w-hello">Hello MUNDO</p> formában jött ki, a fejlécben .w-hello{color:#07c} szabállyal. A hivatalos picture widget ugyanezt a függvényt használja, hogy loading="lazy" attribútumot adjon a képéhez, a code pedig a beállításai kódjának kiírására.
Az exports.install és exports.uninstall a CMS adatbázisával fut, amikor a widgetet hozzáadják, módosítják vagy eltávolítják.
Widgetek telepítése és eltávolítása
Az admin Widgets bővítménye importál egy fájlt; az API-n keresztül ez a widgets_save a { "html": "<file content>", "singleton": true } törzzsel (a singleton kihagyja a widgetet, ha már létezik), widgets_list, widgets_read, widgets_detail és widgets_remove. Ezekhez widgets jogosultság kell (lásd az admin API). A 43 hivatalos widget a widgettárolóban van.