Útmutató kezdőknek a Velo by Wix használatához

A Velo egy csavaros Wix termék. A Wix az egyik legnépszerűbb fejlesztői platform a weben. Lehetővé teszi a tervezőknek (és az átlagos webhelytulajdonosoknak), hogy csodálatos webhelyeket készítsenek anélkül, hogy egyetlen kódsort is megírnának.

A Velo segítségével a Wix fejlesztőkkel bővíti felhasználói bázisát. A Velo egy full-stack fejlesztői platform, amely lehetővé teszi a felhasználók számára, hogy nagyszerű webhelyeket hozzanak létre kód segítségével. Az egyetlen programozási nyelv, amelyet tudnod kell a Velo használatához, a JavaScript. A platform támogatja a modern JavaScript funkciókat, és NodeJS alapú szerveroldali rendszert használ.

Ebből a cikkből megismerheti a Velo egyedi funkcióit és azok használatát.

A Velo fejlesztői funkciói

A Velo fejlesztői platform beépített IDE-vel rendelkezik, amely lehetővé teszi a fejlesztők számára, hogy JavaScript kódot írjanak, és valós időben lássák a változásokat. A Velo NodeJS szerveren fut, ami azt jelenti, hogy a fejlesztő hozzáférhet az npm csomagokhoz és egyéb fejlesztői eszközökhöz. Ezek a fejlesztői funkciók a következők:

• Lehetőség egyéni elrendezések és interakciók létrehozására egy weboldalon.
• Gyűjtemények létrehozásának lehetősége adatbázisban.
• Lehetőség egyéni API-k létrehozására webhelyéhez.

Weboldal készítése Velo segítségével

A Velo használatához a fő webhelyre kell navigálnia. Ha ott van, válassza ki az új projekt indítását. Ez végigvezeti a szokásokon Wix webhely létrehozási folyamat, ahol ki kell választania az elkészíteni kívánt webhely típusát. Kiválaszthat egy sablont önállóan vagy a Wix ADI segítségével.

Miután kiválasztotta a sablon szerkesztésének lehetőségét, a következőhöz hasonló kezelőfelületet fog látni:

A fenti kép bal oldalán található a webhelyszerkezet oldalsávja, amely hozzáférést biztosít a webhelye összes oldalához kapcsolódó különféle JavaScript-fájlokhoz. A jelenleg kiválasztott oldal a kezdőlap, és ha megnézi a fenti kép alját, egy kódszerkesztőt lát, amely megjeleníti a HOME.js fájl tartalmát.

Egyéni elrendezési struktúra és interakciók létrehozása

A cikkhez kiválasztott sablon az online wellness áruház. Ennek a weboldalnak a kezdőlapján található egy „legnépszerűbb”, amelyet az alábbi képen láthat:

Ha azonban más címsort szeretne használni ehhez a szakaszhoz, ezt a Velo szerkesztőben érheti el, ha beilleszti a következő kódot a HOME.js fájlba.

A HOME.js fájl

$w.onReady(funkció () {
 $w('#text20').text = 'FEJEZŐ TÉTELEK'
});

A fenti kód a „legnépszerűbb” címsort „felkapott cikkekre” frissíti, és ezt a frissítést a Velo felületének jobb felső sarkában található előnézet gombra kattintva tekintheti meg. A kezdőlap megfelelő szakaszában a következő kimenethez hasonlót kell látnia:

Munka a Velo adatbázisával

A legtöbb dinamikus webhely rendelkezik olyan adatbázissal, amely típustól függően eltérően tárolja az adatokat. A Velo adatait gyűjteményekben tárolja központi adatbázisában. Ahhoz, hogy hozzáférjen ehhez az adatbázishoz, a Velo fejlesztői felületének bal oldalán található sorok és oszlopok táblázatához kell navigálnia.

Amint a fenti képen látható, minden Wix-sablonhoz tartozik néhány alapértelmezett gyűjtemény, a webhely típusától függően. A cikkhez kiválasztott webhelysablon egy wellness áruház. Ezért rendelkezik alapértelmezett termékek gyűjteményével, amelyeket könnyen lecserélhet tételeire.

Összefüggő: Hogyan építs ki professzionális online jelenlétet a Wix segítségével

Ha azonban a semmiből szeretné létrehozni gyűjteményét, akkor erre is van lehetőségük.

Ha új gyűjteményt szeretne létrehozni a Velo adatbázisban, egyszerűen vigye az egeret a „tartalomgyűjtemények” szakasz fölé, és egy plusz ikon jelenik meg a szöveg jobb oldalán.

A fenti képen látható új gyűjtemény opcióra kattintva a következő gyűjtemény létrehozási űrlap jön létre:

A gyűjtemény nevének megadásával és a létrehozás gombra kattintva a következő tartalomkezelő oldalra jut:

A fenti tartalomkezelő oldalon megkezdheti termékgyűjteményének feltöltését a megfelelő plusz ikonok segítségével. Mielőtt azonban elkezdené a termékek hozzáadását a gyűjteményéhez, létre kell hoznia a megfelelő mezőket.

Tekintse meg a fenti tartalomkezelő oldalt; jelenleg egy mezője van – a cím. Ez a mező nem törölhető, mert ez az elsődleges mező (vagy egyedi azonosító), amellyel minden gyűjteménynek rendelkeznie kell. Adhat azonban megfelelőbb címet is, például a termék nevét vagy azonosítóját.

A gyűjteményben meglévő mező nevének megváltoztatásához egyszerűen kattintson a kérdéses mezőre, és több lehetőséget is láthat.

A fenti képen látható tulajdonság opció kiválasztásával a következő előugró űrlap jelenik meg:

A fenti felugró űrlap lehetővé teszi a mező nevének megváltoztatását úgy, hogy beírja a kívánt címet a „mezőnév” feliratú szövegmezőbe, és kattintson a Mentés gombra.

Új mező hozzáadása

Kétféleképpen adhat hozzá új mezőt a gyűjteményéhez. Az első lehetőség az, hogy rákattint a plusz ikonra a gyűjtemény meglévő címétől jobbra. Ez a módszer a következő űrlapot generálja:

Az új mező űrlap lehetővé teszi a mezőnév, a mező kulcsának (a kódba való integráláshoz) és a mezőtípus megadását. A mező típusa a következők bármelyike ​​lehet:

• Szöveg
• Kép
• Boolean
• Szám
• Dátum és idő
• Idő
• Gazdag szöveg
• Referencia
• Multi-Reference
• URL

A második módja annak, hogy új mezőt adjon a gyűjteményéhez, ha rákattint a „rejtett mezők” szakaszra, és kiválasztja a „Mező hozzáadása” lehetőséget a felugró mezők listájából. Valami olyasmit kell látnod, mint az alábbi képen:

Tételek hozzáadása a gyűjteményhez Ha új elemet szeretne hozzáadni a gyűjteményhez, kattintson a tartalomkezelő oldal jobb oldalán található „Elem hozzáadása” gombra, vagy kattintson a mezők címe alatti plusz jelre. Miután hozzáadta az első elemet a gyűjteményéhez, a következőképpen kell kinéznie:

Mostantól a lehető legtöbb elemet hozzáadhatja gyűjteményéhez a fenti módszerek bármelyikével. Ha azonban bármilyen gyűjteménnyel szeretné frissíteni webhelyét, először közzé kell tennie a webhelyet.

Mitől izgalmas a Velo

Most már tudja, hogyan szabhatja személyre webhelyét a Velo IDE JavaScript-kódjával. A Velo adatbázisban tetszőleges számú elemből egyéni gyűjteményeket is létrehozhat. De ami a Velo-ban a legjobb dolog, az az npm csomagok importálása és használata.

Mi az npm? A JavaScript csomagkezelő magyarázata

Javítsa projektjeit npm csomagokkal.

Olvassa el a következőt

A szerzőről