de
English
Español
Slovenčina
Français
Italiano
Português
Polski
Čeština
Nederlands
Română
Magyar
Svenska
Ελληνικά
БългарскиWidgets im Total.js CMS: in einer Seite verwenden und eigene schreiben
Ein Widget ist ein Block, den Sie in eine Seite setzen: eine Überschrift, ein Hinweis, eine Galerie. Es bringt seinen eigenen Stil, ein Formular zur Konfiguration im Editor und optional Code mit, der es auf dem Server rendert. Ein Widget ist eine HTML-Datei, wie eine Komponente von Flow, und das CMS speichert es in seinen Metadaten.
Ein Widget in einer Seite
Im HTML einer Seite ist ein Widget ein div mit zwei Attributen:
<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-cmsist<widget id>__<configuration>, wobei die Konfiguration ein mitencodeURIComponentgeschriebenes JSON-Objekt ist. Der Editor schreibt es; Sie können es selbst schreiben, wenn Sie Seiten erzeugen.data-cms-idist die Kennung der Instanz in der Seite.
Wenn die Seite ausgeliefert wird, entfernt das CMS das Attribut data-cms, behält das HTML darin und fügt den Stil jedes Widgets der Seite in den Head ein. Ist das Widget nicht installiert, wird sein Block verworfen.
Die Teile einer Widget-Datei
| Teil | Wozu er dient |
|---|---|
<script total> | die Metadaten und der Servercode: exports.id, name, author, version, preview (ein Bild oder eine Data-URI), config (die Standardwerte) und optional dependencies, install, uninstall und render |
<style> | das CSS des Widgets |
<body> | das Design des Widgets, wie es der Editor zeigt; Elemente mit der Klasse CMS_edit sind die editierbaren; die anderen CMS_*-Klassen (CMS_repeat, CMS_remove, CMS_unwrap...) sind Markierungen für den Editor, und der Compiler entfernt sie, bevor die Seite ausgeliefert wird |
<settings> | das Formular, das config im Editor bearbeitet (jComponent-Eingaben, deren Pfad mit ?. beginnt), und ein <script> mit exports.save(config, el), das das Design ändert, wenn sich die Konfiguration ändert |
<template> | eine optionale Vorlage für das Widget |
<readme> | die Hilfe des Widgets |
CLASS im Stil, in den Einstellungen, in der Vorlage und im Design wird durch eine Klasse ersetzt, die zum Widget gehört (w- gefolgt von seiner id), sodass sich zwei Widgets nie eine Regel teilen: Im Widget alert wird .CLASS-color1 zu .w-alert-color1.
exports.dependencies akzeptiert eine Liste oder eine mit Kommas getrennte Zeichenkette: Eine Adresse, die auf .js endet, wird zu einem <script src>, eine auf .css zu einem <link rel="stylesheet">, im Head der Seite ergänzt.
Auf dem Server rendern
Ein Widget ohne exports.render wird nur bereinigt und unverändert ausgeliefert. Mit render kann es sein HTML aus der Konfiguration bauen:
<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 ist die Konfiguration der Instanz, opt.html das HTML, das im Block stand, und opt.id, opt.uid und opt.body beschreiben ihn. next(html, replace) liefert das auszuliefernde HTML; mit true als zweitem Argument ersetzt es den ganzen Block. Wir haben diese Datei in einem lokalen CMS gespeichert, und eine Seite mit data-cms="hello__..." und {"text":"mundo"} kam als <p class="w-hello">Hello MUNDO</p> heraus, mit .w-hello{color:#07c} im Head. Das offizielle Widget picture nutzt dieselbe Funktion, um seinem Bild loading="lazy" hinzuzufügen, und code, um den Code aus seinen Einstellungen auszugeben.
exports.install und exports.uninstall laufen mit der Datenbank des CMS, wenn das Widget hinzugefügt, geändert oder entfernt wird.
Widgets installieren und entfernen
Das Plugin Widgets des Admins importiert eine Datei; über die API ist es widgets_save mit { "html": "<file content>", "singleton": true } (singleton überspringt das Widget, wenn es schon existiert), widgets_list, widgets_read, widgets_detail und widgets_remove. Sie brauchen die Berechtigung widgets (siehe die Admin-API). Die 43 offiziellen Widgets stehen im Widgets-Repository.