AgTech tema for Frontity

07.03.2021

Å bygge en snappy og rask WordPress-frontend er det vi alltid satser på og er det de fleste kunder ønsker. En brukervennlig redigeringsmulighet for innhold øker også verdien. For backend oppfyller WordPress- og Gutenberg-blokkereditoren de behovene. Som standard kommer den med et par dusin blokker, og vi kan utvide den til tusenvis av blokker med WordPress-plugins fra tredjeparter. Dermed kan vi bygge sidene våre på akkurat den måten vi ønsker.

Når det kommer til frontend, vil det ikke fungere så bra å bygge et raskt og responsivt WordPress-nettsted med alle disse plugins’ene og blokkene i tradisjonell PHP-temastruktur. Når vi går inn i alderen med server-side rendering (SSR) og statisk hosting, er brennende raske nettsteder den nye normen. For å dra nytte av denne nye tech stacken har vi Frontity, React-rammeverket bygget med WordPress i hovedfokus.

Frontity bruker WordPress som et headless CMS og utnytter kraften til WordPress REST API for å bygge et React-basert JAMstack-nettsted. Den kan også utvides med Frontity-komponenter, og du kan jobbe med de fleste av React-komponentene som finnes også. I tilfelle du sitter fast med noe, så er det et fantastisk samfunn du kan stole på. Ikke glem det enorme samfunnet av React devs, da Frontity-plattformen er basert på React. Kort sagt, vi kan bygge en rask, pålitelig, skalerbar og sikker frontend med Frontity.

Dermed har vi Gutenberg-editoren som tar seg av backend for å legge til / redigere innhold, og Frontity som vår frontend for et moderne, raskt JAMstack-nettsted.

AgTech Frontity Tema

Vi vil introdusere AgTech, vårt nye starttema for Frontity. Du kan se temademoen her.

Fra start pakker temaet støtte for de vanligste Gutenberg-blokkene, og enda viktigere, du kan utvide den for å støtte ytterligere blokker.

Vi har inkludert minimum Bootstrap CSS som kombinerer følgende Bootstrap CSS / SCSS filer: functions, variables, mixins, root, reboot, type, grid, forms and utilities fra den siste versjonen. Dette gir et utgangspunkt for å tilbakestille standard nettlesere og typografistiler, skjemaer, lage tilpassede oppsett / rutenett og legge til responsive brytpunkter. Vær oppmerksom på at vi ikke har tatt med noen Bootstrap JS-filer.

Installasjons- og temainnstillinger

For å installere AgTech temaet i ethvert Frontity-prosjekt, bruk koden:

npm i @aamodtgroup/agtech

Konfigurer deretter AWSM F1-temainnstillingene via frontity.settings.js-filen. Temaalternativene kan spesifiseres i tilstanden state.theme under pakker.

Bruke Gutenberg med Frontity

Som vi sa tidligere, støtter AgTech Frontity-temaet Gutenberg-blokker. Vi bruker de nyeste Gutenberg blokkene med stiler og temafiler direkte fra WordPress-repoet i temaet. Oppsettet du bygger på WordPress-backend ved hjelp av Gutenberg-blokker, vil gjenspeile frontend. For å tilpasse disse blokkene ytterligere kan du skrive tilpassede stilkoder i Frontity.

For å legge til egendefinerte stiler til Gutenberg-blokkene dine, må du først legge til barneblokkene i en “Group” -blokk og tildele den en eller flere CSS-klasser. Deretter kan du bruke disse CSS-klassene til å style hele blokken sammen med alle underblokker i gruppeblokken.

For tredjeparts Gutenberg-blokker du bruker i WordPress-editoren, Må deres tilsvarende stilark eller CSS kopieres til Frontity.

Fordeler

  • Du kan bruke Gutenberg-blokker i WordPress-backend, som gjenspeiles i Frontity-frontend.
  • Enkel styling og tilpasning av Gutenberg-blokker i Frontity.
  • Du kan legge til støtte for tredjeparts Gutenberg-blokker ved å legge til CSS eller stilark i Frontity.
  • Du kan bruke Bootstrap-hjelperklasser og rutenett til å bygge nye oppsett og seksjoner

Ulemper

  • Egendefinerte Gutenberg-blokker med JS-avhengigheter (som faner, accordtion osv.) Fungerer kanskje ikke som forventet, for øyeblikket kan vi ikke bruke disse JS-avhengighetene i React.
  • Du må lære deg CSS-in-JS-konseptet og emotion (det fungerer på samme måte som SCSS).
  • Hvis du kobler til tilpassede stilark, kan Frontity ikke optimalisere kodebasen fullt ut, og det vil påvirke siderangeringen din.

Ressurser

Vennligst finn demo av temaet i lenken som er delt nedenfor. For brukernes glede har vi lagt til et par standardsider med innhold, layouter formatert med Gutenberg-blokker. Vi har også integrert Contact Form 7 i temaet for å vise hvor godt plugins fungerer med Frontity rammeverket.

Dette er bare et utgangspunkt for Frontity. Det er hva AgTech temaet handler om. Det du kan bygge videre på dette temaet er ubegrenset. Alt vi ønsket å gjøre er å bygge et solid starttema som vil oppmuntre flere utviklere til å prøve å begynne å bruke Frontity til å bygge sine prosjekter.

Vi håper det vil hjelpe folk å lære og bygge Frontity-nettsteder. Hvis du har noen forslag eller spørsmål, er du velkommen til å ta kontakt.