Share
I løpet av kurset optimaliserer du nettstedet ditt uten AMP, viste jeg deg detaljert hvordan du optimaliserer nettstedet ditt for lynrask ytelse uten ved hjelp av Googles AMP.
I denne videoen fra kurset lærer du hvordan du lager en populær komponent - en karusell av roterende tweets - ved hjelp av det lette Siema-skriptet. Teknikkene du lærer vil hjelpe deg å oppnå god ytelse uten å bruke AMP.
Denne videoen hentes fra tidligere leksjoner i kurset, hvor vi opprettet et nettsted med tre tweets innebygd nederst på siden. Du kan finne full kildekoden for prosjektet på GitHub. I denne leksjonen skal vi slå de tre tweets inn i en karusell.
I AMP-versjonen av nettstedet vårt ble det gjort med amp-karusell egendefinert element. Men i stedet skal vi bruke et kult lite skript som heter Siema.
Siema merker alle boksene vi leter etter med våre skript:
Vi har allerede lagt Siema til vårt index.min.js-skript tidligere da vi opprettet vår fil, og den er allerede lastet inn i vår pagecontent.html-fil, så den er klar for at vi skal bruke.
Alt vi trenger å gjøre er å legge til en liten kode i pagecontent.html for å aktivere vårt skript.
const mySiema = newSiema (selector: '.slides');
Skjermbildet under viser hvor du skal sette det inn:
Det vi gjør her er å skape en konstant, og navngi den mySiema. Vi setter det konstant lik en ny forekomst av Siema, og så legger vi til et objekt med noen parametere.
Inne i de krøllete parentesene legger vi til eiendommens velger, og vi utpeker selgeren som Siema skal se etter for å lage en karusell ut av barna sine. Tidligere la vi til klassen .lysbilder som inneholder tweets, så hvis vi målretter dette med Siema, kommer det til å ta hver av våre tweets og gjøre det til et lysbilde som er i vår karusell.
Hvis du sjekker nettstedet nå, bør du se den første tweeten som vises som et lysbilde.
Det viser ikke de andre, fordi vi må legge til en liten ekstra kode for å gjøre karusellen automatisk.
For å gjøre karusellen automatisk, må vi endre koden vår som følger:
const mySiema = newSiema (selector: '.slides', loop: true); setInterval (() => mySiema.next (), 4000)
Hva vi gjør her, forteller Siema hvor lenge vi vil at det skal vente mellom hver av våre lysbilder. Så på siste linje, stiller vi intervallet med setInterval, og så sier resten av linjen Siema at vi ønsker at intervallet mellom hvert lysbilde skal være 4.000 millisekunder eller 4 sekunder.
Mens vi er i det, må vi også fortelle Siema at vi vil at den skal sløyfe. Så gjør vi det med linjen loop: true.
Nå går karusellen automatisk fra ett lysbilde til det neste, og venter på fire sekunder i mellom, og da slår det tilbake til starten.
Det mangler enda en ting, og det er noen små knapper som vi kan bruke til å manuelt gå framover eller tilbake i karusellen.
Så for å sette opp knappene våre, er det første vi trenger å legge til litt ekstra HTML i samme fil. Legg til følgende kodebrikk inni twitter-karusell div, men utenfor lysbilder div, fordi vi ikke vil at Siema skal behandle disse knappene som lysbilder som må settes inn i karusellen.
Denne koden legger ganske enkelt to SVG-former: en liten trekant som peker mot venstre, og en liten trekant som peker ut til høyre.
Fordi vi ikke trenger å laste inn et bilde, gir det oss en enda raskere lastetid, og filstørrelsen på denne lille koden for å sette opp en SVG-form er utrolig liten.
Du kan se at vi har klassenavnet prev på den første av knappene våre og deretter neste på den andre. Og det er de klassene som vi skal målrette med Siema, fortelle det å behandle disse knappene som fremover og bakover knapper for karusellen.
Vi skal bruke et lite JavaScript for å finne disse elementene i vår kode. Dette er hvor du kanskje har vært vant til å jobbe med jQuery, men selvfølgelig unngår vi å bruke jQuery på nettstedet vårt slik at vi ikke har den ekstra koden som skal lastes inn. I stedet skal vi endre koden vår ved legger til to nye linjer slik at det ser slik ut:
I denne koden legger vi til en spørringsvelger for dokument og spesifiserer velgeren vi vil se etter, hvilken er klassen prev. Deretter legger vi til en hendelselytter, og hendelsen som vi vil lytte til, er klikk.
Så nå når noen klikker på den knappen til venstre, skal vi utløse en handling, og resten av linjen setter opp hva den oppførelsen er for knappen på venstre side.
Så, i neste linje, gjør vi det samme med knappen på høyre side, bare denne gangen erstatter vi prev med neste.
Og nå, hvis vi sjekker vår side, kan vi se de forrige og neste knappene, og hvis vi klikker på dem, kan vi fortsette gjennom karusellen, men vi vær så snill.
Nå er det bare en liten ekstra kode som vi må legge til. I løpet av kurset har vi opprettet en versjon av nettstedet for folk som har slått av JavaScript i nettleserne. Men akkurat nå, hvis vi slår av JavaScript, har vi våre fine, små blokker som våre fallbacks, men vi har disse ubrukelige navigasjonsknappene her nå.
Så vi kan fikse det ved å gå til vår noscript.css stilark og legge til:
.karusellknapp display: none;
Nå, når vi oppdaterer nettstedet vårt med JavaScript slått av, kan vi se at vi har kvitt disse knappene.
I hele kurset, optimaliser nettstedet ditt uten AMP, lærer du hvordan du tar et eksisterende AMP-basert nettsted og konverterer det til å bruke ikke-AMP-ekvivalenter. Kurset vil gi deg nyttige metoder for å gjøre nettstedene dine løpende raske, men med optimaliseringsteknikker du selv bestemmer.
Du kan ta dette kurset med en gang med et abonnement på Envato Elements. For en enkelt månedlig avgift får du tilgang ikke bare til dette kurset, men også til vårt voksende bibliotek med over 1000 videokurser og bransjeledende e-bøker på Envato Tuts+.
I tillegg får du ubegrensede nedlastinger fra det store Envato Elements-biblioteket med 400 000 kreative eiendeler. Lag med unike skrifttyper, bilder, grafikk og maler, og lever bedre bedre prosjekter raskere.
Accentsconagua