Dette er en sponsoreret artikel og blev gjort mulig af Wix. Det egentlige indhold og meninger er den eneste opfattelse af forfatteren, der opretholder redaktionel uafhængighed, selv når en post er sponsoreret.

Når det drejer sig om at oprette et websted, hvis du er en udvikler, kan du bruge DIY tilgangen og kode og være vært for alt selv. Hvis du er en slutbruger / forbruger ligesom vi de fleste af os, kan du bruge en webbygger software til at skabe smukke hjemmesider med blot klik.

Wix tilhører sidstnævnte, da det er en webbygger, der giver dig mulighed for at oprette gratis smukke hjemmesider med blot et par museklik. Men med indførelsen af ​​Wix Code har den sløret linjerne mellem at gøre det selv og ved at bruge en webbygger. Du kan nu gøre begge dele.

Hvis du opbygger en webapp eller dynamisk hjemmeside, skal du bruge kompliceret tech jargon som databaser, formularer og javascripts til at opbygge et interaktivt websted. De fleste webbyggere leverer ikke sådanne værktøjer, da det tilføjer tonsvis af komplikationer til deres app.

Wix Code tilføjer sådanne ting til sine eksisterende web-bygningsværktøjer uden komplikationen. Det tilbyder flere skabeloner til at opbygge og administrere dine databaser, formularer og også tillade javascript kode til dit websted. Bedst af alt, du kan gøre brug af den dynamiske sider funktion til hurtigt at udfylde indhold fra databasen, hvilket gør det mere som et Content Management System snarere end en hjemmeside bygherre.

I eksemplet nedenfor vil vi oprette en simpel Make Tech Easier-blog og tilføje dynamiske funktioner til den fra Wix Code.

Opsætning af et nyt websted med Wix

Forudsat at du er ny til Wix, kan du komme i gang ved at tilmelde dig en konto hos Wix. Når du har oprettet en konto, bliver du bedt om at oprette din hjemmeside.

Næste vil det bede dig om at vælge den type websted, du vil oprette. Da jeg replikerer en Make Tech Easier-blog, valgte jeg "Blog" -alternativet.

Den næste skærm vil spørge, hvordan du vil oprette dit websted.

Wix ADI gør brug af kunstig intelligens til at skabe et websted automatisk for dig. Hvis du foretrækker at gå manuelt, skal du vælge Wix Editor-metoden. (For at få adgang til Wix-koden skal du bruge sidstnævnte. Hvis du har valgt Wix ADI, kan du stadig skifte til editor-tilstanden senere.)

Til dette eksempel brugte jeg Wix Editor som jeg ønskede at have fuld kontrol over webstedets udseende. Derfra kan du starte med en skabelon. (Der er tusindvis af dem.)

For at holde det nemt begyndte jeg med en blank skabelon med et klassisk layout. Det følgende billede er, hvordan det ser ud.

Adgang til Wix-kode

For at få adgang til Wix-koden skal du gå til "Værktøjer" og tjekke indstillingen "Udviklerværktøjer".

Du vil nu se en ny "Site Structure" kolonne. Her kan du få adgang til alle Wix Code funktioner.

Oprettelse af databaser til at gemme indlæg

En af de fantastiske funktioner i Wix Code er Database-funktionen, som giver dig mulighed for at oprette databaser (aka Collection) og gemme data i den. For en blog skal vi oprette en database til at gemme alle vores indlæg. Klik på "Tilføj ny samling" i databasepartiet. Giv din samling et navn og angiv dets formål. Der er flere databasetyper, som du kan vælge imellem, lige fra brugergenereret indhold, medlemsindsendelse, private data osv.

Når samlingen er oprettet, kan du begynde at tilføje felter og data ind i den.

Hvad vi har oprettet, er en indlægsdatabase med titel, indhold, offentliggjort dato og forskellige aspekter af et blogindlæg. Dernæst skal vi fylde databasens indhold til hovedwebstedet.

Dynamiske sider

Dynamiske sider er mere som en skabelonside, hvor du kan oprette et design og forbinde det til databasen, og det vil automatisk fylde alle emner i din database til forsiden under deres egne webadresser. For eksempel har vi seks indlæg i databasen. Med en enkelt dynamisk side kan vi få det til at vise alle indlæg på hovedsiden. Dette sparer dig for at manuelt oprette en enkelt side for hvert indlæg. Der er to hovedtyper af dynamiske sider i Wix Code - den ene er til visning af et enkelt emne, mens det andet er for kategori (en samling af lignende emner på en liste).

Nedenstående viser, hvordan du opretter dynamiske sider og linker dem til webstedet.

1. Klik på det flytende værktøjslinje på det første ikon og vælg "Dynamiske sider." Klik på knappen "Tilføj til side".

2. Vælg "Item Page" fra popup-vinduet.

3. I webadressen skal du vælge feltet (i databasen), som du vil bruge det til URL'en. I dette tilfælde sætter jeg "titlen" for at være URL'en.

4. Udfør derefter siden og tilføj felter fra databasen. Med hvert element, du trækker til siden, kan du klikke på "Connect to Data" knappen for at linke den med feltet fra databasen. Jeg har f.eks. Trukket et "Header 1" -element til siden og knyttet det til "Titel" -feltet i Posts-databasen.

Og jeg gjorde det samme for det fremhævede billede, postindhold osv.

5. Når du er færdig med designet, kan du forhåndsvise det og se, hvordan det ser ud på forenden.

6. Det næste trin er at forbinde den dynamiske side fra startsiden. Indlæs Hjemmesiden og tilføj en Repeater-widget fra afsnittet "Lister og Gitter". Forbind widgeten til indlægsdatabasen og link hvert element i widgeten med felterne i databasen. Under afsnittet "Link tilsluttes til" skal du rulle ned og vælge "Indlæg" i sektionen Dynamiske sider.

Det er det.

Det du kan se er, at vi kun har oprettet en dynamisk side, og det genererer automatisk alle sider for hvert element i databasen. Du kan gøre det samme for at tilføje en kategori dynamisk side også.

Tilføjelse af javascript til sider

Hvis du er en kyndig javascript-koder, kan du tilføje javascript til hver ekstra funktion på hver side. Hvis du for eksempel har tilføjet et brugerformular til din side, kan du bruge javascript til at validere formularfeltet inden indsendelse.

Bemærk : For at tilføje javascript kode til en side, skal du gå til en side (eller den side, hvor du vil have koden vist), og klik på knappen "Sidekode" nederst i koden. Et vindue vises, og du kan tilføje din kode der.

1. Vi har oprettet en simpel formular, der samler fornavnet, efternavnet og e-mail-adressen fra brugeren. For denne formular ønsker vi at validere e-mail-adressen og sørg for, at feltet "Bekræft email" er det samme som feltet "Email".

2. Tilføj følgende kode til sektionen "Sidekode":

 $ w.onReady (funktion () {const validateEmail = (otherEmailElementId) => (værdi, afvis) => {lad otherEmailElement = $ w (otherEmailElementId); hvis (værdi === otherEmailElement.value) {otherEmailElement.validity.valid = true; otherEmailElement.resetValidityIndication (); return;} console.log ("Email og Bekræft, at dine Email-felter ikke stemmer overens"); OtherEmailElement.validity.valid = false; otherEmailElement.updateValidityIndication (); afvis ("Email og bekræft e-mail felter stemmer ikke overens ");}; $ w (" # emailConfirmInput ") .CustomValidation (validérEmail (" # emailInput ")); $ w (" # emailInput ") .CustomValidation (validérEmail (" # emailConfirmInput ")); onBeforeSave (() => {let validationMessage = ''; hvis (! $ w ('# emailInput') .gyldigt) {hvis (! $ w ('# emailInput'). værdi) validationMessage + = 'Indtast venligst en email adresse \ n'; ellers hvis ($ w ('# emailInput'). værdi! == $ w ("# emailConfirmInput"). værdi) {validationMessage + = 'Email og Bekræft Email felter svarer ikke til \ n ';} $ w (' # validationMessages '). text = v alidationMessage; $ W ( '# validationMessages') udvide ().; } else $ w ('# validationMessages'). collapse (); }); });

Dette vil validere e-mail-adressen og vise fejlmeddelelsen, hvis e-mailen er ugyldig.

Der er nok du kan gøre med Javascript. Tjek eksemplerne her for mere information.

Eksterne API'er

Dette er det eneste trin, hvor det kan blive mere kompliceret. Wix-kode integreres nu med ekstern API, så du nemt kan oprette forbindelse til tredjepartsydelser som Amazon, Dropbox, Google Drive, Twitter, IFTTT, Zapier osv. Jeg vil ikke gå ind i detaljer her, men hvis du er interesseret kan tjekke deres API dokumentation.

Konklusion

Hvis du ikke er teknisk kyndig eller en udvikler, kan det være en kedelig opgave at opbygge din egen hjemmeside. Wix har gjort et godt stykke arbejde med at gøre hjemmesiden til at skabe en leg. Med Wix Code går det en smule yderligere og giver dig masser af kontrol over dit websted. Du har nu adgang til komplicerede webudviklerværktøjer og fuld kontrol over, hvordan dit websted skal fungere, alt sammen med et enkelt klik, træk og slip uden at kræve kodning.

Kudos til Wix for at skabe et så nemt at bruge værktøj, der løser mange problemer.

Prøv Wix Code og lad os vide, hvad du synes om det.

Wix kode