Sadržaj
- Početak rada
- Koristite statički generator web mjesta
- Dobivanje našeg sadržaja
- Je li upalilo?
- Možemo li pitati svoje podatke?
- Prikaži naše postove
- Izradite predložak posta
- Sljedeći koraci
O CMS pristupu bez glave prvi sam put čuo u razgovoru koji sam gledao iz Twal Cities Drupala. Svidjela mi se ideja o razdvajanju briga između autorskog sadržaja i gledanja.
- Najbolje web hosting usluge u 2019
Već sam iskusio kako se jedan poslužitelj lako može srušiti, uklanjajući sve web stranice na njemu, što je dovelo do minuta ili sati panike koja zaustavlja srce (na mom je bilo 24). Također sam vidio kako monolitna web stranica temeljena na CMS-u može pretrpjeti sigurnosni kompromis i potrajati mnogo truda za popravak (za to mi je trebalo više od dva dana neplaćenog rada). Za niz mogućnosti davatelja web hosting usluga pogledajte naš vodič.
- 23 izvrsna primjera WordPress web stranica
Vidio sam prednosti CDN-ova (mreža za isporuku sadržaja) koji mogu pohraniti vaše slike, audio i video datoteke na poslužitelje optimizirane za brzu isporuku i mogu duplicirati te datoteke širom svijeta za brzu isporuku u ta područja ako je potrebno. Što ako bi cijelo vaše web mjesto moglo imati koristi od ovog pristupa?
Trebat će vam…
● Računalo s internetskom vezom (obvs)
● Uređivač koda (Atom ili VS kôd)
● Ljuska / terminal naredbenog retka
● Instalirana je najnovija verzija Node.js (ovdje možete preuzeti i instalirati)
● WordPress web mjesto s kojeg možete dobiti sadržaj. Ako ga nemate, možete koristiti WordPress.com platformu ili ovaj Heroku paket za izradu.
● Izvorne datoteke s GitHub-a.
Početak rada
WordPress se isporučuje s REST API-jem, a to je ono što ćemo koristiti za ispitivanje vaših podataka. Dakle, zapravo nam ne treba ništa drugo! Naša stranica za prikaz potpuno je odvojena od naše stranice sa sadržajem, tako da nam neće trebati WordPress teme ili bilo koja druga prilagodba izvan nekoliko (neobaveznih) dodataka. Iako ih naravno možete dodati ako želite.
Izuzetak je ako su vam potrebna prilagođena meta polja za dodatna područja sadržaja. Vjerojatno za to koristite napredna prilagođena polja; te podatke možete dodati u WordPress API instaliranjem ovog dodatka.
Koristite statički generator web mjesta
Sad kad imamo izvor sadržaja, dohvatimo podatke i prikažemo ih pomoću statičkog generatora web mjesta. Moje oružje koje sam izabrao na ovom području je Gatsby, izvrstan statički generator web stranica koji je izgrađen s JavaScriptom. (Pogledajte ove odabire graditelja web stranica za jednostavne načine izrade web mjesta.)
Ako tražite dobar način da nadogradite svoje JavaScript vještine i naučite Reagirati zaglavljujući se u nekom kodu, toplo preporučujem da to pokušate s Gatsbyem. I sam sam puno naučio igrajući se s tim.
Prvo, instalirajmo alat naredbenog retka koji nam omogućuje stvaranje web lokacija Gatsby:
npm instaliraj -global gatsby-cli
Sada idite do mape u kojoj želite zadržati web mjesto i pokrenite ovu naredbu:
gatsby novi blog
To će stvoriti novu mapu pod nazivom 'blog' i instalirati Gatsby i njegove ovisnosti u ovu mapu. Otvorite ovu mapu u svom omiljenom uređivaču teksta. Čini se da tamo ima puno datoteka. Ne brinite, mi ćemo samo izravno uređivati gatsby-config.js, gatsby-node.js datoteke i src mapa, u kojoj žive naši predlošci.
Ako imate puno datoteka za pohranu, vrijedi nadograditi pohranu u oblaku.
Dobivanje našeg sadržaja
Prvi korak koji želimo poduzeti je dohvatiti naš sadržaj s API-ja web stranice WordPress.
Da bismo to učinili, idemo instalirati gatsby-source-wordpress, unaprijed napisani dodatak za WordPress. Ovo ilustrira jedan od glavnih razloga zbog kojih volim Gatsbyja - podatke možete dobiti iz različitih izvora. Puno statičkih generatora web stranica ograničeno je na korištenje datoteka Markdown, ali Gatsby je vrlo fleksibilan.
Gatsbyev ekosustav dodataka vrlo je zreo. Postoji mnoštvo unaprijed napisanih načina za dobivanje vaših podataka i mnoštvo drugih pametnih funkcionalnosti koje su također korisne.
Da biste instalirali dodatak, prvo promijenite direktorij na novo web mjesto Gatsby pomoću ove naredbe: cd blog.
Sada pokrenite ovu naredbu: npm install --save gatsbysource-wordpress.
Kada to učinite, vrijeme je da otvorite datoteku gatsby-config.js. Vidjet ćete da već postoji neka osnovna postavka koju nam Gatsby daje prema zadanim postavkama. Nadogradit ćemo na tome kako bismo ovdje konfigurirali naš dodatak:
module.exports = {siteMetadata: {title: 'Gatsby Default Starter',}, dodaci: ['gatsby-plugin-reagiraj-kaciga', {rješenje: "gatsby-source-wordpress", opcije: {baseUrl: "my- wordpress-site.com ", protokol:" https ", hostingWPCOM: false, useACF: true, searchAndReplaceContentUrls: {sourceUrl:" https://my-wordpress-site.com ", replacementUrl:" https: // my-static -site.com ",}},},],}
Je li upalilo?
Možete provjeriti otvaranjem terminala, upisivanjem razvija se gatsby i gledajte što se događa. Biti upozoren! Čak i ako ste ispravno postavili postavke, ionako ćete dobiti neka upozorenja - ovo je možda Gatsby u potrazi za sadržajem koji još niste napisali.
Sada u pregledniku možete vidjeti zadani gatsby-starter.
http: // localhost: 8000 /
Pregledajte GraphiQL, IDE u pregledniku, da biste istražili podatke i shemu svoje web lokacije.
http: // localhost: 8000 / ___ graphql
Imajte na umu da razvojna gradnja nije optimizirana. Da biste stvorili produkcijsku građu, koristite gatsby build.
Ako Gatsbyjev zadani starer (desno) nije ono što dobivate, provjerite nalazi li se vaša WordPress stranica na poddomeni, da li definitivno koristi HTTPS ili HTTP i imate li isti u svojim postavkama.
Sada možemo otići na http: // localhost: 8000 / i vidjeti našu Gatsby stranicu!
Možemo li pitati svoje podatke?
Možda ste primijetili da ovdje nema WordPress sadržaja. To je zato što Gatsbyju još nismo rekli što s tim učiniti. Prije nego što to učinimo, samo provjerimo je li naš sadržaj zapravo dostupan Gatsbyju. Da biste to učinili, posjetite ovaj url:
http: // localhost: 8000 / ___ graphql
Ovaj ugrađeni alat naziva se GraphiQL i još je jedna tajna moć Gatsbyja.
GraphQL je sličan REST-u: to je način za pretraživanje podataka. Ali s GraphQL-om možete mnogo lakše komunicirati s podacima. GraphiQL (vizualni IDE za GraphQL) može nam pokazati neke od ovih trikova. Na lijevoj ploči pokušajte upisati sljedeće:
{allWordpressPost {rubovi {čvor {id obrazac predloška statusa puža}}}}
Ovo može izgledati pomalo poput JSON-a, ali nije. To je novi jezik upita za koji mislim da će jednog dana uglavnom zamijeniti REST kao način komunikacije s API-ima.
Što ste dobili kad ste pritisnuli ctrl + enter u GraphiQL? Nadamo se da ćete vidjeti svoje WordPress postove i stranicu s desne strane zaslona.
Zapravo ćemo koristiti ovaj upit u sljedećem koraku, pa budite pri ruci! Možda biste željeli vidjeti koje druge podatke možete dobiti pomoću GraphiQL-a dok ste ovdje. Ako to želite učiniti, pokušajte pomicati pokazivač i upišite ctrl + razmak i / ili ctrl + enter. To će otkriti druge skupine sadržaja.
Dakle, sad imamo sadržaj u Gatsbyju. Dalje, moramo ga prikazati.
Prikaži naše postove
Za ovaj sljedeći korak koristit ćemo gatsby-node.js datoteka.
gatsby-node.js je datoteka koju možete koristiti za interakciju s Gatsbyjevim "Node API". Ovdje možete kontrolirati kako se generira vaša web lokacija i stvarati stranice, postove i još mnogo toga.
Ovdje ćemo napisati neke upute kako bismo Gatsbyju rekli što učiniti s našim podacima:
const put = zahtijeva (`put`); Izvozi.createPages = ({graphql, boundActionCreators}) => {const {createPage} = boundActionCreators vraćaju novu Promise ((razriješiti, odbiti) => {graphql (`{{allWordpressPost {rube {čvor {id oblik predloška statusa puža}}} } `). tada (rezultat => {ako (rezultat.pogreške) {console.log (rezultat.pogreške) odbaci (rezultat.pogreške)} const postTemplate = path.resolve (` ./src/templates/ post.js` ) result.data.allWordpressPost.edges.forEach (edge => {createPage ({path: `/ $ {edge.node.slug} /`, komponenta: postTemplate, context: {id: edge.node.id,}, })}) razriješiti ()})})}
Ovaj kôd stvara stranice iz našeg GraphQL upita i za svaku će stranicu upotrijebiti predložak koji smo definirali (/src/templates/post.js). Dakle, sljedeće, moramo stvoriti tu datoteku!
Izradite predložak posta
Unutar mape / src / stvorite mapu koja se naziva predlošci i datoteku koja se zove post.js. Dodajte mu ovaj kod:
import React from 'reagiraj' import Helmet iz klase 'reagiraj-kaciga' postTemplate produžuje React.Component {render () {const post = this.props.data.wordpressPost; const slug = this.props.data.wordpressPost.slug; return (div> naslov kacige = {`$ {titleString} | $ {siteTitle}`} /> h1 opasnoSetInnerHTML = {{__html: post.title}} /> div dangerouslySetInnerHTML = {{__html: post.content}} /> / div>)}} izvoz zadane pageTemplate izvoz const query = graphql` upit currentPost ($ id: String!) {wordpressPost (id: {eq: $ id}) {naslov content slug} web mjesto {siteMetadata {title}}}
Ovo koristi drugačiji GraphQL upit za dobivanje podataka o određenom postu koji je poslao gatsbynode.js datoteku, a zatim koristi React kako bi to prikazao u pregledniku.
Ako želite brzo vidjeti popis svih svojih postova, možete tipkati http: // localhost: 8000 / a u adresnu traku preglednika. Ovo će vas odvesti na razvojnu stranicu 404, koja sadrži sve vaše postove. Kliknite jedan da ga posjetite!
Sljedeći koraci
Izgrebali smo površinu kako koristiti WordPress kao CMS bez glave i nadam se da sam vam predstavio neke zanimljive koncepte i alate koje biste mogli koristiti i eksperimentirati u budućnosti.
U ovoj je priči još puno toga, a moje kolege i ja smo o tome puno blogovali u Indigo Treeu. Također sam više napisao na svom osobnom blogu, Delicious Reverie.
Molimo vas da me kontaktirate putem tih kanala i na Twitteru kako biste čuli uzbudljivija događanja u svijetu bezglavog CMS-a!
Ovaj je članak izvorno objavljen u broju 308 od neto, najprodavaniji svjetski časopis za web dizajnere i programere. Kupite izdanje 308 ovdje ili pretplatite se ovdje.
