Dette er en sponset artikkel og ble gjort mulig av Wix. Selve innhold og meninger er det eneste syn på forfatteren som opprettholder redaksjonell uavhengighet, selv når et innlegg er sponset.

Når det gjelder å skape et nettsted, hvis du er en utvikler, kan du bruke DIY-tilnærmingen og kode og være vert for alt selv. Hvis du er en sluttbruker / forbruker, akkurat som de fleste av oss, kan du bruke en webbygger programvare til å lage flotte nettsteder med bare klikk.

Wix tilhører sistnevnte, da det er en nettbygger som lar deg lage gratis, vakre nettsteder med bare noen få museklikk. Men med introduksjonen av Wix Code har den sløret linjene mellom å gjøre det selv og å bruke en webbygger. Du kan nå gjøre begge deler.

Hvis du bygger en webapp eller et dynamisk nettsted, må du bruke komplisert tech jargong som databaser, skjemaer og javascripts for å bygge et interaktivt nettsted. De fleste webbyggere gir ikke slike verktøy, da det legger til tonn komplikasjon til deres app.

Wix-koden legger til slike ting i eksisterende nettbyggingsverktøy uten komplikasjon. Det tilbyr flere maler for deg å bygge og administrere databaser, skjemaer og lar deg også legge til javascript-kode på nettstedet ditt. Best av alt, kan du gjøre bruk av den dynamiske sidens funksjon for raskt å fylle ut innhold fra databasen, noe som gjør det mer som et innholdsstyringssystem i stedet for en nettsidebygger.

I eksemplet nedenfor vil vi lage en enkel Make Tech Easier-blogg og legge til dynamiske funksjoner fra Wix-koden.

Sette opp et nytt nettsted med Wix

Forutsatt at du er ny hos Wix, kan du komme i gang ved å registrere deg for en konto hos Wix. Når du har opprettet en konto, blir du bedt om å opprette nettstedet ditt.

Deretter vil det be deg om å velge hvilken type nettside du vil opprette. Siden jeg replikerer en Make Tech Easier-blogg, valgte jeg alternativet "Blogg".

Neste skjerm vil spørre hvordan du vil opprette nettstedet ditt.

Wix ADI gjør bruk av kunstig intelligens for å lage et nettsted automatisk for deg. Hvis du foretrekker å gå manuelt, velger du Wix Editor-metoden. (For å få tilgang til Wix-koden må du bruke sistnevnte. Hvis du har valgt Wix ADI, kan du fortsatt bytte til redigeringsmodus senere.)

For dette eksempelet brukte jeg Wix Editor som jeg ønsket å ha full kontroll over nettstedets utseende. Derfra kan du starte med en mal. (Det er tusenvis av dem.)

For å holde det enkelt begynte jeg med en blank mal med et klassisk layout. Følgende bilde er hvordan det ser ut.

Tilgang til Wix-koden

For å få tilgang til Wix-koden, gå til "Verktøy" og sjekk alternativet "Utviklerverktøy".

Du vil nå se en ny «Site Structure» -kolonne. Her kan du få tilgang til alle Wix-kodens funksjoner.

Opprette databaser for å lagre innlegg

En av de flotte funksjonene i Wix Code er Database-funksjonen som lar deg lage databaser (aka Collection) og lagre data i den. For en blogg må vi opprette en database for å lagre alle innleggene våre. I Database-delen klikker du på "Legg til ny samling." Gi samlingen et navn og angi dets formål. Det finnes flere databasetyper du kan velge mellom, alt fra brukergenerert innhold, medlemsinnlevering, private data, etc.

Når samlingen er opprettet, kan du begynne å legge til felt og data i den.

Det vi har opprettet, er en Posts database med tittelen, innholdet, publisert dato og ulike aspekter av et blogginnlegg. Deretter må vi fylle ut databasens innhold til hovedsiden.

Dynamiske sider

Dynamiske sider er mer som en malside der du kan opprette ett design og koble det til databasen, og det vil automatisk fylle alle elementene i databasen til forsiden under sine egne nettadresser. For eksempel har vi seks innlegg i databasen. Med en enkelt dynamisk side kan vi få det til å vise alle innleggene på hovedsiden. Dette sparer deg for å manuelt opprette en enkelt side for hvert innlegg. Det finnes to hovedtyper av dynamiske sider i Wix-koden - den ene er for å vise et enkelt element, mens det andre er for kategori (en samling av lignende elementer i en liste).

Følgende viser hvordan du lager dynamiske sider og kobler dem til nettstedet.

1. På den flytende verktøylinjen klikker du på det første ikonet og velger "Dynamiske sider." Klikk på "Legg til i stedet" -knappen.

2. Velg "Item Page" fra popup-vinduet.

3. I URL-adressen velg feltet (i databasen) som du vil bruke den til URL-adressen. I dette tilfellet setter jeg "tittelen" for å være nettadressen.

4. Deretter skal du utforme siden og legge til felt fra databasen. Med hvert element du drar til siden, kan du klikke på "Koble til data" -knappen for å koble den med feltet fra databasen. For eksempel dro jeg et "Header 1" -element til siden og koblet det til "Tittel" -feltet i Posts-databasen.

Og jeg gjorde det samme for det kjente bildet, innlegget, innholdet etc.

5. Når du er ferdig med designet, kan du forhåndsvise det og se hvordan det ser ut på forsiden.

6. Det neste trinnet er å koble den dynamiske siden fra startsiden. Last inn startsiden og legg til en Repeater-widget fra delen Lister og grids. Koble widgeten til Posts-databasen og koble hvert element i widgeten med feltene i databasen. Under delen "Link connects to", rull ned og velg "Innlegg" i delen Dynamiske sider.

Det er det.

Det du kan se er at vi bare har opprettet en dynamisk side, og den genererer automatisk alle sidene for hvert element i databasen. Du kan gjøre det samme for å legge til en kategori dynamisk side også.

Legge til javascript på sider

Hvis du er en kunnskapsrik javascriptkoder, kan du legge til javascript for hver ekstra funksjon på hver side. Hvis du for eksempel har lagt til et brukerskjema på siden din, kan du bruke javascript til å validere skjemafeltet før innsending.

Merk : For å legge til javascript-kode på en side, gå til en hvilken som helst side (eller siden hvor du vil at koden skal vises), og klikk på "Sidekode" -knappen nederst på koden. Et vindu vil dukke opp, og du kan legge til koden der.

1. Vi har opprettet en enkel skjema som samler fornavn, etternavn og e-postadresse fra brukeren. For dette skjemaet vil vi validere e-postadressen og sørge for at feltet Bekreft e-post er det samme som feltet "E-post".

2. Legg til følgende kode i «Sidekode» -delen:

 $ w.onReady (funksjon () {const validateEmail = (otherEmailElementId) => (verdi, avvis) => {la otherEmailElement = $ w (otherEmailElementId); hvis (verdi === otherEmailElement.value) {otherEmailElement.validity.valid = true; otherEmailElement.resetValidityIndication (); return;} console.log ("Email og bekreft at e-postfeltene dine ikke stemmer overens"); otherEmailElement.validity.valid = false; otherEmailElement.updateValidityIndication (); avvis ("E-post og bekreft e-post feltene stemmer ikke overens ");}; $ w (" # emailConfirmInput ") .CustomValidation (validateEmail (" # emailInput ")); $ w (" # emailInput ") .CustomValidation (validateEmail (" # emailConfirmInput ")); onBeforeSave (() => {la validationMessage = ''; hvis (! $ w ('# emailInput') .gyldig) {hvis (! $ w ('# emailInput') .verdi) valideringMessage + = 'Vennligst skriv inn en e-postadresse \ n', ellers hvis ($ w ('# emailInput') .verdi! == $ w ("# emailConfirmInput"). verdi) {valideringMessage + = 'E-post og Bekreft e- samsvarer ikke med \ n ';} $ w (' # validationMessages '). text = v alidationMessage; $ W ( '# validationMessages') expand (.); } ellers $ w ('# validationMessages'). kollaps (); }); });

Dette vil validere e-postadressen og vise feilmeldingen hvis e-postadressen er ugyldig.

Det er nok du kan gjøre med Javascript. Sjekk ut eksemplene her for mer informasjon.

Eksterne APIer

Dette er det eneste trinnet der det kan bli mer komplisert. Wix-koden integreres nå med ekstern API, slik at du enkelt kan koble til tredjepartstjenester som Amazon, Dropbox, Google Disk, Twitter, IFTTT, Zapier osv. Jeg vil ikke gå inn på detaljer her, men hvis du er interessert, vil du kan sjekke ut deres API dokumentasjon.

Konklusjon

Hvis du ikke er teknisk kunnskapsrik eller en utvikler, kan det være en kjedelig oppgave å bygge ditt eget nettsted. Wix har gjort en god jobb med å lage nettstedet til en bris. Med Wix Code går det litt mer og gir deg god kontroll over ditt nettsted. Du har nå tilgang til kompliserte webutviklerverktøy og full kontroll over hvordan nettstedet ditt skal fungere, alt gjort med et enkelt klikk, dra og slipp uten krevende koding.

Kudos til Wix for å lage et slikt brukervennlig verktøy som vil løse mange problemer.

Prøv Wix-koden og la oss få vite hva du synes om det.

Wix-kode