# Τα widgets στο CMS του Total.js: χρησιμοποιήστε τα σε μια σελίδα και γράψτε δικά σας
> Πώς εμφανίζεται ένα widget στο HTML μιας σελίδας (το χαρακτηριστικό data-cms και το JSON του), τα μέρη ενός αρχείου widget, το σύμβολο κράτησης CLASS, απόδοση ενός widget στον διακομιστή με exports.render και εγκατάσταση widgets μέσω του API.
Framework: cms
Product: CMS (cms@8071e48)
Language: el
Content-SHA256: ff271ecc371ac568e1c2dcff850bf6ee5f97760f3d8a319d77afb4b1d4cb4cd1
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources:
Review: not-recorded
Ένα **widget** είναι ένα μπλοκ που τοποθετείτε σε μια σελίδα: μια επικεφαλίδα, μια ειδοποίηση, μια γκαλερί. Φέρει το δικό του στυλ, μια φόρμα για να το ρυθμίσετε στον επεξεργαστή και, προαιρετικά, κώδικα που το αποδίδει στον διακομιστή. Ένα widget είναι ένα αρχείο HTML, όπως μια συνιστώσα του [Flow](/en/flow/write-a-component/), και το CMS το αποθηκεύει στα μεταδεδομένα του.
## Ένα widget μέσα σε μια σελίδα
Στο HTML μιας σελίδας, ένα widget είναι ένα `div` με δύο χαρακτηριστικά:
```html
```
- Το `data-cms` είναι `__`, όπου η διαμόρφωση είναι ένα αντικείμενο JSON γραμμένο με `encodeURIComponent`. Το γράφει ο επεξεργαστής· μπορείτε να το γράψετε κι εσείς όταν δημιουργείτε σελίδες.
- Το `data-cms-id` είναι το αναγνωριστικό της παρουσίας στη σελίδα.
Όταν σερβίρεται η σελίδα, το CMS αφαιρεί το χαρακτηριστικό `data-cms`, κρατά το HTML που βρίσκεται μέσα και προσθέτει στο head το στυλ κάθε widget της σελίδας. Αν το widget δεν είναι εγκατεστημένο, το μπλοκ του απορρίπτεται.
## Τα μέρη ενός αρχείου widget
| Μέρος | Σε τι χρησιμεύει |
|---|---|
| `
Hello world
```
Το `opt.config` είναι η διαμόρφωση της παρουσίας, το `opt.html` το HTML που ήταν μέσα στο μπλοκ και τα `opt.id`, `opt.uid` και `opt.body` το περιγράφουν. Το `next(html, replace)` δίνει το HTML που θα σερβιριστεί· με `true` ως δεύτερο όρισμα αντικαθιστά ολόκληρο το μπλοκ. Αποθηκεύσαμε αυτό το αρχείο σε ένα τοπικό CMS και μια σελίδα με `data-cms="hello__..."` και `{"text":"mundo"}` βγήκε ως `Hello MUNDO
`, με `.w-hello{color:#07c}` στο head. Το επίσημο widget `picture` χρησιμοποιεί την ίδια συνάρτηση για να προσθέσει `loading="lazy"` στην εικόνα του και το `code` για να εκτυπώσει τον κώδικα από τις ρυθμίσεις του.
Τα `exports.install` και `exports.uninstall` εκτελούνται με τη βάση δεδομένων του CMS όταν το widget προστίθεται, αλλάζει ή αφαιρείται.
## Εγκατάσταση και αφαίρεση widgets
Το πρόσθετο *Widgets* της διαχείρισης εισάγει ένα αρχείο· μέσω του API είναι το `widgets_save` με `{ "html": "", "singleton": true }` (το `singleton` παραλείπει το widget αν υπάρχει ήδη), `widgets_list`, `widgets_read`, `widgets_detail` και `widgets_remove`. Χρειάζονται το δικαίωμα `widgets` (δείτε [το API διαχείρισης](/en/cms/the-admin-api/)). Τα 43 επίσημα widgets βρίσκονται στο [αποθετήριο widgets](/en/cms/the-widgets-repository/).