# Το αποθετήριο widgets του CMS: 43 widgets και πώς να τα προσθέσετε

> Μια ξενάγηση στο totaljs/cms-widgets, τα επίσημα widgets του CMS του Total.js: τι καλύπτουν, ποια αποδίδονται στον διακομιστή, πώς δημιουργείται το db.json και πώς εγκαθιστάτε ένα widget από αρχείο.

Framework: cms
Product: CMS (cms@8071e48)
Language: el
Content-SHA256: 8867c31b511279b0d10085accf30cfb49f2ca2b966f24ef3e9e8230e6dd17a28
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: 
Review: not-recorded

Το [`totaljs/cms-widgets`](https://github.com/totaljs/cms-widgets) περιέχει τα επίσημα widgets του CMS του Total.js. Στην αναθεώρηση που τεκμηριώνεται εδώ (`dc92cb7`) έχει **43 widgets** στο `widgets/`, ένα αρχείο HTML το καθένα, όλα με την ομάδα *Content*, και το σενάριο που δημιουργεί τον κατάλογο (`db.js`). Η μορφή κάθε αρχείου περιγράφεται στο [widgets](/en/cms/widgets/).

## Τι καλύπτουν

Το αποθετήριο βάζει όλα τα widgets σε μία ομάδα· ο παρακάτω πίνακας τα ταξινομεί μόνο με βάση όσα υποδηλώνουν τα ονόματά τους, για να τα βρίσκετε πιο εύκολα.

| Είδος | Widgets |
|---|---|
| Κείμενο | `headline`, `paragraph`, `paragraph2`, `article`, `alert`, `list`, `keyvalue`, `properties`, `summary`, `tags`, `code`, `codehighlighter` |
| Διάταξη | `container`, `vcontainer`, `columns100`, `columnshalfs`, `columnsthirds`, `panelsthirds`, `box`, `emptyspace`, `line`, `gradient` |
| Κείμενο με εικόνα | `textimageleft`, `textimageright`, `textimagecenter`, `textimageflex`, `features2`, `features3`, `insight`, `team`, `partners`, `expansionlist` |
| Εικόνες και πολυμέσα | `picture`, `images`, `imagelinks`, `gallery`, `video`, `bufferwall` |
| Σύνδεσμοι και κουμπιά | `linkbutton`, `buttonsgroup`, `socialnetworks` |
| Ενσωμάτωση | `importer`, `uibuilder` (δείτε [UI Builder](/en/uibuilder/what-is-uibuilder/)) |

Εννέα από αυτά χρησιμοποιούν το `exports.render` για να χτίσουν το HTML τους στον διακομιστή (`bufferwall`, `code`, `codehighlighter`, `images`, `imagelinks`, `importer`, `picture`, `partners` και `uibuilder`)· τα υπόλοιπα είναι στατικά μπλοκ που ρυθμίζει ο επεξεργαστής και σερβίρει το CMS όπως είναι.

## Προσθήκη ενός widget στο CMS σας

Κάθε αρχείο είναι ένα πλήρες widget. Στη διαχείριση, ανοίξτε το πρόσθετο *Widgets* και εισαγάγετε το αρχείο ή στείλτε το με το API:

```json
{ "schema": "widgets_save", "data": { "html": "<the content of headline.html>", "singleton": true } }
```

Στείλτε το με `POST` στο `/admin/` με το cookie συνεδρίας ή την κεφαλίδα `x-token` ([το API διαχείρισης](/en/cms/the-admin-api/)).

## Ο κατάλογος: `db.json`

Ο επεξεργαστής μπορεί να απαριθμήσει τα widgets ενός καταλόγου. Το `db.js` τον δημιουργεί: διαβάζει κάθε αρχείο του `widgets/`, παίρνει τα `name`, `author` και `preview` από τα `exports` του, χτίζει τη διεύθυνση `https://cdn.totaljs.com/cms/<file>` και γράφει το `db.json` ταξινομημένο κατά όνομα, με μία εγγραφή ανά widget (`id`, `name`, `url`, `author`, `preview`). Το `db.js` ξεκινά με `require('total4')`, οπότε χρειάζεται Total.js 4 για να τρέξει, όπως στο αποθετήριο των συνιστωσών του Flow ([το αποθετήριο συνιστωσών](/en/flow/the-components-repository/)).

## Τα δικά σας widgets

Αντιγράψτε το πιο κοντινό widget, αλλάξτε τα `exports.id` και `exports.name` και προσαρμόστε το στυλ, τον σχεδιασμό και τις ρυθμίσεις. Αν το widget χρειάζεται μια βιβλιοθήκη, καταχωρίστε την στο `exports.dependencies` και το CMS την προσθέτει στο head των σελίδων που το χρησιμοποιούν.