DE{CODE}: Caracteristici noi pentru Atlas

Actualizările instrumentelor de dezvoltare headless Atlas ale WP Engine vă vor ajuta să îndepliniți cele mai exigente cerințe ale clienților dvs. Folosind un cont Sandbox gratuit, această demonstrație vă va arăta cum să adăugați aceste noi funcții pe site-ul dvs. fără cap. Urmăriți videoclipul de mai jos pentru a începe să vă construiți cel mai performant și mai sigur site web de până acum!

Diapozitive de sesiune

Transcriere text integral

KELLEN MACE : Bună. Sunt Kellen din echipa de relații cu dezvoltatorii de la WP Engine. În această discuție, vom explora câteva dintre caracteristicile noi și interesante ale ecosistemului Atlas. Vom vedea cum în portalul de utilizatori WP Engine, putem crea o nouă aplicație Atlas și alegem acest model de portofoliu. Făcând acest lucru, putem obține un site WordPress complet fără cap live pe internet în câteva minute.

Apoi vom vedea cum putem clona acel proiect pe mașina noastră locală și să ne pregătim pentru dezvoltarea locală, astfel încât să putem personaliza noul nostru site. Apoi ne vom îndrepta atenția către Atlas Content Modeler și vom vedea cum îl putem folosi pentru a crea un nou model de conținut personalizat numit Fotografii.

Și acest model de conținut Fotografii va avea câteva dintre propriile câmpuri personalizate, inclusiv unul care este un câmp repetabil, care este o funcție nouă care a venit recent în Atlas Content Modeler. Apoi, în sfârșit, vom vedea cum putem face o dezvoltare personalizată în aplicația noastră JavaScript front-end și vom interoga acele date personalizate Fotografii și apoi le vom reda în pagină.

Odată ce am creat un cont WP Engine și m-am conectat la pagina Atlas a portalului utilizatorului, pot continua și pot face clic pe butonul pentru a crea o nouă aplicație. De aici, putem fie să începem cu un plan, care este un site preconstruit, fie să extragem dintr-un depozit existent. Să începem cu un plan. Acum putem selecta ce plan ne place să folosim. Așa că vom alege modelul Portofoliu, apoi facem clic pe Continuare.

Următorul pas este să conectați această aplicație la GitHub. Așa că vom face clic pe butonul pentru a face acest lucru, apoi ne vom conecta la GitHub. Și după aceea, vom vedea acest ecran, indicând că aplicația noastră a fost autorizată. Deci, în continuare, trebuie să clonăm efectiv acest repo. Așa că vom face clic pe Clone Blueprint, apoi vom da un nume noului nostru depozit. Și faceți clic pe butonul pentru a crea un nou depozit folosind acest șablon de plan.

Deci aici puteți vedea că acest nou depozit de aplicații a fost creat pe contul meu GitHub. Acum trebuie să conectăm acest repo la aplicația noastră Atlas. Așadar, înapoi în portalul utilizatorului, vom derula în jos la secțiunea Repository selectat. Dacă ați permis accesul la toate depozitele dvs., este posibil să îl vedeți pe listă. Dacă nu, puteți face clic pe Gestionare depozite.

Pe această pagină, veți putea selecta repozițiile pe care Atlas ar trebui să le poată accesa. Deci vom selecta repo-ul nostru pe listă. Faceți clic pe Salvare, iar acum, când ne întoarcem la panoul de utilizator, vom vedea repo pe care l-am adăugat pe listă. Deci, mergeți mai departe și selectați asta. Pentru o regiune pentru aplicația noastră, vom rămâne cu US Central. Și, în sfârșit, faceți clic pe butonul pentru a crea această aplicație Atlas.

Aici, vom vedea o notificare că aplicația noastră este acum în curs de dezvoltare. Așa că îi vom acorda doar un minut. Acum că aplicația noastră Atlas s-a terminat de construit, putem merge mai departe și faceți clic pe acest link URL Atlas pentru a vedea noua noastră aplicație Atlas rulând live pe internet. Deci, pe pagina principală, vom vedea lista noastră cu ultimele postări. Vom vedea mărturiile noastre.

Ne putem îndrepta către pagina portofoliului și a verifica aici o listă a proiectelor noastre de portofoliu. Voi accesa un proiect individual. În continuare, vom verifica blogul. Așa că accesați pagina blogului și vedeți grila noastră de postări aici. Și putem face clic pentru a vedea și o pagină individuală de postare de blog. Și apoi gata, setați, faceți clic pentru a reveni la pagina noastră de pornire.

Deci, este posibil să observați că aceste tranziții de pagină sunt cu adevărat rapide. Primim o trecere imediată de la o pagină la alta. Și acesta este unul dintre beneficiile de a merge cu o arhitectură WordPress fără cap. În continuare, să vedem site-ul WordPress care se află în culise care alimentează această experiență. Deci, să ne întoarcem la portalul de utilizatori WP Engine și de aici putem face clic pe acest link către mediul WordPress legat.

Aici putem face clic pe WP Admin pentru a fi trimis la administratorul WordPress pentru site-ul nostru. Așadar, aici este partea din spate care alimentează această experiență. Să trecem la postări și putem vedea aici că a fost pre-populat cu o serie de postări de blog false. Deci, de aici provin toate acele date pentru noul nostru site. Să aruncăm o privire și la pluginuri. Aici puteți vedea că mai multe plugin-uri au fost instalate și activate pentru a permite dezvoltarea WordPress fără cap.

Să acordăm o atenție deosebită lui Atlas Content Modeler. Deci, în bara laterală, facem clic pe Content Modeler. Puteți vedea aici că au fost create două piese de conținut personalizat pentru noi, proiecte și mărturii. Și le putem vedea aici în bara laterală. Deci avem proiecte, o listă a acestora, precum și mărturii și o listă a acestora. Deci, de aici provin datele despre proiecte și mărturii pe care le-am văzut pe site-ul front-end.

Deci am făcut niște progrese grozave. Am văzut cum din portalul utilizatorilor putem crea o nouă aplicație Atlas. Și când facem asta, creează nu numai o aplicație JavaScript front-end pentru a servi paginile site-ului dvs., ci creează și back-end-ul WordPress care alimentează acea experiență și vă scutește de problemele de a conecta cele două. Le conectează pe cele două, astfel încât aplicația front-end să își poată sursa datele din back-end-ul WordPress.

De acolo, am putut să aruncăm o privire la aplicația front-end și să o vedem rulând live online, precum și să aruncăm o privire în administratorul WordPress și să vedem unele dintre tipurile de date personalizate sau modele de date și, de asemenea, unele dintre datele inexe care sunt a fost creat pentru noi. Deci, în foarte puțin timp, puteți vedea că avem o aplicație WordPress fără cap care rulează acum.

Dar dacă în acest moment vrem să facem schimbări? Ce se întâmplă dacă construiești un site de portofoliu real și te gândești pentru tine însuți, acest lucru este foarte tare. Acesta este un început excelent. Dar acum vreau să fac câteva modificări. Aș dori să fac câteva modificări de cod pentru a putea schimba unele culori sau pentru a adăuga pagini suplimentare pe site-ul meu. Cum să fac asta? Cum încep cu dezvoltarea locală? Să aflăm în continuare.

Pentru a începe, vom copia linkul către depozitul nostru GitHub și apoi vom rula git clone pe linia de comandă pentru a clona proiectul nostru. De aici, putem face CD în directorul respectiv al proiectului și apoi rulăm instalarea NPM pentru a instala dependențele proiectului nostru. Odată ce s-a terminat, vom continua și vom deschide proiectul într-un editor de cod.

În continuare, trebuie să setăm câteva variabile de mediu. Așa că veți vedea că aici a fost creat un fișier exemplu pentru noi. Și acum trebuie doar să ne asigurăm că acest lucru are valorile potrivite. Deci, înapoi în portalul utilizatorului, vom face clic pe Gestionare variabile și apoi vom arunca o privire asupra variabilelor de mediu pe care le folosește aplicația de producție. Continuați și copiați și lipiți-le pe ambele în aplicația noastră, astfel încât aplicația noastră locală să folosească aceleași variabile de mediu pe care le face producția.

Și ultimul pas aici este să redenumiți acest fișier, eliminând .sample de la sfârșitul acestuia, astfel încât să intre în vigoare. Acum, aplicația front-end cu care lucrăm aici este construită pe Faust.js. Și Faust, pentru a face magia de preluare a datelor pe care o face, trebuie să poată rula ceea ce se numește o interogare de introspecție GraphQL.

Deci, acesta este, practic, Faust care întreabă back-end-ul WordPress, hei, ce date aveți disponibile în schema GraphQL pentru ca eu să interog? Deci, va trebui să activăm introspecția pentru ca acest lucru să funcționeze. Ne vom întoarce la administratorul WordPress aici și vom merge la GraphQL și apoi la setările din bara laterală.

În pagina Setări, vom derula în jos până unde vedem Activați introspecția publică și vom continua și faceți clic pe acea casetă. În timp ce suntem aici, vă recomand să activați și modul de depanare grafică. Acest lucru vă va oferi mesaje de depanare mai descriptive. Odată ce am făcut asta, putem continua și faceți clic pe butonul pentru a salva modificările. Și acum, în sfârșit, putem deschide terminalul și rulăm NPM run generate. Și apoi, odată ce s-a terminat, în sfârșit, NPM rulează dev pentru a pune aplicația noastră să funcționeze local.

Acum, voi face clic pe acest link localhost 3.000 și putem vedea că site-ul nostru rulează într-adevăr local aici. Așa că am spus că vrem să adăugăm conținut la acesta pentru a ne personaliza site-ul. Și acum că suntem pregătiți pentru dezvoltarea locală, putem face exact asta. Deci, să spunem că pentru acest proiect, vrem să avem nu numai postări pe blog și apoi câteva piese de conținut personalizat pe care le avem, cum ar fi proiectele de portofoliu pe care le-am văzut și, de asemenea, aceste mărturii.

Dincolo de acel conținut personalizat, să presupunem că vrem să adăugăm și mai mult. Dincolo de cineva care creează postări pe blog și creează proiecte de portofoliu, să presupunem că clientul pentru care este site-ul este și un fotograf și vrea să prezinte fotografiile pe care le-au făcut. Cum am putea adăuga un tip de conținut personalizat sau un model de conținut personalizat pe site-ul nostru pentru a sprijini datele acestei fotografii, să interogăm pentru asta și apoi să afișăm fotografiile în aplicația noastră frontală? Să facem asta în continuare.

Așa că mă voi întoarce la administratorul WordPress aici și vom merge la Content Modeler. Așa că am mai fost o dată pe ecran. Am aruncat o privire asupra proiectelor și mărturiilor. Putem vedea că acestea sunt modele de conținut personalizate care au fost create pentru noi ca parte a acestui plan. Și pot face clic pe fiecare dintre acestea și pot vedea că fiecare dintre aceste modele are propriul set de câmpuri individuale.

Deci proiectele, de exemplu, ar avea aceste domenii individuale. Și proiectele și mărturiile sunt ambele reflectate aici în bara laterală. Și apoi câmpurile pentru fiecare dintre acestea. Dacă dau clic pe un proiect, apoi dau clic pe unul existent sau merg la Adăugare nou, în orice caz, vom vedea toate aceste câmpuri reflectate aici. Astfel, creatorii noștri de conținut vor vedea toate câmpurile de care au nevoie pentru a introduce aceste date. În regulă.

Cu toate acestea, pentru conținutul nostru personalizat, avem nevoie de un nou model. Deci voi continua și voi crea un nou model făcând clic pe acest buton aici. Deci voi numi această fotografie. Și pentru un nume la plural, vom pune doar un S la sfârșit și îl vom numi fotografii. Acest identificator API generat automat – aici, acest ID – sunt de acord. Poza mi se pare bine. Pentru vizibilitatea API, vrem să ne asigurăm că facem clic pe public, deoarece dorim să putem interoga aceste date prin GraphQL. Pentru pictograma modelului nostru, poate ceva ca o cameră ar fi potrivit pentru fotografii. Și acum voi face clic pe Creare.

Așadar, a fost creat modelul nostru de conținut foto. Deci, în acest moment, se spune că alegeți primul câmp pentru modelul de conținut. Și începând cu această înregistrare, acestea sunt tipurile de câmp acceptate de Atlas Content Modeler. Pentru fotografiile pe care vrem să le prezentăm pe acest site, să folosim câteva dintre acestea.

Să presupunem că vom da fiecăreia dintre fotografiile noastre un titlu. Așa că voi spune Titlu și apoi îl voi numi Titlu foto ca identificator API. Și așa va fi disponibil în schema GraphQL. Pentru asta e. Și vom spune că vrem să folosim asta ca titlu de intrare. Și textul pe o singură linie este bine. Așa că mergeți mai departe și faceți clic pe Creare.

Pentru următorul nostru câmp, să presupunem că vrem să surprindem acea imagine pentru fotografie. Așa că voi atinge plusul. Și aici, vom crea un câmp nou. Vom numi aceasta o singură imagine. Și pentru tip, de fapt, va trebui să selectăm Media, deoarece va fi o fotografie. Așa că îi voi numi imagine. Și apoi aici jos, voi merge mai departe și voi seta aceasta ca imagine recomandată pentru fiecare postare. Așa că voi face clic pe asta și îl vom face și necesar. Așa că știm mereu că va fi acolo. Și apoi faceți clic pe Creare.

Iată. Este al doilea câmp al nostru. Pentru al treilea, să avem o descriere. Așa că voi atinge plusul. Și pentru acesta, acesta va fi un câmp de text îmbogățit. Deci vom spune descriere și asta o va face pentru acel câmp. Și apoi ultimul nostru pe care îl dorim este pentru subiecte. Așa că vom folosi acest câmp pentru a captura ceea ce este afișat în fotografie. Deci, dacă este o fotografie a unui lanț de munți la apus, de exemplu, așa cum va fi una dintre fotografiile noastre, unele dintre subiectele din fotografie ar putea fi munte, stele, cer, lucruri de genul ăsta. Doar o listă cu lucrurile care sunt prezente în fotografie.

Ar exista diferite moduri de stocare a acestor date. Puteți crea o taxonomie personalizată, de exemplu, și apoi alocați termeni fiecăruia dintre aceste lucruri. Deci, fiecare dintre aceste fotografii ar putea avea unul sau mai mulți termeni. Asta ar fi o modalitate de a face asta. Să spunem că, în scopurile noastre, totuși, nu ne interesează să putem grupa fotografii pe baza unei asemenea etichete sau a unei taxonomii.

În schimb, această listă este într-adevăr doar în scopuri de afișare pe site. Problema este că dacă lovim plusul aici, îl facem un câmp de text, ei bine, atunci primim doar unul dintre ele, nu? Și dacă sunt mai multe? Nu știm dinainte câte dintre aceste subiecte ar putea avea o anumită fotografie, nu? Și aici este locul în care caracteristica câmpurilor repetabile a ACM este foarte utilă. Deci haideți să vedem cum arată.

Voi face din acesta un câmp de text aici și îi vom numi subiecte. Și apoi faceți acest câmp repetabil. Deci asta este cheia. Vom merge mai departe și vom face clic pe asta. Și îl vom păstra ca un câmp de text cu o singură linie și vom apăsa Creare. Așadar, modelul nostru de conținut foto de aici a fost creat. Și îl putem vedea în bara laterală.

Deci, dacă dau clic aici pe Fotografii, vom vedea că am unul fals pe care l-am creat din timp aici. Dar dacă creăm Adăugați nou, veți vedea că acest lucru reflectă – câmpurile de aici reflectă ceea ce am adăugat în modelul de conținut. Așa că obținem un titlu. Avem ocazia să atașăm o imagine. Avem un câmp de text îmbogățit pentru descrierea fotografiei și un câmp repetabil aici pentru a adăuga unul sau mai multe subiecte.

Deci, să vedem ce putem face aici. Voi face clic pe Adăugați o imagine recomandată. Și voi alege unul din aparatul meu. Să vedem. Și odată ce s-a terminat de încărcat, îi vom oferi un text alternativ. Vom spune, o floare albă, așa, și gata. Deci aici este imaginea noastră. Să ne întoarcem și să-i dăm un titlu, totuși. Vom spune floare albă cu bokeh. Pur si simplu. Pentru o descriere, vom spune aici o fotografie grozavă a unor flori destul de albe. Pur si simplu.

Și acum pentru subiecții noștri, ne putem întreba, ce este prezent în fotografia de aici? Și poate că putem – floarea ar putea fi una. Faceți clic pe Adăugare articol. Și acel efect bokeh, cu fundalul neclar, există și el. Și tulpina sau ramura copacului, cred, ar fi în fotografie, pentru un alt exemplu. Așa că vom adăuga câteva dintre acestea aici. Și dacă credem că am capturat totul, puteți continua și apăsați Publicare. Deci iată-ne.

Și apoi înapoi în fotografii, anterior îl creasem pe acesta. Munții sunt mișto. Ar trebui setat asa. Așa că obțineți o fotografie a lanțului muntos. Și apoi iată o imagine grozavă a unui lanț de munți cu munte, stele, umbre. Câteva subiecte pe care le are. Deci, asta ne-ar oferi cel puțin câteva postări cu care să lucrăm în aplicația noastră front-end.

Deci, în acest moment, am creat modelul nostru de conținut în back-end-ul WordPress pentru a stoca datele de care avem nevoie pentru aceste fotografii și am creat două noi postări foto pe care să le folosim pentru a încerca să le consumăm în aplicația noastră frontală. Și în continuare, s-ar putea să vă întrebați, cum vom scoate aceste date din WordPress, astfel încât să le putem folosi în aplicația noastră front-end?

Există o caracteristică foarte grozavă pe care Atlas Content Modeler o prezintă pentru a face acest lucru foarte ușor. Așa că mă voi întoarce la Content Modeler aici și voi găsi modelul nostru de fotografii și voi face clic pe pictograma cu puncte mici de suspensie aici. Și voi merge la Deschidere în grafic. Așa că, de îndată ce dau clic pe acesta, va compune o interogare pentru mine care include acest model de conținut pe care l-am creat, fotografii.

Și preia primele 10 dintre acestea, apoi include acest fragment GraphQL de mai jos care conține toate câmpurile pe care le-am creat, inclusiv pe cele personalizate. Deci, dacă veți observa, am adăugat titlul fotografiei, am avut imaginea noastră, am avut descrierea și apoi subiectele. Deci, acesta este foarte util pentru a vedea cum arată aceste date în schema GraphQL. Deci, mergeți mai departe și apăsați acest buton pentru a executa această interogare.

Și puteți vedea ce ar obține aplicația noastră front-end JavaScript dacă ar executa exact aceeași interogare GraphQL. Ar primi fotografii înapoi. Și apoi în interiorul acestuia ar fi un obiect numit matrice, numite noduri. Și în interiorul acestei matrice ar fi obiecte care arată așa. Fiecare dintre aceste fotografii ar avea un titlu, o imagine și apoi mai jos, descrierea și subiectele.

Deci exact de asta avem nevoie. Așa că acum vom folosi câteva dintre aceste câmpuri. Așa că suntem gata să mergem, în ceea ce privește back-end-ul WordPress și capacitatea de a stoca și, de asemenea, de a expune datele acestor fotografii. Deci, acum să vedem cum putem folosi acest lucru în aplicația noastră JavaScript front-end.

Așa că ne vom întoarce acolo. Și cred că un bun punct de plecare pentru asta ar fi să te uiți la pagina Portofoliu, care este o listă de proiecte, nu? Deoarece aceasta este o listă de postări de model de conținut personalizat, iar fotografiile vor fi, de asemenea, acele două pagini au multe în comun. Deci îl putem folosi ca un fel de punct de plecare.

Așa că voi face clic pe Portofoliu aici și doar pentru a ne aminti cum arată. Și cam așa, de unde obținem această listă de proiecte de portofoliu. Deci haideți să deschidem codul acum și să ne murdărim puțin mâinile. Vom urmări această pagină, care este acel proiect slash, și vom vedea cum este construit.

Deci, în interiorul Sursei, voi merge la Pagini. Și apoi voi găsi Project. Iata. Și deschideți fișierul index.js din interiorul acestuia. Așa că derulați puțin în jos și vom vedea că este folosit acest cârlig de paginare a nodului de utilizare. Și acesta este un cârlig React care vine din această locație aici, în interiorul folderului Hooks. Și în interiorul acestuia, numim query.projects.

Și query.projects ne va permite să accesăm date despre tipul de postare personalizat al proiectelor noastre, adică modelul de conținut al proiectului pe care l-am creat. Așa că vom apela la query.projects și apoi vom introduce unele câmpuri pe care vrem să le procesăm din timp, astfel încât să fie imediat ce pagina se încarcă. Deci, asta este această matrice aici sus. Deci, acele câmpuri sunt acolo chiar la prima încărcare a paginii.

Și apoi, odată ce suntem de fapt gata să redăm conținutul acestei pagini, facem asta. Avem o componentă SEO, un antet și apoi un subsol în partea de jos. Și apoi secțiunea principală a paginii de aici se află în interiorul acestei etichete principale, unde avem antetul, care este secțiunea albastră care este introdusă. Și apoi un wrapper div cu lista de proiecte în interiorul acesteia. Și apoi, de asemenea, această componentă Load More, care are ca rezultat acest buton Load More din partea de jos, pe care pot face clic. Și apoi preia mai multe proiecte și le introduce în interfața de utilizare.

Așa este construită pagina respectivă. Și așa cum am spus, îmi place să folosesc asta ca punct de plecare pentru noi. Deci haideți să copiam întregul fișier și vom imita această structură de fișiere aici. Deci, în interiorul Pages, vom crea Fotografie. Și apoi în interiorul acelui folder, vom crea un fișier index.js. În regulă. Și în acest nou fișier, voi lipi conținutul. Dar vom schimba unele lucruri, deoarece nu suntem interesați de datele proiectelor pentru asta, vrem datele noastre despre fotografii. Deci, să vedem cum putem face asta.

Deci, numele acestei constante face referire la proiecte. Deci, să mergem mai departe și să redenumim asta ca prim pas. Putem spune noduri foto pre-trece câmpuri. Deci asta va fi bine. Va trebui să furnizăm propria noastră listă de câmpuri. Poate că vom lăsa doar ID-ul bazei de date pentru moment și apoi vom adăuga câteva într-un moment.

Mai jos, să vedem. Pre-pass foto. Oh, numele s-a încurcat. Iată-ne. Așa că acum se potrivesc din nou. În regulă. În loc de query.projects, nu uitați, dorim query.photos pentru tipul nostru de conținut personalizat. Așa că mergeți mai departe și actualizați-le pentru a fi fotografii, chiar acolo. Derulează puțin în jos.

Deci, această componentă a proiectelor, aceasta nu se va mai aplica, deoarece nu o folosim. Deci voi elimina asta în acest moment și ce zici de asta? Vom avea doar... vom avea doar H1. Spune Bună, doar pentru a obține ceva redat pe pagina de aici. Și poate vom comenta și mai multe.

Așa că voi căuta un proiect pentru a vedea dacă am uitat ceva. Da, doar câteva comentarii de cod și apoi această componentă de aici care este introdusă pe care nu o mai folosim. Deci voi șterge acea componentă. Și cred că ar trebui să fim buni. Deci nu folosim câteva dintre aceste lucruri în acest moment, dar este în regulă. Vom face pentru moment.

Așa că îi voi da o Salvare și vom vedea dacă putem obține acea redare. Deci, acum, pe aplicația noastră front-end, ar trebui să pot naviga la Foto, așa. Și iată-ne. Deci, iată noua noastră pagină. Salută și o mare parte arată la fel ca pagina noastră de proiecte de portofoliu, cum ar fi antetul din partea de sus și subsolul.

Observ că încă scrie portofoliu și probabil că vrem să schimbăm asta. Deci putem face asta pe scurt. Deci iată portofoliul. Vom spune poze. Și apoi, de asemenea, în acest loc, o vom schimba în fotografii. Salvați-l. Iată-ne. Așa că a actualizat antetul.

Acum haideți să vedem cum putem folosi acele date, să ne aducem datele fotografiilor și să afișăm o listă aici. Deci de unde începem cu asta? După cum am văzut în GraphQL– sau în administratorul WordPress aici, cam așa va arăta interogarea noastră. Va avea aceste câmpuri. Deci hai să facem asta. Deci, titlul fotografiei este câmpul personalizat. Dar, de fapt, din moment ce am setat acest câmp ca titlu al postării, am putea folosi doar titlu, deoarece asta va fi – titlul postării va fi același cu câmpul personalizat cu acest nume. Deci am putea folosi doar asta.

Deci, în această matrice, nu vom face doar ID-ul bazei de date, ci vom obține titlul pentru fotografiile, imaginea, descrierea și subiectele noastre. Deci, să le adăugăm și pe acestea. Imagine, descriere și apoi subiect. În regulă. Veți avea nevoie de virgule la sfârșit. Iată-ne. Deci, cred că acestea sunt toate câmpurile noastre pe care vrem să le avem disponibile chiar când pagina se termină. Deci asta mi se pare bine.

Și să testăm dacă putem obține de fapt niște redări de date aici. Deci, sub Hello H1 pe care îl avem, să facem asta. Vom face JSON.stringify și apoi vom trece în acel ceva. Așa că vom face date aici și vom vedea dacă putem obține redarea datelor pe pagina noastră.

Așa că voi păstra asta și ne vom întoarce la partea din față. Și iată-l, destul de sigur. Deci cam așa arată datele. Puteți vedea că îl preluăm cu succes din back-end-ul nostru WordPress. Avem această matrice de noduri și apoi în interiorul acelei obiecte reprezentând fiecare dintre fotografiile noastre individuale și exact datele pe care le-am cerut înapoi, inclusiv fiecare dintre valorile individuale pentru câmpul subiecților noștri repetabil aici.

Deci asta este grozav. Este exact ceea ce avem nevoie. Să facem lucrurile un pic mai curate – ei bine, mult mai curate, cred, decât doar să scuipăm date pe pagină ca aceasta. În loc de doar această etichetă prealabilă aici, să mapam fiecare dintre datele noastre și să redăm un card pe pagină pentru aceasta.

Așa că un lucru pe care îmi place să-l fac este înainte de a presupune că avem postări de redat, trebuie să luăm în considerare cazul că poate nu există, nu? Așa că un lucru pe care-mi place să-l fac este în partea de sus a componentelor mele, am în permanență fotografii, așa ceva. Și apoi fac data.nodes.length așa. Și vom face un semn de întrebare pentru înlănțuirea opțională, pentru că nu știm dacă datele vor exista încă.

Și apoi vom arunca asta într-un boolean ca acesta. Deci, asta înseamnă că dacă eșuăm în acest moment și datele sunt nedefinite, acestea vor deveni false. Vom spune că nu avem fotografii de redat. În caz contrar, dacă reușim să forăm până la lungimea acestei matrice, va fi fie zero, dacă nu există postări, fie unul sau mai multe. Deci, dacă aruncăm acel număr întreg într-un boolean, ne va spune dacă avem sau nu fotografii. Deci, dacă este zero, va fi fals. Dacă este unul sau mai multe, havePhotos ar fi adevărat.

Deci, cu aceste cunoștințe, atunci putem lua unele decizii în interiorul componentei noastre aici. Deci, să ne dăm seama cum putem face asta. Așa că voi spune, dacă avem fotografii, atunci vrem să redăm un lucru. Vom spune... să vedem. Vrem să facem date.photos și apoi le vom mapa peste acestea. Deci, pentru fiecare fotografie, vom reda ceva.

Deci, să returnăm ceva ușor la început. Vom returna... să vedem. Vom face un H2, ce zici, deoarece acesta va fi ca una dintre cărțile noastre. Și apoi vom spune foto.titlu așa. În regulă. Așa că vom face o hartă peste fiecare dintre fotografiile noastre. Și pentru fiecare dintre acestea, vom returna un H2 cu titlul acelei fotografii. În regulă.

Așa că toate acestea sunt ceea ce ne dorim dacă avem de făcut fotografii. Dar cum rămâne cu alternativa, dacă nu o facem? Deci vom avea aici clauza noastră else și hai să redăm altceva. Ce zici de paragraful. Și vom spune, nu există fotografii de afișat. Deci acum, dacă îl salvăm, iată-ne. Așa că acum redăm titlurile postărilor noastre aici.

Deci, să completăm această caracteristică un pic mai mult aici. Vom spune că vrem să returnăm altceva. În regulă. Și pentru fiecare dintre acestea, voi copia doar câteva stiluri, câteva stiluri inline pe care le-am scris din timp aici, doar pentru a ne economisi timpul de a le scrie. Deci voi avea acel wrapper div. Și apoi, în interiorul acesteia, ne putem restabili H2-ul pe care l-am avut. Deci voi lipi într-un H2 cu titlul.

După titlu, ce zici să arătăm descrierea. Putem face asta în continuare. Deci asta va fi photo.description, așa. Dar nu îl putem reda de la sine, ca în interiorul unui container, de exemplu, exact așa. Dacă încercăm să facem acest lucru, acest lucru nu va funcționa pentru noi, deoarece HTML-ul nu va fi scăpat. Deci, dacă salvez asta, puteți vedea acum că HTML-ul evadat este afișat pe pagină, ceea ce nu este ceea ce ne dorim.

Deci, React are un utilitar pentru lucrul cu HTML care este sigur și nu trebuie să fie scăpat astfel. Și asta înseamnă să folosiți div și apoi periculos SetInnerHTML așa. Și îi puteți transmite un obiect în care o proprietate este HTML dublu subliniere.

Și apoi valoarea pe care o transmiteți este lucrul pe care doriți să îl redați fără a scăpa. Deci, pentru noi, asta ar fi photo.description, exact așa. Și apoi acest div poate fi auto-îmbrăcăminte. În regulă. Așa că acum îi voi acorda o salvare. Vom vedea ce primim. Misto. Deci acum HTML-ul nostru nu mai este scăpat. Deci mi se pare bine.

Deci asta este grozav. Ce zici de acea imagine prezentată? Ceea ce am putea face este să scriem asta de la zero. Am putea să luăm adresa URL a imaginii prezentate și să avem o etichetă de imagine și să o transmitem ca URL. Și apoi browserul ar reda o imagine și o îndrepta către acea sursă.

Cu toate acestea, acest proiect, dacă săpați în această bază de coduri, are de fapt o componentă preconstruită exact în acest scop numită imagine prezentată. Deci pentru noi ar fi perfect pentru noi să-l folosim. Așa că voi derula puțin în sus până la locul în care importăm o grămadă de componente diferite din directorul nostru de componente. Și voi eticheta una la sfârșitul de aici numită imagine prezentată, exact așa. Așa că acum putem reda imaginea noastră prezentată oriunde dorim.

Chiar sub locul în care se află acest div cu descrierea fotografiei noastre, vom reda imaginea noastră prezentată. Și asta necesită o recuzită pentru imagine. Și ceea ce trebuie să transmitem aici este întregul nod pentru această imagine. Deci, pentru noi, acesta ar fi photo.feauredimage.node, exact așa. Și cred că asta ar trebui să facă șmecheria pentru imaginea noastră. Așa că o voi salva și, desigur, iată-ne. Deci, odată ce pagina noastră se reîncarcă aici, acum avem titlul nostru, descrierea noastră și apoi fotografia în sine fiind afișată. Și, de asemenea, și pentru următoarea noastră fotografie, acea imagine este afișată pe listă.

Deci asta e misto. Facem progrese mari. Ultimul lucru a fost să ne îngrijim de câmpul nostru repetabil pentru subiecții prezenți în fotografie. Deci ceea ce voi face este să creez un paragraf aici și să-l închid. Și apoi în interiorul acestei etichete de paragraf, putem deschide niște bucle și facem aceleași fotografii.subiecții. Dar acum vom aborda sfârșitul unirii. Și îi vom spune [INAUDIBLE] că vrem să îi alăturăm printr-o virgulă, spațiu, exact așa. Și îi voi acorda o salvare.

Când are loc reîncărcarea la cald, ar trebui să pot derula în jos. Și desigur, iată-ne. Deci sunt afișați pe listă. Este posibil ca utilizatorul să nu fie sigur care sunt acestea. Deci, poate, în aplicația noastră, putem apărea înapoi și adăuga o etichetă de un fel, un mic lucru anterior acolo care spune Subiecte, poate, așa. Subiecte floare, bokeh, ramură. Și apoi cealaltă fotografie a noastră de aici are subiecte munte, stele, umbre, doar pentru un exemplu.

Așa că ne vom opri aici, dar puteți vedea cât de repede am reușit să alcătuiesc această pagină. Bănuiesc că ar trebui să scăpăm de salutul nostru, lumea de deasupra. Nu prea avem nevoie de asta. Sau cuvânt salut. Așa că o voi elimina. Iată-ne. Așa că puteți vedea, așa cum spuneam, cât de repede am reușit să punem totul împreună.

Doar bazându-ne codul pe pagina cu lista de portofoliu, am putut să creăm pagina noastră cu lista de fotografii aici și apoi să mapam peste fiecare dintre fotografiile individuale și să accesăm câmpurile personalizate Atlas Content Modeler pentru aceasta – titlul, descrierea, imaginea, și apoi câmpurile noastre repetabile pentru subiectul de aici. Așa că mi-ar plăcea să vă simțiți împuterniciți de asta în propriile proiecte.

Dacă doriți să luați unul dintre proiectele noastre drept acest avans uriaș care poate duce la bun sfârșit proiectul dvs., o mare parte din munca depusă. Și apoi, de acolo, puteți face ceva similar cu ceea ce am făcut noi în această discuție. Puteți să-l personalizați în continuare și să adăugați propriile personalizări și alte modele de conținut și așa mai departe.

Mulțumesc mult pentru vizionare. Sper că această discuție a fost cu adevărat utilă și v-a dat o idee bună asupra tuturor caracteristicilor extraordinare care au apărut și vor continua să apară în ecosistemul Atlas.

PREZENTATOR: Și aceasta este o încheiere pentru DE{CODE} 2022. Sper că v-a părut inspirat și că plecați cu mai multă expertiză WordPress și noi conexiuni cu comunitatea. Uitați-vă la conținutul înregistrat pe site de vineri pentru a ajunge din urmă cu orice ați ratat sau vizionați din nou un videoclip.

Vreau să le mulțumesc final partenerilor noștri sponsori: Amsive Digital, Box UK, Candyspace, Drewl, Elementary Digital, Illustrate Digital, Kanopi Studios, Springbox, Studio Malt, StrategiQ, WebDevStudios și 10Up. Vă mulțumim enorm pentru donația pentru strângerea de fonduri DE{CODE}. Apreciem cu adevărat generozitatea dumneavoastră.

Acum, pentru toți cei care au interacționat cu noi în centrul nostru de participanți și sesiunile noastre, vom alege primii trei câștigători și vă vom anunța cum vă puteți revendica premiul la sfârșitul DE{CODE}. Vă așteptăm cu nerăbdare să vă revedem la evenimentele noastre viitoare, fie personal, fie virtual. Abia așteptăm să vă aducem mai multe despre cele mai recente tendințe de dezvoltare WordPress și despre cum le puteți implementa pentru a construi site-uri WordPress mai rapid.

Asta e tot de la mine. Vă mulțumim foarte mult că ne-ați alăturat și aveți grijă.