Crear un sitio Gatsby con datos de WordPress
En mi artículo anterior de la semana pasada, mencioné la creación de un sitio WordPress-Gatsby parcialmente adaptado . Este artículo es una continuación con un tutorial paso a paso.
Gatsby , un marco basado en React para sitios estáticos, está atrayendo la atención no sólo de los desarrolladores de JavaScript sino también de los desarrolladores y usuarios de WordPress. Muchos usuarios de WordPress encuentran atractivas sus características, como el manejo de imágenes ultrarrápido y la protección de seguridad mejorada contra los piratas informáticos, pero les gustaría usarlas mientras continúan usando el administrador y editor de WordPress para administrar el contenido.
Chris ha cubierto la idea de combinar Gatsby y WordPress antes aquí en CSS-Tricks. Como entusiasta de WordPress, decidí probarlo. Este artículo se basa en lo que aprendí y documenté a lo largo del camino.
Tenga en cuenta que WPGraphQL y gatsby-cli están en constante desarrollo con cambios importantes en versiones posteriores. Este proyecto se realizó utilizando WPGraphQL 0.8.3 , gatsby-source-wpgraphql 2.5.1 y gatsby-cli 2.12.21. A diferencia de WordPress, las versiones más recientes de WPGraphQL no admiten compatibilidad con versiones anteriores. Consulte el documento oficial de WPGraphQL Gatsby para conocer los últimos cambios y proceda con precaución antes de usarlo.
Hay proyectos listos para usar en la biblioteca de inicio de Gatsby. Dos grandes ejemplos son el blog gatsby-wordpress-theme-blog de Alexandra Spalato y el tema veintinueve-gatsby de Zac Gordon y Muhammad Muhsin.
Requisitos previos
Si desea seguir adelante, esto es lo que necesitará:
- Conocimiento básico de React y JavaScript. Aquí encontrará guías de introducción a React y JavaScript.
- Comprensión básica de Gatsby y cómo se crean páginas dinámicas. Aquí hay un enlace a una excelente guía tutorial paso a paso para aprender Gatsby.
- Familiaridad con WordPress y una instalación funcional. Aquí encontrará guías que le ayudarán a empezar.
Activos y recursos
Como ya había realizado algunos proyectos de aprendizaje de Gatsby en el pasado, tenía algunos recursos como tipografía, diseños y otros componentes reutilizables que podía aplicar aquí. También revisé las siguientes guías tutoriales recientes, que me ayudaron a prepararme para este proyecto.
- Descripción general: guía de Gatsby WordPress Starter Advanced con vistas previas, i18n y más por Henrik Wirth
- Migre su sitio de WordPress a Jamstack por Jason Lenstorf
- Portando el tema de WordPress Twenty Nineteen a Gatsby por Muhammad Muhsin
La guía de Henrick Wirth es muy comprensiva y exhaustiva. El artículo paso a paso de Jason es un gran recurso e incluso incluye videos muy útiles que ayudan a ver cómo se lleva a cabo el proceso. El artículo de Muhammad ayuda a explicar cómo se crean las páginas estáticas con la API createPages de Gatsby y desglosa varias funciones, archivos de plantilla y componentes de React a lo largo del camino.
Seguí en gran medida la guía de Henrik y dividí este artículo en secciones similares. La guía de Henrik incluye el manejo de imágenes y la adición de funciones de PageBuilder con contenido flexible ACF que no abordamos aquí.
Secciones del artículo:
- Configurando WordPress y Gatsby
- Portar publicaciones y páginas desde WordPress
- Trabajar con la navegación
- Mostrar publicaciones de blog en Gatsby
- Estilo e implementación
Sección 1: Configuración de WordPress y Gatsby
Primero, configuremos un sitio de WordPress para una fuente de datos. Este podría ser un sitio ya existente o uno nuevo. Incluso una instalación local de WordPress está bien. Decidí comenzar con un nuevo sitio de prueba de WordPress para este proyecto utilizando el tema Twenty Twenty que viene con WordPress.
Instale los complementos WPGraphQL y WPGraphiQL
Comencemos instalando un par de complementos en WordPress. Usaremos WPGraphQL para habilitar la API GraphQL en WordPress y abrir WordPress como fuente de datos. También usaremos WPGraphiQL (tenga en cuenta la "i" en el nombre). En realidad, este es opcional, pero crea una interfaz para probar consultas GraphQL directamente en el panel de WordPress, lo cual es muy útil. Puede notar que estoy vinculando los repositorios de GitHub para los complementos en lugar del Directorio de complementos de WordPress y eso es intencional: ninguno de los complementos está disponible en el directorio al momento de escribir este artículo. Como tal, descargará los archivos ZIP y los instalará manualmente en WordPress a través del /wp-content/pluginsdirectorio.
Una vez activada, la API GraphiQL se muestra en el panel de WordPress.
La GraphiQLAPI proporciona un campo de juego para probar GraphQLconsultas desde el sitio de WordPress.
Configurar un sitio local de Gatsby
Configuraremos un sitio local de Gatsby instalando el iniciador predeterminado de Gatsby en el wordpress-gatsbydirectorio del proyecto con esto en la línea de comando:
#! create a new Gatsby site using the default startergatsby new wordpress-gatsby https://github.com/gatsbyjs/gatsby-starter-defaultReinicie el servidor con gatsby develop, luego naveguemos hasta localhost:8000una nueva pestaña del navegador. Deberíamos obtener una página de inicio en el navegador.
Un enlace sobre cómo crear un sitio Gatsby localmente está disponible en la documentación de Gatsby.
A continuación, instalaremos y configuraremos el complemento gatsby-source-graphql. Tal como lo hicimos al configurar WordPress, tenemos que instalarlo y configurarlo WPGraphQLen el sitio de Gatsby.
#! install wpgraphql plugin#! add with yarnyarn add gatsby-source-graphql#! install with npmnpm install --save gatsby-source-graphqlBien, ahora es el momento de configurar el complemento gatsby-source-graphql. Abra el gatsby-config.jsarchivo y usemos esta configuración:
// plugin configurationmodule.exports = { plugins: [ { resolve: "gatsby-source-graphql", options: { typeName: "WPGraphQL", fieldName: "wpcontent", // GraphQL endpoint, relative to your WordPress home URL. url: "https://tinjurewp.com/wp-gatsby/graphql", // GraphQL endpoint using env variable // url: "${process.env.WORDPRESS_URL}/graphql", }, }, ],} ¿Cómo se me ocurrió esta configuración exacta? Seguí estrictamente lo que se describe en los documentos de Gatsby . El complemento se agregó a la instancia de Gatsby especificando la URL del punto final GraphQL (resaltado arriba) y dos opciones de configuración: typeName, un tipo de consulta de esquema remoto y fieldName, que está disponible en la consulta de Gatsby. Tenga en cuenta que el último documento de WPGraphQL sugiere usar fieldName: "wpcontent"en lugar de "wpgraphql"como se describe en la guía.
Configuración alternativa: use el módulo dotenv
Opcionalmente, podríamos haber configurado las cosas usando el dotenvmódulo npm para definir variables de entorno que se utilizan para personalizar el entorno de desarrollo. Henrik también utiliza este método en su guía.
Si está utilizando este método, se puede definir y utilizar una variable en el .env.productionarchivo de configuración del complemento, como , en lugar de exponer la URL de WordPress.WORDPRESS_URL
# .env.production# Don't put any sensible data here!!!WORDPRESS_URL=https://tinjurewp.com/wp-gatsby/Mi entorno de prueba expone igualmente la instancia y los datos de WordPress a WPGraphQL.
Colby Fayock tiene una útil guía paso a paso sobre el uso de variables ambientales con Gatsby y Netlify.
Después de reiniciar el servidor de desarrollo, la API WPGraphQL está disponible con Gatsby para consultar y recuperar los datos específicos que se consultan desde el sitio de WordPress y mostrarlos en un sitio de Gatsby a través de la URL GraphQL del host local en https//localhost:8000/___graphql/.
Sección 2: Portar publicaciones y páginas de WordPress
En Gatsby, las publicaciones y páginas se pueden crear en el momento de la compilación consultando datos con GraphQL y asignando los resultados de la consulta a publicaciones o plantillas de página. El proceso se describe en un tutorial de Gatsby sobre la creación programática de páginas a partir de datos. Gatsby utiliza dos API onCreateNodey createPagessu tutorial contiene una explicación detallada sobre cómo se implementan.
Los fragmentos de código aquí provienen de la guía de Henrik . Debido a la forma en que WordPress almacena datos en su base de datos en diferentes tipos y categorías de datos, transferir todo el contenido resulta no tan sencillo. Sin embargo, con conocimientos previos sobre la creación de páginas y publicaciones con Gatsby createPagesAPI y Node API , pude seguir adelante. También hay muchos sitios de inicio del mundo real a los que se puede hacer referencia como ejemplos.
Paso 1: agregue contenido de publicaciones y páginas en un sitio de WordPress
Agregue algunas publicaciones y páginas en el sitio de WordPress si aún no tiene ninguna. Antes de crear una página para ese contenido, debemos eliminar index.jsy page-2.jsde la carpeta de páginas del sitio de Gatsby. Estos dos archivos parecen interferir con los datos transferidos de WordPress.
Paso 2: crear página y plantilla de publicación
Vamos a crear dos archivos de plantilla para nuestro contenido, uno para publicaciones ( /src/templates/posts/index.js) y otro para páginas ( /src/templates/pages/index.js).
Aquí está nuestra plantilla de publicación. Básicamente, usamos el título de la publicación dos veces (una como título de la página SEO y otra como encabezado de la publicación) y el contenido de la publicación como un componente de la publicación.
// src/templates/post/index.jsimport React from "react"import Layout from "../../components/layout"import SEO from "../../components/SEO"
const Post = ({ pageContext }) = { const post = pageContext.post
return ( Layout SEO title={post.title} /
h1 {post.title} /h1 div dangerouslySetInnerHTML={{__html: post.content}} /
/Layout )}
export default PostHaremos casi lo mismo para la plantilla de página:
//src/templates/pages/index.jsimport React from "react"import Layout from "../../components/layout"import SEO from "../../components/seo"
const Page = ({ pageContext }) = { const page = pageContext.page
return ( Layout SEO title={page.title} /
h1{page.title}/h1 div dangerouslySetInnerHTML={{__html: page.content}} /
/Layout )}
export default PagePaso 3: cree publicaciones y páginas estáticas con la API createPages
Tenga en cuenta que todo el código que cubrimos aquí se puede escribir en el node.jsarchivo. Sin embargo, para facilitar la lectura, las publicaciones y las páginas se separan en una carpeta denominada createen el directorio raíz del proyecto siguiendo la Guía de Henrik.
¡Vamos a ensuciarnos las manos con la createPagesAPI GraphQL! Comenzaremos agregando lo siguiente a gatsby-node.js.
// gatsby-node.jsconst createPages = require("./create/createPages")const createPosts = require("./create/createPosts")
exports.createPagesStatefully = async ({ graphql, actions, reporter }, options) = { await createPages({ actions, graphql, reporter }, options) await createPosts({ actions, graphql, reporter }, options) }La publicación de Muhammad presenta un buen punto que vale la pena mencionar aquí:
La API createPages es parte de las API de Nodo que expone Gatsby. Básicamente, le indica a Gatsby que agregue páginas. Dentro de esto, llamamos a algunos métodos usando
async/await(una característica de ECMAScript 2017).
En otras palabras: ambas funciones crean páginas estáticas relevantes. Con eso en mente, definamos qué datos queremos usar y recuperemos esos datos en el create/createPages.jsarchivo. Perdón por el gran volcado de código, pero los comentarios de Henrik ayudan a explicar lo que está sucediendo.
//create/createPages.jsconst pageTemplate = require.resolve('../src/templates/page/index.js');
const GET_PAGES = ` query GET_PAGES($first:Int $after:String) { wpgraphql { pages( first: $first after: $after # This will make sure to only get the parent nodes and no children where: { parent: null } ) { pageInfo { hasNextPage endCursor } nodes { id title pageId content uri isFrontPage } } } }`
const allPages = []let pageNumber = 0const itemsPerPage = 10
/** This is the export which Gatbsy will use to process. * @param { actions, graphql } * @returns {Promisevoid} */module.exports = async ({ actions, graphql, reporter }, options) = {
/** This is the method from Gatsby that we're going * to use to create pages in our static site. */ const { createPage } = actions /** Fetch pages method. This accepts variables to alter * the query. The variable `first` controls how many items to * request per fetch and the `after` controls where to start in * the dataset. * @param variables * @returns {Promise*} */ const fetchPages = async (variables) = /** Fetch pages using the GET_PAGES query and the variables passed in. */ await graphql(GET_PAGES, variables).then(({ data }) = { /** Extract the data from the GraphQL query results */ const { wpgraphql: { pages: { nodes, pageInfo: { hasNextPage, endCursor }, }, }, } = data
/** Map over the pages for later creation */ nodes nodes.map((pages) = { allPages.push(pages) })
/** If there's another page, fetch more * so we can have all the data we need. */ if (hasNextPage) { pageNumber++ reporter.info(`fetch page ${pageNumber} of pages...`) return fetchPages({ first: itemsPerPage, after: endCursor }) }
/** Once we're done, return all the pages * so we can create the necessary pages with * all the data on hand. */ return allPages })
/** Kick off our `fetchPages` method which will get us all * the pages we need to create individual pages. */ await fetchPages({ first: itemsPerPage, after: null }).then((wpPages) = {
wpPages wpPages.map((page) = { let pagePath = `${page.uri}`
/** If the page is the front page, the page path should not be the uri, * but the root path '/'. */ if(page.isFrontPage) { pagePath = '/' }
createPage({ path: pagePath, component: pageTemplate, context: { page: page, }, })
reporter.info(`page created: ${page.uri}`) })
reporter.info(`# ----- PAGES TOTAL: ${wpPages.length}`) })}Nuevamente, la publicación de Muhammad es de excelente ayuda porque desglosa lo que pueden hacer las funciones createPages.jsy . createPosts.jsLa guía de Henrik también proporciona comentarios útiles para cada paso.
Paso 4: crear publicaciones
El createPosts.jsarchivo es casi idéntico a createPages.js. La única diferencia es anteponer la ruta blog/y reemplazar la "página" con "publicaciones" en todo el código.
Si nos detenemos aquí y reiniciamos el servidor de desarrollo gatsby developen la terminal, el registro de desarrollo muestra la creación de la página.
Ahora, si abrimos localhost:8000en un navegador, obtenemos un error 404.
Puede que sea desagradable, pero todo está bien. Al hacer clic en cualquiera de los enlaces de la página 404, se muestra la página o publicación correcta de la fuente de datos de WordPress. Por ejemplo, si se hace clic en el enlace de la página de muestra, se muestra el contenido de la página de muestra de WordPress en el navegador.
Pasemos al menú de navegación de nuestro sitio. WordPress tiene una función de gestión de navegación que nos permite crear menús utilizando enlaces a páginas, publicaciones, archivos, taxonomías e incluso enlaces personalizados. Queremos crear navegación para un menú principal en WordPress y enviarlo a GraphQL donde podemos consultarlo para nuestro propio sitio.
LinkLos enlaces de navegación, incluidos los enlaces de páginas y publicaciones, se crean en Gatsby utilizando la API Gatsby Link, que utiliza tanto el componente como la función integrados navigate. El Linkcomponente se utiliza para vincular a páginas internas, pero no a enlaces externos.
Portar el menú de navegación de WordPress al sitio de Gatsby resulta ser una pequeña tarea complicada que requiere crear Menucomponentes MenuItemsy refactorizarlos Layouten consecuencia. Así es como funciona.
Los fragmentos de código utilizados en esta sección se tomaron directamente de la guía de Henrik para que estén completos; sin embargo, estos fragmentos de código parecen ser bastante estándar utilizados en otros iniciadores de Gatsby WordPress con poca variación.
Paso 1: crea un menú de WordPress
Como se describe en la guía, es importante configurar un menú llamado “PRIMARIO” que se define en el tema Twenty Twenty. Vamos a incluir tres enlaces allí:
- Inicio: Un enlace a nuestra página de inicio, que será un enlace personalizado que apuntará al índice de nuestro sitio.
- Página de muestra: la página predeterminada que WordPress crea en una nueva instalación de WordPress.
- Página principal: este suele ser el nombre que se le da a la página de inicio en WordPress. Deberá crear esta página en el editor.
Paso 2: consultar elementos del menú con GraphiQL Explorer
A continuación, escribiremos una consulta para los elementos del menú desde la GraphiQLinterfaz. Tenga en cuenta que podemos usar el explorador para escribirlo prácticamente por nosotros marcando algunas casillas.
query MyQuery { menuItems(where: {location: PRIMARY}) { nodes { label url title target } }}Paso 3: crear menú y vincular componentes de utilidad en Gatsby
¿Ves cómo las URL en los datos son absolutas y muestran la dirección completa? Necesitaremos una función de utilidad para traducirlos a URL relativas, nuevamente, porque eso es lo que Linkadmite el componente.
La guía de Henrik proporciona la siguiente función de utilidad para convertir URL absolutas de WordPress en URL relativas que son necesarias para Gatsby:
// src/utils/index.js/** Parses a menu item object and returns Gatsby-field URI. * @param {object} menuItem a single menu item * @param wordPressUrl * @param blogURI */export const CreateLocalLink = (menuItem, wordPressUrl, blogURI='blog/') = { const { url, connectedObject } = menuItem;
if (url === '#') { return null; } /** Always want to pull of our API URL */ let newUri = url.replace(wordPressUrl, '');
/** If it's a blog link, respect the users blogURI setting */ if (connectedObject connectedObject.__typename === 'WPGraphQL_Post') { newUri = blogURI + newUri; }
return newUri;};Paso 4: crear un componente de elemento de menú
El siguiente paso es crear un MenuItemcomponente que utilice la función de utilidad creada en el paso anterior. El resultado es un enlace completamente formado que es consumido por el menú del sitio de Gatsby.
// src/components/MenuItem.jsimport React from "react"import { CreateLocalLink } from "../utils"import { Link } from "gatsby"
const MenuItem = ({ menuItem, wordPressUrl }) = { return ( Link style={{marginRight: '20px' }} to={CreateLocalLink(menuItem, wordPressUrl)} {menuItem.label} /Link )}
export default MenuItemPaso 5: crear un componente de menú
Bien, creamos URL y un MenuItemcomponente funcional. Creemos un nuevo componente donde puedan ir Menunuestros componentes. MenuItemLa StaticQueryAPI de Gatsby se utiliza para consultar todos los elementos del menú principal con GraphQL.
// src/components/Menu.jsimport React from "react"import { StaticQuery, graphql } from "gatsby"import MenuItem from "./MenuItem"
/** Define MenuItem fragment and get all primary menu items */const MENU_QUERY = graphql` fragment MenuItem on WPGraphQL_MenuItem { id label url title target }
query GETMAINMENU { wpgraphql { menuItems(where: {location: PRIMARY}) { nodes { ...MenuItem } } generalSettings { url } } }`
const Menu = () = { return ( StaticQuery query={MENU_QUERY} render={(data) = { if (data.wpgraphql.menuItems) { const menuItems = data.wpgraphql.menuItems.nodes const wordPressUrl = data.wpgraphql.generalSettings.url
return ( div style={{ marginBottom: "20px" }} { menuItems menuItems.map((menuItem) = ( MenuItem key={menuItem.id} menuItem={menuItem} wordPressUrl={wordPressUrl}/ ) )} /div ) } return null }} / )}
export default MenuPaso 6: Agregar el menú al componente de diseño
En este punto, tenemos todo lo que necesitamos para construir un menú de sitio de Gatsby utilizando datos de WordPress. Solo necesitamos colocar el Menucomponente en nuestro Layoutcomponente:
// src/components/layout.jsimport React from "react"import PropTypes from "prop-types"import useSiteMetadata from '../components/siteMetadata';import Header from "./Header"import Footer from "./Footer"import Menu from "./Menu"import "./layout.css"
const Layout = ({ children }) = { const { title, description } = useSiteMetadata();
return ( section Header siteTitle={title} description={description} / div style={{ margin: `0 auto`, maxWidth: 960, padding: `0 1.0875rem 1.45rem`,}} Menu / main{children}/main Footer / /div /section )}
Layout.propTypes = { children: PropTypes.node.isRequired,}
export default Layout Paso 7: Agregar soporte para la ruta del enlace externo
La documentación de Gatsby sobre el Linkcomponente explica que los datos provenientes de un CMS externo, como WordPress, idealmente deberían ser inspeccionados por el Linkcomponente y renderizados con Gatsby Linko con una etiqueta normal aen consecuencia. Esto garantiza que cualquier enlace verdaderamente externo en el lado de WordPress permanezca absoluto sin entrar en conflicto con el Linkcomponente.
Esto requiere (lo has adivinado) otro componente que haga exactamente eso. En Gatsby Docs se le conoce como " UniversalLinkque devuelve un componente compatible con Gatsby Linko un aelemento tradicional":
//src/components/UniversalLink.jsimport React from "react"import { Link as GatsbyLink } from "gatsby"
const UniversalLink = ({ children, to, activeClassName, partiallyActive, ...other }) = { const internal = /^/(?!/)/.test(to) // Use Gatsby Link for internal links, and a for others if (internal) { return ( GatsbyLink to={to} activeClassName={activeClassName} partiallyActive={partiallyActive} {...other} {children} /GatsbyLink ) } return ( a href={to} {...other} {children} /a )}export default UniversalLinkAhora, volvamos a nuestro MenuItemcomponente y actualicémoslo para usar UniversalLink:
/ src/components/MenuItem.jsimport React from "react"import { CreateLocalLink } from "../utils"import UniversalLink from "./UniversalLink"
const MenuItem = ({ menuItem, wordPressUrl }) = { return ( UniversalLink style={{marginRight: '20px' }} to={CreateLocalLink(menuItem, wordPressUrl)} {menuItem.label} /UniversalLink )}
export default MenuItem ¿Estás listo para comprobar las cosas? Reinicie el servidor local gatsby developy el navegador debería mostrar un menú de navegación con elementos que contienen enlaces a rutas de páginas relativas.
Sección 4: Visualización de publicaciones de blog en Gatsby
Estamos en bastante buena forma en este momento, pero hay una gran pieza que debemos abordar: mostrar páginas en el sitio. Revisaremos los pasos para que esto suceda en esta sección, específicamente creando plantillas de publicaciones de blog, así como un par de componentes nuevos para imágenes de publicaciones antes de unir todo en createPages.jsy createPosts.js.
¿Ya has creado tus páginas y publicaciones en WordPress? Si no, este es un buen momento para lanzarse y hacerlo.
Paso 1: agregue un archivo de variables globales en la raíz del directorio del proyecto
// global variableconst Globals = { blogURI: ''}module.exports = Globals La blogURI = ' 'ruta URL se utiliza cuando la configuración de la página de inicio en el administrador de WordPress ( Settings→ Reading) está configurada en la opción "Tus últimas publicaciones".
Si planea utilizar la opción "página estática", entonces blogURI= 'blog'debe usarla en el archivo de variables globales.
Paso 2: crea una plantilla de blog dentro de la carpeta de plantillas
Esta plantilla se encargará de mostrar todas las publicaciones publicadas. Tenga en cuenta que aquí se utilizan dos componentes ( PostEntryy Pagination, los cuales aún no existen). Llegaremos a ellos en un momento.
// src/templates/post/blog.jsimport React from "react"import Layout from "../../components/Layout"import PostEntry from "../../components/PostEntry"import Pagination from "../../components/Pagination"import SEO from "../../components/SEO"
const Blog = ({ pageContext }) = { const { nodes, pageNumber, hasNextPage, itemsPerPage, allPosts } = pageContext
return ( Layout SEO description="Blog posts" keywords={[`blog`]} / {nodes nodes.map(post = PostEntry key={post.postId} post={post}/)} Pagination pageNumber={pageNumber} hasNextPage={hasNextPage} allPosts={allPosts} itemsPerPage={itemsPerPage} / /Layout )}
export default BlogPaso 3. Cree un componente de entrada posterior
Este componente se utiliza dentro archive.jsy en otros componentes para recorrer las publicaciones, mostrando el título de la entrada de la publicación, la imagen destacada (si la hay), el extracto y la URL (también conocido como "slug" en el lenguaje de WordPress).
// src/components/PostEntry.jsimport React from "react"import { Link } from "gatsby"import Image from "./Image"import { blogURI } from "../../globals"
const PostEntry = ({ post }) = { const { uri, title, featuredImage, excerpt } = post
return ( div style={{ marginBottom: "30px" }} header Link to={`${blogURI}/${uri}/`} h2 style={{ marginBottom: "5px" }}{title}/h2 Image image={featuredImage} style={{ margin: 0 }}/ /Link /header
div dangerouslySetInnerHTML={{ __html: excerpt }}/ /div )}export default PostEntryPaso 4: cree un componente de imagen (opcional)
El iniciador predeterminado de Gatsby viene con un Imagecomponente y funciona bien en la mayoría de los casos. En este ejemplo, buscamos el archivo de imagen utilizado como imagen destacada de la publicación en WordPress y le asignamos una imagen alternativa en caso de que no haya una imagen destacada como se describe en la guía de Henrik .
// src/components/Image.jsimport React from "react"import { useStaticQuery, graphql } from "gatsby"
const Image = ({ image, withFallback = false, ...props }) = { const data = useStaticQuery(graphql` query { fallBackImage: file(relativePath: { eq: "fallback.svg" }) { publicURL } } `)
/* Fallback image */ if (!image) { return withFallback ? img src={data.fallBackImage.publicURL} alt={"Fallback"} {...props}/ : null }
return img src={image.sourceUrl} alt={image.altText} {...props}/}
export default ImageSi withFallbackestá configurado en false(como en el archivo del componente predeterminado de Gatsby), simplemente no representará un elemento DOM.
Paso 5: crear un componente de paginación
El componente Paginación nos permite mostrar un número específico de publicaciones por página en el índice de
Deja un comentario