Introduzione

Nel precedente articolo abbiamo creato la struttura del nostro blog. È molto scarno: ha una sola pagina, ovvero la home page, il cui contenuto comprende solo testo.

In questo articolo vedremo come aggiungere pagine, anche con immagini e collegamenti, e come navigare tra di esse.

Creazione di pagine

Gatsby offre più modalità per la creazione di pagine. In questa circostanza, vedremo due possibilità:

• manualmente, ovvero tramite la creazione di un componente React (lo vedremo in questo articolo);
• attraverso l'automatismo offerto dalla API createPages (sarà oggetto di un prossimo articolo).

Aggiunta di una pagina con processo manuale

È sufficiente creare un componente React all'interno della directory src/pages. Qui troviamo già il primo , e per ora unico, componente corrispondente all'unica pagina del nostro blog, index.js.

Creiamo un file e lo chiamiamo about.js in cui andremo a mettere i nostri dati (nome, cognome, professione) insieme alle informazioni di contatto (e-mail, siti web):

All'interno del file about.js copiamo il codice che definisce il componente About:

import * as React from "react"

const About = () => (
    <div>
        <h1>Mi chiamo Fabio Moschini e sono un programmatore.</h1>
        <p>Puoi inviarmi una e-mail a questo indirizzo:
            <a href="mailto:info@moschini.cloud">
                info@moschini.cloud
            </a>
        </p>
    </div>
)

export default About

Facciamo partire il server di sviluppo con il comando:

    gatsby develop

e navighiamo all'indirizzo:

    localhost:8000/about

La pagina visualizzata è:

     gatsby clean

     gatsby develop

Allo stato attuale, la pagina About può essere raggiunta solo attraverso l'url completo.

Per avere la navigazione tra la home page (index.js) e la pagina di about (about.js), inseriamo un link tra le due pagine.

Gatsby mette a disposizione un componente nativo (Link) per la navigazione tra le pagine del sito (navigazione interna). Questo componente deve essere utilizzato solo per la navigazione delle pagine interne al sito. Per collegamenti a URL esterni, si deve utilizzare il consueto tag <a>.

Per utilizzare il componente Link, nel file index.js inseriamo queste linee di codice:

    import React from "react"
    import { graphql } from "gatsby"
    import { Link } from 'gatsby'

    export default function Home({ data }) {
      const { title, description, author } = data.site.siteMetadata

      return (
        <div>
          <h1>{title}</h1>
          <p>{description}</p>
          <p>{author}</p>
          <Link to="about">About</Link>
        </div>
      )
    }

    export const pageQuery = graphql`
      query MetadataQuery {
        site {
          siteMetadata {
            title
            description
            author
          }
        }
      }
    `

Le linee aggiunte sono quella per l'import del componente Link e quella con cui definiamo il collegamento con la pagina di About.

Aggiunta di immagini

Arricchiamo la pagina di About con un'immagine, ad esempio quella scaricabile da questo link.

Dopo aver scaricato l'immagine, la rinominiamo in "notebook.jpg", creiamo la directory static nella root del nostro sito (allo stesso livello della directory src), creiamo la subdirectory images dentro static e, infine, copiamo l'immagine scaricata nella directory /static/images/:

Modifichiamo il file about.js e aggiungiamo il codice per includere l'immagine utilizzando il tag <img>:

    const About = () => (
        <div>
            <h1>Mi chiamo Fabio Moschini e sono un programmatore.</h1>
            <p>Puoi inviarmi una e-mail a questo indirizzo:
                <a href="mailto:info@moschini.cloud">
                    info@moschini.cloud
                </a>
            </p>
            <img src="/images/notebook.jpg"></img>
        </div>
    )

Questa è la nuova pagina di about:

Se provate a ridimensionare la finestra del browser, vedrete che l'immagine non varia le proprie dimensioni.

    import image from "../../static/images/notebook.jpg"
    ...
    <img src={image}></img>

Per una migliore gestione delle immagini in Gatsby, possiamo utilizzare il componente StaticImage messo a disposizione dal plugin gatsby-plugin-image. Questo componente permette di caricare le immagini in modalità "lazy"; inoltre, le immagini più grandi sono ridimensionate in automatico.

Per poter utilizzare questo componente, è necessario installare il plugin gatsby-plugin-image. Questo plugin genera più versioni della stessa immagine da utilizzare in differenti scenari o dispositivi.

Vediamo gli step che servono per utilizzare questo componente:

• creiamo la directory images dentro la directory src: in questa directory ci saranno tutte le immagini che vogliamo gestire con il plugin gatsby-plugin-image
• installiamo il plugin gatsby-plugin-image con il comando:

      npm install --save gatsby-transformer-sharp gatsby-plugin-sharp gatsby-source-filesystem gatsby-plugin-image

• configuriamo il plugin: nel file gatsby-config.js, aggiornando il contenuto della sezione plugins con:

      module.exports = {
        plugins: [
          {
            resolve: "gatsby-source-filesystem",
            options: {
              "name": "images",
              "path": "./src/images/"
            },
          },
          "gatsby-plugin-sharp",
          "gatsby-transformer-sharp",
          "gatsby-plugin-image",
        ],
      };

• verificare che nel file package.json ci siano le dipendenze per questi plugin, ovvero nella sezione dependencies devono essere presenti questi moduli:
  • "gatsby-plugin-image": "^2.10.1",
  • "gatsby-plugin-sharp": "^4.10.2",
  • "gatsby-source-filesystem": "^4.10.1",
  • "gatsby-transformer-sharp": "^4.10.0",

A questo punto, possiamo utilizzare il componente StaticImage all'interno della pagina di About. Per fare ciò, aggiorniamo il contenuto del file about.js con questo codice:

    import * as React from "react"
    import { StaticImage } from "gatsby-plugin-image"

    const About = () => (
        <div>
            <h1>Mi chiamo Fabio Moschini e sono un programmatore.</h1>
            <p>Puoi inviarmi una e-mail a questo indirizzo:
                <a href="mailto:info@moschini.cloud">
                    info@moschini.cloud
                </a>
            </p>

            <StaticImage
                layout="fullWidth"
                alt="notebook"
                src="../images/notebook.jpg"
            />
        </div>
    )

    export default About

Anche in questo caso, come già abbiamo visto per il componente Link, le linee aggiunte sono quella per l'import del componente StaticImage e quella con cui definiamo le proprietà dell'immagine tramite il tag <StaticImage>. Nell'esempio, l'immagine del notebook viene visualizzata in modo da occupare in larghezza tutta l'area disponibile nella finestra del browser ma, a differenza del tag <img> visto prima, l'immagine è responsive, ovvero viene ridotta o ingrandita con il ridimensionamento della finestra del browser: