SvelteKit je najnovejši od tistih, ki bi jih imenoval aplikacijska ogrodja naslednje generacije. Seveda za vas oblikuje aplikacijo z usmerjanjem, uvajanjem in upodabljanjem na strani strežnika, ki temelji na datotekah, kar je Next naredil za vedno. Toda SvelteKit podpira tudi ugnezdene postavitve, mutacije strežnikov, ki sinhronizirajo podatke na vaši strani, in nekatere druge podrobnosti, ki jih bomo obravnavali.
Ta objava je mišljena kot uvod na visoki ravni, ki upajmo, da vzbudi nekaj navdušenja za vse, ki še nikoli niso uporabljali SvelteKita. To bo sproščena tura. Če vam je všeč, kar vidite, celotni dokumenti so tukaj.
Na nek način je pisanje te objave zahtevno. SvelteKit je aplikacijski okvir. Obstaja zato, da vam pomaga zgraditi ... no, aplikacije. Zaradi tega je težko predstaviti. Ni mogoče zgraditi celotne aplikacije v objavi v spletnem dnevniku. Namesto tega bomo malce uporabili svojo domišljijo. Zgradili bomo okostje aplikacije, imeli nekaj praznih ograd za uporabniški vmesnik in trdo kodirane statične podatke. Cilj ni izdelava dejanske aplikacije, temveč pokazati, kako delujejo gibljivi deli SvelteKita, da lahko izdelate svojo aplikacijo.
V ta namen bomo kot primer izdelali preizkušeno in resnično aplikacijo To-Do. Vendar ne skrbite, to bo veliko, veliko več o tem, kako deluje SvelteKit, kot o ustvarjanju še ene aplikacije To-Do.
Koda za vse v tej objavi je na voljo na GitHubu. Tudi ta projekt je nameščen na Vercelu za demo demo v živo.
Ustvarjanje vašega projekta
Začeti nov projekt SvelteKit je dovolj preprosto. Teči npm create your-app-name
v terminalu in odgovorite na vprašanja. Prepričajte se, da ste izbrali »Skeleton Project«, sicer pa izberite poljubne možnosti za TypeScript, ESLint itd.
Ko je projekt ustvarjen, zaženite npm i
in npm run dev
in strežnik za razvijalce bi moral začeti delovati. Razvneti localhost:5173
v brskalniku in dobili boste stran z nadomestnim znakom za okostno aplikacijo.
Osnovno usmerjanje
Obvestilo routes
mapo pod src
. Ta vsebuje kodo za vse naše poti. Že obstaja +page.svelte
tam notri z vsebino za root /
pot. Ne glede na to, kje v hierarhiji datotek ste, ima dejanska stran za to pot vedno ime +page.svelte
. S tem v mislih ustvarimo strani za /list
, /details
, /admin/user-settings
in admin/paid-status
in za vsako stran dodajte nekaj ograd za besedilo.
Postavitev vaše datoteke bi morala izgledati nekako takole:
Morali bi se lahko premikati s spreminjanjem poti URL v naslovni vrstici brskalnika.
postavitve
V naši aplikaciji bomo želeli navigacijske povezave, vsekakor pa ne želimo kopirati oznak zanje na vsaki strani, ki jo ustvarimo. Torej, ustvarimo a +layout.svelte
datoteko v korenu našega routes
mapo, ki jo bo SvelteKit obravnaval kot globalno predlogo za vse strani. Dodajmo mu nekaj vsebine:
<nav> <ul> <li> <a href="/sl/">Home</a> </li> <li> <a href="/sl/list">To-Do list</a> </li> <li> <a href="/sl/admin/paid-status">Account status</a> </li> <li> <a href="/sl/admin/user-settings">User settings</a> </li> </ul>
</nav> <slot /> <style> nav { background-color: beige; } nav ul { display: flex; } li { list-style: none; margin: 15px; } a { text-decoration: none; color: black; }
</style>
Nekaj osnovne navigacije z nekaj osnovnimi slogi. Posebej pomembna je <slot />
oznaka. To je ne režo, ki jo uporabljate s spletnimi komponentami in senčnim DOM, temveč funkcijo Svelte, ki nakazuje, kam naj postavimo našo vsebino. Ko se stran upodablja, bo vsebina strani zdrsnila na mesto, kjer je reža.
In zdaj imamo nekaj navigacije! Ne bomo zmagali na nobenem oblikovalskem natečaju, vendar tega ne poskušamo.
Ugnezdene postavitve
Kaj pa, če bi želeli, da vse naše skrbniške strani podedujejo običajno postavitev, ki smo jo pravkar zgradili, vendar imajo tudi nekatere stvari, ki so skupne vsem skrbniškim stranem (vendar samo skrbniškim stranem)? Ni problema, dodamo še enega +layout.svelte
datoteko v našem korenu admin
imenik, ki ga bo podedovalo vse pod njim. Naredimo to in dodamo to vsebino:
<div>This is an admin page</div> <slot /> <style> div { padding: 15px; margin: 10px 0; background-color: red; color: white; }
</style>
Dodamo rdečo pasico, ki označuje, da je to skrbniška stran, nato pa, kot prej, a <slot />
označuje, kam želimo, da gre vsebina naše strani.
Naša korenska postavitev od prej je upodobljena. Znotraj korenske postavitve je a <slot />
oznaka. Vsebina ugnezdene postavitve gre v korensko postavitev <slot />
. In končno, ugnezdena postavitev določa svoje <slot />
, v katerega se upodobi vsebina strani.
Če se pomaknete na skrbniške strani, bi morali videti novo rdečo pasico:
Definiranje naših podatkov
V redu, upodobimo nekaj dejanskih podatkov — ali vsaj poglejmo, kako lahko upodobimo nekaj dejanskih podatkov. Obstaja sto načinov za ustvarjanje baze podatkov in povezovanje z njo. Ta objava govori o SvelteKit-u, ne o upravljanju DynamoDB, zato bomo namesto tega »naložili« nekaj statičnih podatkov. Vendar bomo za branje in posodabljanje uporabljali vse iste stroje, kot bi jih vi uporabljali za prave podatke. Za pravo spletno aplikacijo zamenjajte funkcije, ki vračajo statične podatke, s funkcijami, ki se povezujejo in poizvedujejo v kateri koli bazi podatkov, ki jo uporabljate.
Ustvarimo popolnoma preprost modul v lib/data/todoData.ts
ki vrne nekaj statičnih podatkov skupaj z umetnimi zakasnitvami za simulacijo resničnih poizvedb. To boš videl lib
mapo, uvoženo drugam prek $lib
. To je funkcija SvelteKit za to posebno mapo in lahko celo dodajte svoje vzdevke.
let todos = [ { id: 1, title: "Write SvelteKit intro blog post", assigned: "Adam", tags: [1] }, { id: 2, title: "Write SvelteKit advanced data loading blog post", assigned: "Adam", tags: [1] }, { id: 3, title: "Prepare RenderATL talk", assigned: "Adam", tags: [2] }, { id: 4, title: "Fix all SvelteKit bugs", assigned: "Rich", tags: [3] }, { id: 5, title: "Edit Adam's blog posts", assigned: "Geoff", tags: [4] },
]; let tags = [ { id: 1, name: "SvelteKit Content", color: "ded" }, { id: 2, name: "Conferences", color: "purple" }, { id: 3, name: "SvelteKit Development", color: "pink" }, { id: 4, name: "CSS-Tricks Admin", color: "blue" },
]; export const wait = async amount => new Promise(res => setTimeout(res, amount ?? 100)); export async function getTodos() { await wait(); return todos;
} export async function getTags() { await wait(); return tags.reduce((lookup, tag) => { lookup[tag.id] = tag; return lookup; }, {});
} export async function getTodo(id) { return todos.find(t => t.id == id);
}
Funkcijo za vrnitev ploščatega niza naših opravil, iskanje naših oznak in funkcijo za pridobivanje enega opravila (to zadnjo bomo uporabili na naši strani s podrobnostmi).
Nalaganje naših podatkov
Kako dobimo te podatke na naših straneh Svelte? Obstaja več načinov, a za zdaj ustvarimo +page.server.js
datoteko v našem list
mapo in vanjo vstavite to vsebino:
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); const tags = getTags(); return { todos, tags, };
}
Določili smo a load()
funkcijo, ki potegne podatke, potrebne za stran. Upoštevajte, da smo ne await
klicev na naše getTodos
in getTags
asinhrone funkcije. S tem bi ustvarili slap pri nalaganju podatkov, ko čakamo, da pridejo naši elementi opravil, preden naložimo oznake. Namesto tega vračamo surove obljube iz load
, SvelteKit pa opravi potrebno delo await
Them.
Torej, kako dostopamo do teh podatkov iz naše komponente strani? SvelteKit ponuja a data
prop za našo komponento s podatki o njej. Z njim bomo dostopali do svojih opravil in oznak s pomočjo a reaktivna dodelitev.
Naša komponenta strani s seznamom je zdaj videti takole.
<script> export let data; $: ({ todo, tags } = data);
</script> <table cellspacing="10" cellpadding="10"> <thead> <tr> <th>Task</th> <th>Tags</th> <th>Assigned</th> </tr> </thead> <tbody> {#each todos as t} <tr> <td>{t.title}</td> <td>{t.tags.map((id) => tags[id].name).join(', ')}</td> <td>{t.assigned}</td> </tr> {/each} </tbody>
</table> <style> th { text-align: left; }
</style>
In to bi moralo prikazati naše opravila!
Skupine postavitve
Preden se premaknemo na stran s podrobnostmi in spremenimo podatke, pokukajmo na res lepo funkcijo SvelteKit: skupine postavitve. Videli smo že ugnezdene postavitve za vse skrbniške strani, toda kaj, če bi želeli deliti postavitev med poljubnimi stranmi na isti ravni našega datotečnega sistema? Še posebej, kaj če bi želeli deliti postavitev samo med stranjo s seznamom in stranjo s podrobnostmi? Na tej ravni že imamo globalno postavitev. Namesto tega lahko ustvarimo nov imenik, vendar z imenom v oklepaju, kot je ta:
Zdaj imamo skupino postavitev, ki pokriva naše strani s seznamom in podrobnostmi. Poimenoval sem ga (todo-management)
lahko pa ga poimenuješ kakor hočeš. Da bo jasno, to ime bo ne vplivajo na URL-je strani znotraj skupine postavitve. URL-ji bodo ostali enaki; skupine postavitev vam omogočajo dodajanje postavitev v skupni rabi na strani, ne da bi vse sestavljale celoten imenik v routes
.
We bi dodaj a +layout.svelte
datoteka in nekaj neumnih <div>
transparent z napisom »Hej, urejamo opravila«. Ampak naredimo nekaj bolj zanimivega. Postavitve lahko definirajo load()
funkcije za zagotavljanje podatkov za vse poti pod njimi. Uporabimo to funkcijo za nalaganje oznak — saj bomo svoje oznake uporabljali v našem details
stran — poleg list
stran že imamo.
V resnici se skoraj zagotovo ne splača prisiliti skupino postavitve samo, da zagotovi en sam podatek; bolje je te podatke podvojiti v load()
funkcijo za vsako stran. Toda ta objava bo zagotovila izgovor, da potrebujemo novo funkcijo SvelteKit!
Najprej pojdimo v naše list
strani +page.server.js
datoteko in odstranite oznake iz nje.
import { getTodos, getTags } from "$lib/data/todoData"; export function load() { const todos = getTodos(); return { todos, };
}
Naša stran s seznamom bi morala zdaj prikazati napako, ker ni tags
predmet. Popravimo to z dodajanjem a +layout.server.js
datoteko v naši skupini postavitev, nato definirajte a load()
funkcijo, ki naloži naše oznake.
import { getTags } from "$lib/data/todoData"; export function load() { const tags = getTags(); return { tags, };
}
In ravno tako se naša stran s seznamom ponovno upodobi!
Podatke nalagamo z več lokacij
Postavimo točko na to, kar se tukaj dogaja:
- Določili smo a
load()
funkcijo za našo skupino postavitev, ki smo jo vstavili+layout.server.js
. - To zagotavlja podatke za vse strani, ki jih postavitev služi – kar v tem primeru pomeni naše strani s seznamom in podrobnostmi.
- Naša stran s seznamom opredeljuje tudi a
load()
funkcijo, ki gre v svoj+page.server.js
Datoteka. - SvelteKit opravi gromoglasno delo, tako da vzame rezultate teh podatkovnih virov, jih združi skupaj in da oboje na voljo v
data
.
Naša stran s podrobnostmi
Stran s podrobnostmi bomo uporabili za urejanje elementa opravila. Najprej dodajmo stolpec v tabelo na naši strani s seznamom, ki se povezuje na stran s podrobnostmi z ID-jem elementa opravila v nizu poizvedbe.
<td><a href="/sl/details?id={t.id}">Edit</a></td>
Zdaj pa sestavimo našo stran s podrobnostmi. Najprej bomo dodali nakladalnik za prevzem opravila, ki ga urejamo. Ustvariti +page.server.js
in /details
, s to vsebino:
import { getTodo, updateTodo, wait } from "$lib/data/todoData"; export function load({ url }) { const id = url.searchParams.get("id"); console.log(id); const todo = getTodo(id); return { todo, };
}
Naš nakladalnik je opremljen z url
lastnost, iz katere lahko potegnemo vrednosti poizvedbenega niza. To olajša iskanje opravila, ki ga urejamo. Upodobimo to opravilo skupaj s funkcijo za urejanje.
SvelteKit ima čudovite vgrajene zmožnosti mutiranja, če uporabljate obrazce. Se spomnite obrazcev? Tukaj je naša stran s podrobnostmi. Zaradi kratkosti sem opustil sloge.
<script> import { enhance } from "$app/forms"; export let data; $: ({ todo, tags } = data); $: currentTags = todo.tags.map(id => tags[id]);
</script> <form use:enhance method="post" action="?/editTodo"> <input name="id" type="hidden" value="{todo.id}" /> <input name="title" value="{todo.title}" /> <div> {#each currentTags as tag} <span style="{`color:" ${tag.color};`}>{tag.name}</span> {/each} </div> <button>Save</button>
</form>
Oznake kot prej zajemamo iz nalagalnika naše skupine postavitev in element opravila iz nalagalnika naše strani. Zagrabimo dejansko tag
predmetov s seznama opravil ID-jev oznak in nato upodablja vse. Ustvarimo obrazec s skritim vnosom za ID in pravim vnosom za naslov. Prikažemo oznake in nato ponudimo gumb za oddajo obrazca.
Če ste opazili, use:enhance
, ki SvelteKitu preprosto pove, naj uporabi progresivno izboljšavo, Ajaxu pa, da predloži naš obrazec. To boste verjetno vedno uporabljali.
Kako shranimo svoje popravke?
Obvestilo action="?/editTodo"
atribut na samem obrazcu? To nam pove, kam želimo poslati naše urejene podatke. Za naš primer želimo predložiti an editTodo
"akcija."
Ustvarimo ga tako, da dodamo naslednje v +page.server.js
datoteko, ki jo že imamo za podrobnosti (ki trenutno ima load()
funkcijo, da zgrabimo naša opravila):
import { redirect } from "@sveltejs/kit"; // ... export const actions = { async editTodo({ request }) { const formData = await request.formData(); const id = formData.get("id"); const newTitle = formData.get("title"); await wait(250); updateTodo(id, newTitle); throw redirect(303, "/list"); },
};
Dejanja obrazca nam dajejo a request
objekta, ki omogoča dostop do naše formData
, ki ima a get
metoda za naša različna polja obrazca. Dodali smo ta skriti vnos za vrednost ID-ja, da ga lahko zgrabimo tukaj in poiščemo element opravila, ki ga urejamo. Simuliramo zamudo, pokličemo novo updateTodo()
metodo, nato preusmeri uporabnika nazaj na /list
strani. The updateTodo()
metoda zgolj posodobi naše statične podatke; v resničnem življenju bi zagnali nekakšno posodobitev v kateri koli podatkovni shrambi, ki jo uporabljate.
export async function updateTodo(id, newTitle) { const todo = todos.find(t => t.id == id); Object.assign(todo, { title: newTitle });
}
Poskusimo ga. Najprej bomo šli na stran s seznamom:
Zdaj pa kliknimo gumb Uredi za enega od elementov opravila, da se odpre stran za urejanje /details
.
Dodali bomo nov naslov:
Zdaj kliknite Shrani. To bi nas moralo vrniti k našemu /list
strani z novim naslovom opravila.
Kako se je novi naslov pojavil tako? Bilo je samodejno. Ko smo se preusmerili na /list
stran, je SvelteKit samodejno znova zagnal vse naše nalagalnike, tako kot bi to storil ne glede na to. To je ključni napredek aplikacijskih okvirov naslednje generacije, kot je SvelteKit, Remixin Naprej 13 zagotoviti. Namesto da bi vam ponudili priročen način za upodabljanje strani, nato pa vam zaželeli vso srečo pri pridobivanju vseh končnih točk, ki jih boste morda morali posodobiti, integrirajo mutacijo podatkov skupaj z nalaganjem podatkov, kar omogoča, da oba delujeta v tandemu.
Nekaj stvari, ki se jih morda sprašujete ...
Ta posodobitev mutacije se ne zdi preveč impresivna. Nalagalniki se bodo znova zagnali, ko boste krmarili. Kaj pa, če v dejanju obrazca ne bi dodali preusmeritve, ampak bi ostali na trenutni strani? SvelteKit bi izvedel posodobitev v dejanju obrazca, kot prej, vendar bi Še vedno ponovno zaženite vse nalagalnike za trenutno stran, vključno z nalagalniki v postavitvah strani.
Ali lahko imamo bolj ciljno usmerjena sredstva za razveljavitev naših podatkov? Na primer, naše oznake niso bile urejene, zato jih v resničnem življenju ne bi želeli znova poizvedovati. Da, kar sem vam pokazal, je samo privzeto vedenje obrazcev v SvelteKitu. Privzeto vedenje lahko izklopite tako, da zagotavljanje povratnega klica na use:enhance
. Nato SvelteKit nudi priročnik funkcije razveljavitve.
Nalaganje podatkov ob vsaki navigaciji je potencialno drago in nepotrebno. Ali lahko predpomnim te podatke, kot to počnem z orodji, kot je react-query
? Da, samo drugače. SvelteKit vam omogoča nastavitev (in nato upoštevanje) glav za nadzor predpomnilnika, ki jih splet že ponuja. In v naslednji objavi bom obravnaval mehanizme za razveljavitev predpomnilnika.
Vse, kar smo naredili v tem članku, uporablja statične podatke in spreminja vrednosti v pomnilniku. Če morate vse razveljaviti in začeti znova, se ustavite in znova zaženite npm run dev
Postopek vozlišča.
Zavijanje
Komajda smo opraskali površino SvelteKita, a upamo, da ste videli dovolj, da ste nad njim navdušeni. Ne spomnim se, kdaj se mi je spletno razvijanje nazadnje zdelo tako zabavno. S stvarmi, kot so združevanje, usmerjanje, SSR in uvajanje, ki so že pripravljeni, porabim več časa za kodiranje kot za konfiguriranje.
Tukaj je še nekaj virov, ki jih lahko uporabite kot naslednje korake pri učenju SvelteKita:
- Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
- Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
- vir: https://css-tricks.com/getting-started-with-sveltekit/
- 1
- 10
- 100
- 11
- 7
- 9
- 98
- a
- Sposobna
- O meni
- o IT
- dostop
- Račun
- Ukrep
- dejavnosti
- Adam
- dodano
- Poleg tega
- Naslov
- admin
- napredno
- vplivajo
- vsi
- Dovoli
- skupaj
- že
- vedno
- znesek
- in
- Še ena
- odgovor
- kdo
- aplikacija
- uporaba
- aplikacije
- uporabna
- okoli
- Array
- članek
- umetni
- dodeljena
- Samodejno
- samodejno
- Na voljo
- čakati
- nazaj
- ozadje
- banner
- bar
- Osnovni
- pred
- BEST
- Boljše
- med
- Bit
- črna
- Blog
- Blog Prispevkov
- Modra
- Pasovi
- prinašajo
- brskalnik
- hrošči
- izgradnjo
- zgrajena
- vgrajeno
- Gumb
- Cache
- klic
- poziva
- Zmogljivosti
- primeru
- Zagotovo
- izziv
- spreminjanje
- jasno
- Koda
- Kodiranje
- barva
- Stolpec
- kako
- Skupno
- Tekmovanja
- komponenta
- deli
- konference
- Connect
- Povezovanje
- Konzole
- vsebina
- Priročen
- bi
- Tečaj
- kritje
- Ovitki
- ustvarjajo
- ustvaril
- Ustvarjanje
- Trenutna
- Trenutno
- datum
- Baze podatkov
- privzeto
- Določa
- zamuda
- zamude
- uvajanje
- Oblikovanje
- Podrobnosti
- dev
- Razvoj
- DID
- zaslon
- Ne
- tem
- dont
- vsak
- drugje
- dovolj
- Celotna
- celota
- Napaka
- itd
- Tudi
- Tudi vsak
- vse
- Primer
- razburjen
- Vznemirjenje
- obstaja
- drago
- izvoz
- izvedljivo
- Feature
- Nekaj
- Področja
- file
- datoteke
- končno
- konec
- narava
- prva
- fiksna
- stanovanje
- po
- za vedno
- obrazec
- format
- Obrazci
- je pokazala,
- okviri
- iz
- polno
- zabava
- funkcija
- funkcionalnost
- funkcije
- dobili
- pridobivanje
- Daj
- Giving
- Globalno
- Go
- Cilj
- goes
- dogaja
- zgrabi
- skupina
- Skupine
- se zgodi
- Trdi
- Glave
- pomoč
- tukaj
- skrita
- hierarhija
- na visoki ravni
- drži
- upajmo, da
- Horizontalno
- Kako
- HTML
- HTTPS
- Bom
- Domišljija
- uvoz
- Pomembnost
- Impresivno
- in
- Vključno
- začetna
- vhod
- Namesto
- integrirati
- Zanimivo
- Predstavitev
- IT
- Izdelkov
- sam
- JavaScript
- Ključne
- Zadnja
- Zadnji
- postavitev
- učenje
- Lets
- Stopnja
- Li
- življenje
- light
- Verjeten
- Povezave
- Seznam
- v živo
- obremenitev
- nakladač
- nalaganje
- obremenitve
- Long
- Poglej
- POGLEDI
- iskanje
- sreča
- stroji
- Znamka
- IZDELA
- Izdelava
- upravljanje
- Navodilo
- Marža
- Matter
- pomeni
- Spomin
- zgolj
- združitev
- Metoda
- morda
- moti
- Moduli
- več
- premikanje
- premikanje
- več
- Ime
- Imenovan
- nav
- Krmarjenje
- ostalo
- potrebno
- Nimate
- Novo
- Naslednja
- Vozel
- normalno
- Številka
- predmet
- predmeti
- ONE
- Da
- Ostalo
- drugače
- lastne
- zlasti
- pot
- Izvedite
- kramp
- kos
- kosov
- placeholder
- platon
- Platonova podatkovna inteligenca
- PlatoData
- Točka
- Prispevek
- Prispevkov
- potencialno
- Pripravimo
- problem
- Postopek
- proizvodnjo
- postopno
- Projekt
- Obljublja
- nepremičnine
- zaščiteni
- zagotavljajo
- zagotavlja
- Potegne
- dal
- vprašanje
- Surovi
- Preberi
- pravo
- resnično življenje
- Reality
- Rdeča
- preusmeriti
- Ne glede na to
- ostajajo
- ne pozabite
- odstrani
- upodabljanje
- ometi
- zahteva
- viri
- Rezultati
- vrnitev
- vrnitev
- vrne
- povrniti
- Rich
- koren
- Pot
- poti
- Run
- tek
- Enako
- Shrani
- videnje
- služi
- nastavite
- Shadow
- Delite s prijatelji, znanci, družino in partnerji :-)
- deli
- shouldnt
- Prikaži
- Enostavno
- preprosto
- saj
- sam
- Slide
- So
- nekaj
- Nekaj
- Viri
- preživeti
- Začetek
- začel
- ostal
- Koraki
- stop
- predloži
- Podpira
- Površina
- sistem
- miza
- TAG
- Bodite
- ob
- Pogovor
- Tandem
- ciljno
- pove
- Predloga
- terminal
- O
- stvari
- vsej
- čas
- Naslov
- do
- skupaj
- tudi
- orodja
- Tour
- zdravljenje
- Res
- OBRAT
- Tipkovnica
- ui
- pod
- Nadgradnja
- posodobitve
- URL
- us
- uporaba
- uporabnik
- vrednost
- Vrednote
- različnih
- preko
- Poglej
- Počakaj
- hotel
- načini
- web
- spletne komponente
- Izdelava spletnih strani
- Kaj
- ki
- bele
- bo
- zmago
- brez
- Čudovit
- delo
- deluje
- vredno
- bi
- pisati
- Vi
- Vaša rutina za
- zefirnet