Уиджетите в CMS на Total.js: използвайте ги в страница и пишете свои

CMS · cms@8071e48 cmswidgetsrenderclassdata-cms

Уиджетът е блок, който поставяте в страница: заглавие, предупреждение, галерия. Носи собствен стил, форма за настройването му в редактора и по избор код, който го визуализира на сървъра. Уиджетът е един HTML файл, като компонент на Flow, а CMS го пази в метаданните си.

Уиджет в страница

В HTML на страница уиджетът е 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>

data-cms е <widget id>__<configuration>, където конфигурацията е JSON обект, записан с encodeURIComponent. Записва го редакторът; можете да го запишете и сами, когато генерирате страници.
data-cms-id е идентификаторът на инстанцията в страницата.

Когато страницата се сервира, CMS премахва атрибута data-cms, запазва HTML вътре и добавя в head стила на всеки уиджет на страницата. Ако уиджетът не е инсталиран, блокът му се отпада.

Частите на файла на уиджет

Част	За какво служи
`<script total>`	метаданните и сървърният код: `exports.id`, `name`, `author`, `version`, `preview` (изображение или data URI), `config` (стойностите по подразбиране) и по избор `dependencies`, `install`, `uninstall` и `render`
`<style>`	CSS на уиджета
`<body>`	дизайнът на уиджета, както го показва редакторът; елементите с клас `CMS_edit` са редактируемите; другите класове `CMS_*` (`CMS_repeat`, `CMS_remove`, `CMS_unwrap`...) са маркери за редактора, а компилаторът ги премахва, преди страницата да се сервира
`<settings>`	формата, която редактира `config` в редактора (входове на jComponent, чийто път започва с `?.`) и `<script>` с `exports.save(config, el)`, който променя дизайна, когато конфигурацията се промени
`<template>`	незадължителен шаблон за уиджета
`<readme>`	помощта на уиджета

CLASS в стила, настройките, шаблона и дизайна се заменя с клас, който принадлежи на уиджета (w- и неговото id), така че два уиджета никога не споделят правило: в уиджета alert .CLASS-color1 става .w-alert-color1.

exports.dependencies приема списък или низ, разделен със запетаи: адрес, завършващ на .js, става <script src>, а завършващ на .css става <link rel="stylesheet">, добавени в head на страницата.

Визуализиране на сървъра

Уиджет без exports.render само се почиства и се сервира такъв, какъвто е. С render може да изгради своя HTML от конфигурацията:

<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 е конфигурацията на инстанцията, opt.html е HTML, който е бил вътре в блока, а opt.id, opt.uid и opt.body го описват. next(html, replace) дава HTML за сервиране; с true като втори аргумент заменя целия блок. Записахме този файл в локален CMS и страница с data-cms="hello__..." и {"text":"mundo"} излезе като <p class="w-hello">Hello MUNDO</p>, с .w-hello{color:#07c} в head. Официалният уиджет picture използва същата функция, за да добави loading="lazy" към изображението си, а code — за да изведе кода от настройките си.

exports.install и exports.uninstall се изпълняват с базата данни на CMS, когато уиджетът се добави, промени или премахне.

Инсталиране и премахване на уиджети

Добавката Widgets на администрацията импортира файл; през API това е widgets_save с { "html": "<file content>", "singleton": true } (singleton прескача уиджета, ако вече съществува), widgets_list, widgets_read, widgets_detail и widgets_remove. Изискват правото widgets (вижте API на администрацията). 43-те официални уиджета са в хранилището с уиджети.