Johdanto
SisäänOsa 5, lisäsit kaikki blogitekstisi blogisivullesi. Mutta se tarkoittaa, että blogisivusi pidentyy jatkuvasti, kun lisäät sivustollesi lisää viestejä. Olisi parempi, jos jokainen viesti asuisi omalla sivullaan, jolloin blogisivusi voisi linkittää kaikkiin eri viesteihin.
Toistaiseksi tapa, jolla olet luonut uusia sivuja Gatsby-sivustollesi, on luomalla uusi tiedostosrc/pageshakemistoon ja koodata sivun sisältö JSX:ssä. Mutta uuden sivun luominen manuaalisesti jokaiselle viestille olisi melko toistuvaa, varsinkin kun jokaisella sivulla on sama rakenne: renderöi MDX-tiedoston etupuoli ja sisältö.
Tässä opetusohjelman osassa opit luomaan uusia sivuja dynaamisesti Gatsbyn Filesystem Route API:n avulla.
Tämän opetusohjelman osan loppuun mennessä pystyt:
- Käytä Gatsbyn Filesystem Route API:ta luodaksesi dynaamisesti uusia sivuja blogikirjoituksillesi.
- Renderöi jokaisen blogikirjoituksen sisältö.
- Lisää kyselymuuttuja sivukyselyyn.
Pidätkö videosta?
Jos haluat mieluummin seurata videota, tässä on tallenne suorasta lähetyksestä, joka kattaa kaiken osan 6 materiaalin.Huomaa:Vanhempaa versiota tallennettaessagatsby-plugin-mdxon käytetty, joten videon sisältö ja tekstisisältö ovat erilaisia. Noudata aina kirjallisia ohjeita. Teemme parhaamme äänittääksemme uuden version tulevaisuudessa, kiitos ymmärryksestä!
Huomautus: Osa tästä tallenteesta saattaa olla hieman vanhentunutta, mutta käsitteet ovat yleisesti sovellettavia. Saat ajantasaisimmat tiedot seuraamalla kirjallista opetusohjelmaa.
Etkö halua missata tulevia livelähetyksiä? Seuraa meidänGatsby Twitch -kanava.
Luo uusia reittejä dynaamisesti Gatsbyn File System Route API:lla
Kun rakennat Gatsby-sivustosi, Gatsby luo uuden reitin jokaiselle sivusi osallesrc/pageshakemistosta. Toistaiseksi olet rakentanut vain yhden sivun tiedostoa kohden: theindex.jstiedosto luo kotisivunabout.jstiedosto luo Tietoja-sivun jablog.jstiedosto luo blogisivun.
Mutta voit myös käyttää yhtä sivukomponenttia useiden sivujen luomiseen. Sen sijaan, että koodaat kaiken sisällön, luot mallin, joka hahmottelee sivusi perusrakenteen, ja sitten Gatsby voi lisätä dynaamisesti kunkin sivun tietyt tiedot rakennusvaiheessa. Voit tehdä sen käyttämällä GatsbyäTiedostojärjestelmän reittisovellusliittymä, jonka avulla voit luoda reittejä dynaamisesti nimeämällä sivutiedostot erityisellä syntaksilla.
Keskeinen Gatsby-konsepti: File System Route API
GatsbynTiedostojärjestelmän reittisovellusliittymämäärittää erityisen syntaksin tiedostojen nimeämisellesrc/pageshakemistoon, jonka avulla voit luoda dynaamisesti uusia sivuja sivustollesi akokoelmatietokerroksen solmuista.
Kuvittele esimerkiksi, että sivustollasi on paljonTuotesolmut tietokerroksessa. Voit käyttää File System Route API:ta yhden tuotesivumallikomponentin luomiseen. Sitten, kun rakensit sivustosi, Gatsby yhdisti kyseisen sivumallin kunkin tiedotTuotesolmu ja luo uusi sivu jokaiselle tuotteelle. Ja jos päätit tehdä muutoksia tuotesivullesi, sinun tarvitsee vain muokata mallikomponenttia, ja Gatsby päivittää kaikki tuotesivusi seuraavan kerran, kun se rakentaa sivuston uudelleen.
Keräysreitin luominen:
- Päätä, minkä tyyppisestä solmusta haluat luoda sivuja.
- Valitse, mitä kyseisen solmun kenttää käytetään sivujesi reitissä (URL-osoite).
- Luo uusi sivukomponentti omaan
src/pageshakemistoon seuraavalla nimeämiskäytännöllä:{nodeType.field}.js.- Älä unohda sisällyttää kiharat henkselit (
{}) tiedostonimessäsi osoittamaan reitin dynaamista osaa!
- Älä unohda sisällyttää kiharat henkselit (
Jos esimerkiksi haluat luoda erillisen sivun jokaiselleTuotesolmu, ja halusit käyttää tuotettanimiURL-kentässä, luot uuden tiedoston osoitteessasrc/pages/{Tuote.nimi}.js. Sitten Gatsby loisi nuo sivut esim. reiteillä/vesipullo/tai/huppari/tai/muistikirja/.
Tässä opetusohjelman osassa käytät Gatsbyn tiedostojärjestelmän reittisovellusliittymää luodaksesi dynaamisesti uusia sivuja jokaiselle blogiviestillesi.
API:n mukaan sinun on päätettävä kahdesta asiasta ennen keräilyreitin luomista:
- Mikätyyppisolmun sivujen luomiseen.
- Mikäalakyseisestä solmutyypistä käytettäväksi URL-osoitteessa.
Koska blogikirjoituksesi on kirjoitettu MDX:llä, käytät MDX:tä solmutyyppinä sivujen luomiseen. Mutta mitä kenttää MDX-solmuissa sinun tulisi käyttää?
Olet jo lisännyt tarvitsemasi tiedot frontmatteriisi. Jos tarkistat.mdxtiedostoja, jotka loit tämän opetusohjelman viimeisessä osassa, näet, että niiden etupuolella on aetanaala. Jos suoritat seuraavan kyselyn:
…sinun pitäisi saada takaisin jotain alla olevan tuloksen kaltaista:
Se näyttää hyvältä URL-muodolta!
Huomautus:Tässä tapauksessaetana-kenttä on hyvä valinta, koska se on ihmisten luettavissa, mikä tarkoittaa, että blogiviestiesi URL-osoitteet ovat käyttäjien helpompia ymmärtää. Mutta voit käyttää mitä tahansa kenttää reiteilläsi, vaikka se sisältäisi erikoismerkkejä tai välilyöntejä, kuten Gatsby tekee"hiljaa"jokaisella reitillä käytettäessä File System Route API:ta. Esimerkiksi,Minä ♥ koiratmuunnetaan muotoonminä rakastan koiria.
Tehtävä: Luo blogitekstisivumalli
Nyt kun tiedät käytettävän solmun tyypin ja kentän, voit liittää ne tiedostojärjestelmän reittien nimeämiskäytäntöön. Uusien sivujen luominen kohteestaetanaMDX-solmujen kenttään, sinun tulee tehdä uusi tiedosto osoitteessasrc/pages/{mdx.frontmatter__slug}.js.
Alla oleva kaavio näyttää eri reitit, jotka Gatsby luo rakentaessaan sivustoasi:
Laajenna saadaksesi yksityiskohtaisen kuvauksen
Kun luot sivustoasi, Gatsby tarkastelee sivusi komponenttejasrc/pageshakemistoon ja luo uusia sivuja sivustollesi.
src/pages/index.jsasuu osoitteessa/reitti.src/pages/blog.jsasuu osoitteessa/blogi/reitti.src/pages/{mdx.frontmatter__slug}.jsmuuttuu useiksi reiteiksi - yksi jokaiselle tietokerroksen MDX-solmulle.- Gatsby käyttää MDX-solmua slugin kanssa
minun ensimmäinen viestirakentaa sivu, joka elää osoitteessa/minun-ensimmäinen-postaukseni/reitti. - Gatsby käyttää MDX-solmua slugin kanssa
toinen postausrakentaa sivu, joka elää osoitteessa/toinen viesti/reitti. - Gatsby käyttää MDX-solmua slugin kanssa
vielä-toinen-postausrakentaa sivu, joka elää osoitteessa/jälleen-toinen-postaus/reitti.
- Gatsby käyttää MDX-solmua slugin kanssa
Luo uusi tiedosto omaan
src/pageshakemistosta kutsuttu{mdx.frontmatter__slug}.js. Tämä on tiedosto blogitekstisivusi mallille.Luo perussivukomponentti uudessa
{mdx.frontmatter__slug}.jstiedosto. Lisää toistaiseksiLayoutkomponenttia, mutta koodaa sivun otsikko ja sisältö. (Teet niistä dynaamisia myöhemmin.)Siirry verkkoselaimessa osoitteeseen
localhost:8000/ensimmäinen viesti/ja sinun pitäisi nähdä kovakoodattu sisältösi. Voit päivittää URL-osoitteesi muiden viestiesi etanoilla varmistaaksesi, että myös niille on luotu identtiset sivut.
Provinkki:Etkö ole varma, mitkä sivut luotiin? Katso 404-sivu, kun juoksetgatsby kehittää. (Pääset siihen yrittämällä käyttää sellaisen sivun URL-osoitetta, jota ei ole olemassa.) Sivun alareunassa on lueteltu kaikkien Gatsbyn sivustollesi luomien sivujen reitit.
(Jos teet muutoksia reitteihisi, sinun on pysäytettävä ja käynnistettävä paikallinen kehityspalvelin uudelleen, jotta 404-sivun sivuluettelo päivittyy.)
Tehtävä: Päivitä reitti sisällyttääksesi a/blogipolkuparametri
Tähän mennessä kaikki sivusi on luotu sivustosi pääverkkotunnuksen ulkopuolella (localhost: 8000). Mutta olisi parempi (sekä hakukoneoptimoinnin että yleisen organisoinnin kannalta), jos ryhmittelet kaikki blogiviestisi/blogipolkuparametri. Tällä tavalla kaikkien blogiviestiesi URL-osoitteet alkaisivatlocalhost:8000/blogi/.
Koska Gatsby rakentaa sivureitit kansiorakenteen perusteellasrc/pageshakemistoon, voit lisätä sivulle uusia polkuparametreja luomalla alihakemistoja sen sisäänsrc/pages.
Seuraava kaavio näyttää yleiskatsauksen päivityksistä, jotka sinun on tehtävä, jotta voit lisätä a/blogipolkuparametria blogiviestiesi reitteihin. Prosessi on myös kuvattu yksityiskohtaisemmin alla.
Luo uusi kansio omaan
src/pageshakemistoon ja soita siihenblogi.Siirrä
src/pages/{mdx.frontmatter__slug}.jstiedosto uuteenblogialihakemistosta. Päivitä omasi tuontiLayoutjaSeokomponentti, joka vastaa uutta kansiorakennetta:Kun paikallinen kehityspalvelimesi on rakentanut sivustosi uudelleen, tarkista verkkoselaimesta, että blogitekstiesi polut on päivitetty.
- Sinulla pitäisi nyt olla esimerkiksi sivu osoitteessa
localhost:8000/blog/my-first-post/ja yrittää päästälocalhost:8000/ensimmäinen viesti/(ilmanblogipolkuparametri) lähettää sinut 404-sivulle.
- Sinulla pitäisi nyt olla esimerkiksi sivu osoitteessa
Provinkki:Gatsby tallentaa tietoja sivustostasi välimuistiin sitä rakentaessaan, jotta myöhemmät koontiversiot olisivat nopeampia. Mutta joskus, kun teet muutoksia sivustoosi, sinun on tyhjennettävä välimuisti, jotta muutokset tulevat näkyviin.
Jos näet odottamatonta toimintaa (kuten ehkä paikallinen kehityspalvelimesi ei ota vastaan uusia muutoksiasi), voit suorittaagatsby puhdaskomentoriviltä poistaaksesi välimuistin ja aloittaaksesi uuden koontiversion.
Eikö Gatsby CLI:tä ole asennettu maailmanlaajuisesti? Kokeile juostanpx gatsby puhdassen sijaan.
Järjestämisen kannalta olisi mukavaa pitää kaikki blogiin liittyvät sivusi yhdessä. Siirrä
src/pages/blog.jstiedosto uuteensrc/pages/blogmyös hakemistosta.Nimeä tiedosto uudelleen
blog.jstoindex.js. (Muuten blogisivusi siirtyy osoitteeseenlocalhost:8000/blog/blog/).Sinun on myös päivitettävä tuonti
Layoutkomponentti, joka vastaa uutta kansiorakennetta:Sinun on ehkä pysäytettävä ja käynnistettävä paikallinen kehityspalvelin uudelleen, jotta muutokset otetaan vastaan.
Tarkista verkkoselaimessa, että blogisivusi näkyy edelleen osoitteessa
localhost:8000/blogi/.
Hyvää työtä! Olet nyt käyttänyt Gatsbyn tiedostojärjestelmän reittisovellusliittymää sivujen luomiseen tietokerroksen solmuista.
Renderöi viestin sisältö blogitekstisivumallissa
Nyt kun olet määrittänyt kaikki sivut julkaisujasi varten, on aika vetää sisään viestien varsinainen sisältö. Opit sisäänOsa 4että voit vetää tietoja komponentteihisi GraphQL-kyselyillä. Mutta kuinka voit kertoa Gatsbylle, mikä tietokerroksen MDX-solmu vetää kullekin sivulle? Tätä varten sinun on opittava toisesta tärkeästä GraphQL-konseptista:kyselymuuttujat.
Key GraphQL -konsepti: Kyselymuuttujat
GraphQL:ssä kyselymuuttujat ovat tapa lähettää lisätietoa pyyntösi mukana. Kyselymuuttujien avulla voit kirjoittaa dynaamisia kyselyitä, jotka palauttavat erilaisia tietoja välittämiesi arvojen perusteella.
Katsotaanpa esimerkkiä GraphiQL:ssä. SisäänOsa 5, opit argumenttien välittämisestä kenttiin, jotta voit muuttaa vastauksessa palautettuja tietoja. Voit esimerkiksi käyttää alla olevaa kyselyä pyytääksesi tietoja MDX-solmulta, jossa on aetanakenttä yhtä suuri kuin"toinen viesti":
…joka palauttaisi seuraavan vastauksen:
Tässä tapauksessa sinunetanaarvo on koodattu GraphQL-kyselyäsi. Mutta mitä tapahtuu, jos haluat vaihtaa eri arvon eri sivulla? Siellä kyselymuuttujat tulevat sisään.
GraphiQL:ssä on kokoontaitettava "Kyselymuuttujat" -osio Kyselyeditori-ruudun alaosassa. Jos napsautat sitä, näkyviin tulee uusi tekstialue, johon voit lisätä avainarvopareja tiedoille, jotka haluat välittää kyselyyn. Nämä avain-arvo-parit tulee kirjoittaa JSON-muodossa. Jos esimerkiksi lisäät alla olevan objektin Kyselymuuttujat -osioon, pyyntösi välittää kyselymuuttujan nimeltäetanajonka arvo ontoinen postaus:
Voit käyttää kyselymuuttujaa kyselyssäsi seuraavasti:
- Määritä kyselymuuttujasi.Sen tulee sisältää muuttujan nimi (a
$sen edessä) ja sen GraphQL-tietotyyppi. - Käytä kyselyssäsi kyselymuuttujaa.(Sinun on lisättävä a
$ennen muuttujan nimeä.)
Esimerkiksi näin voit päivittää edellisen kyselyn käyttämään kyselymuuttujia kenttäargumentin sijaan:
Tämän uuden kyselyn suorittamisen pitäisi palauttaa sama vastaus kuin edellinen ilman kyselymuuttujia. Mutta nyt voit vaihtaa arvonetanamuuttuja, jolla on eri arvo, kuten"ensimmäinen viestini", ja vastauksesi lähettää takaisin oikean solmun.
Alla oleva kaavio näyttää, kuinka kysely, kyselymuuttujat ja vastaus sopivat yhteen GraphiQL-käyttöliittymässä:
Huomautus:Gatsbyssä kyselymuuttujat voivatvainkäyttää sivukyselyissä. (Et voi käyttää niitä kanssakäytä StaticQueryäkoukku.)
Kun käytät Gatsbyn File System Route API -sovellusliittymää, se lisää automaattisesti joitain rekvisiitta kunkin sivun sivumallikomponenttiin:
- The
idsivun luomiseen käytetylle tietokerroksen solmulle. - Kenttä, jota käytit reitin dynaamisen osan luomiseen. (Tässä tapauksessa
frontmatter__slugala.)
Kotelon alla Gatsby tarjoaa molemmat arvot käytettäviksi kyselymuuttujina sivukyselyissäsi.
Haluatko katsoa tarkemmin?
- Lisää
console.loglausunto tulostettavaksirekvisiittasinunBlogipostaussivukomponentti sisäänsrc/pages/blog/{mdx.frontmatter__slug}.js. - Siirry verkkoselaimessa osoitteeseen
localhost:8000/blog/my-first-post/ja avaa kehittäjätyökalut. Konsoli-välilehdellä sinun pitäisi nähdä alla olevan kaltainen objekti:
Avaimetsivukontekstiobjekti lisätään, kun luot sivun File System Route API:lla. Nämä ovat myös avaimia, joita voit käyttää kyselymuuttujina blogikirjoitussivumallin sivukyselyssäsi.
- Aloita käyttämällä GraphiQL:ää luodaksesi sivukyselyn blogitekstisivumallillesi.
- Koska jokainen sivu tarvitsee tietoja vain yhdelle MDX-solmulle, käytä
mdxala. - Nopein tapa etsiä solmuja on käyttää
idkenttä, joten käytäidkyselymuuttuja sijaanfrontmatter__slug.
- Koska jokainen sivu tarvitsee tietoja vain yhdelle MDX-solmulle, käytä
Kärki:Jos haluat testata kyselyäsi GraphiQL:ssä, sinun on lisättäväidavain Kyselymuuttujat -osioon. Voit kopioida yhden niistäidarvot suorittamisesta anallMdxkysely GraphiQL:ssä.
Kyselymuuttujat -osiossa olevan JSON-objektin pitäisi näyttää suunnilleen alla olevan kaltaiselta. (Sinun on käytettävä omaaid, koska alla olevan kopioiminen ei toimi.):
Lisää sivukyselysi blogitekstisivumalliin.
- Älä unohda tuoda
graphqltag! - Sinun tulee myös poistaa kyselyn nimi
MyQuery(et saa tässä tapauksessa määrittää nimeä, jotta MDX ja sivunluonti toimivat oikein).
- Älä unohda tuoda
SisäänOsa 4, opit, että Gatsby välittää sivukyselysi tulokset sivukomponenttiin a
tiedotprop. Se myös menee ohitiedotGatsby Head API:lle. Voit päivittääBlogipostauskäytettävä komponenttitiedottue ja renderöi blogikirjoituksesi sisältö. Varsinainen MDX-sisältö, joka on valmis hahmonnettavaksi, välitetään alapsettuki sivukomponenttiin.Siirry verkkoselaimella jollekin blogitekstisivuistasi (esim
localhost:8000/blog/my-first-post/). Sinun pitäisi nähdä blogikirjoituksesi sisältö renderoituna heidän omalla sivullaan!- Yritä tarkistaa muiden viestiesi reitit varmistaaksesi, että kaikki sivusi hahmontavat viestin sisällön oikein.
Päivitä blogisivu linkittääksesi jokaiseen viestiin
Tähän mennessä olet käyttänyt File System Route API- ja GraphQL-kyselymuuttujia luodaksesi erilliset sivut kullekin blogiviestillesi.
Osan 6 viimeinen vaihe on blogisivusi puhdistaminen. Sen sijaan, että esittäisit vain otteen blogikirjoituksistasi, Blogi-sivun tulisi linkittää juuri luomillesi uusille viestisivuille.
Lisää
etanakenttään sivukyselyäsi ja muuttaa sen otsikon avulla linkki viestisivulle.- Koska nämä linkit ovat oman sivustosi sivujen välillä, voit käyttää Gatsbyn sivuja
Linkkikomponentti saadaksesi ylimääräisiä suorituskykyetuja. - Jos käytät absoluuttisia URL-osoitteita, sinun on lisättävä ylimääräinen
/blogi/polkuparametri, koskaetanakenttä sisältää vain polun viimeisen osan (esimminun ensimmäinen viesti).
- Koska nämä linkit ovat oman sivustosi sivujen välillä, voit käyttää Gatsbyn sivuja
Siirry verkkoselaimessa osoitteeseen
localhost:8000/blogi/. Blogisivusi pitäisi nyt näyttää linkit jokaiselle blogitekstisivullesi.
Onnittelut, sinulla on nyt monisivuinen blogisivusto! Yritä lisätä uusia.mdxtiedostot huipputasolleblogihakemistosta. Ne pitäisi lisätä blogisivullesi automaattisesti, kun sivustosi rakennetaan uudelleen!
Haluatko nähdä, kuinka se kaikki sopii yhteen?Tarkista valmiin tilanGitHub-repo esimerkkisivustolle.
Yhteenveto
Mieti hetki, mitä olet tähän mennessä oppinut. Haasta itsesi vastaamaan muistista seuraaviin kysymyksiin:
- Mihin File System Route API:ta käytetään?
- Mikä on syntaksi uuden kokoelmareitin luomiseen?
- Mikä on kyselymuuttuja?
- Milloin voit käyttää kyselymuuttujaa?
Lähetä se!🚀
Ennen kuin jatkat, ota muutokset käyttöön Gatsby Cloud -sivustollasi, jotta voit jakaa edistymisesi!
Suorita ensin seuraavat komennot päätteessä siirtääksesi muutokset GitHub-tietovarastoon. (Varmista, että olet Gatsby-sivustosi ylätason hakemistossa!)
Kun muutokset on siirretty GitHubiin, Gatsby Cloudin pitäisi huomata päivitys ja rakentaa uudelleen ja ottaa käyttöön sivustosi uusin versio. (Voi kestää muutaman minuutin, ennen kuin muutokset näkyvät live-sivustolla. Seuraa koontiversiosi edistymistäGatsby Cloud -hallintapaneeli.)
Keskeiset takeawayt
- Gatsbyn File System Route API:n avulla voit luoda dynaamisesti uusia sivuja tietokerroksen solmuista nimeämällä tiedostosi erityisellä syntaksilla.
- Tiedostojärjestelmän reitit toimivat vain tiedostoissa
src/pageshakemistoon (tai alihakemistoihin). - Luo uusi kokoelmareitti antamalla tiedostolle nimi
{nodeType.field}.js, missäsolmutyyppion solmun tyyppi, josta haluat luoda sivuja, jaalaon kyseisen solmutyypin tietokenttä, jota haluat käyttää kyseisen sivun URL-osoitteessa.
- Tiedostojärjestelmän reitit toimivat vain tiedostoissa
- Kyselymuuttujien avulla voit välittää eri data-arvoja samalle GraphQL-kyselylle. Ne voidaan yhdistää kenttäargumentteihin saadakseen takaisin tietoja vain tietystä solmusta.
- Kyselymuuttujia voidaan käyttää vain sivukyselyissä.
Jaa palautettasi!
Tavoitteemme on, että tämä opetusohjelma on hyödyllinen ja helppo seurata. Haluaisimme kuulla palautetta siitä, mistä pidit tai et pitänyt tässä opetusohjelman osassa.
Käytä "Auttoiko tämä asiakirja sinulle?" Tämän sivun alareunassa olevalla lomakkeella kerromme meille, mikä toimi hyvin ja mitä voimme parantaa.
Mitä on tulossa seuraavaksi?
Osassa 7 palaat uudelleengatsby-plugin-image(takaisin sisäänOsa 3). Tällä kertaa opit luomaan dynaamisia kuvia käyttämälläGatsbyImagekomponentti. Viimeistelet blogisivustoasi lisäämällä sankarikuvia blogikirjoituksiisi.