Gatsby: ayuda a que los archivos yaml sean más potentes
Hola a todos, ¿puedo obtener ayuda para escribir rebajas en una página de yaml? Estoy intentando cambiar de jekyll a gatsby, pero una de las buenas características de jekyll era el lenguaje de plantillas líquido que le permitía pasar cualquier cadena (de un archivo yaml, por ejemplo) a través de una tubería markdownify . Esto fue útil cuando tenía varias piezas de información que quería estructuradas en la página, pero organizadas juntas en un archivo yaml. Ejemplo:
- title: My Title
image: ./assets/image.png
description: >
Here is a long winded description that includes a [link](https://code-somewhere.com).
- title: Second Item
image: ./assets/image2.png
description >
more text ...
En una nota similar, cargar una imagen de esta manera parece no ser posible, tengo soluciones hacky para eso, como importar todas las imágenes en algún otro lugar del archivo, pero ¿hay alguna manera de que el paquete web sepa que debe copiar cualquier imagen en el archivo pages/ carpeta incluso si 'parecen' no ser utilizadas?
andykais
Todos 3 comentarios
En las imágenes, si usa gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp / gatsby-plugin-sharp, puede consultar estas imágenes.
Vea, por ejemplo, cómo gatsbyjs.org consulta los avatares de los autores
https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 y https://github.com/gatsbyjs/gatsby/blob/master/docs/ blog / author.yaml
Al ejecutar campos yaml a través de markdown, puede crear subnodos que especifique su tipo de medio como markdown y luego gatsby-transformer-comment los convertirá a html, por ejemplo, https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84f5e2a/packages /gatsby-source-contentful/src/normalize.js#L143
Lo siento si eso es de muy alto nivel y no es muy procesable. Gatsby se centra en facilitar la configuración de canalizaciones de transformación de datos personalizadas. Para tareas comunes, las personas pueden crear complementos de nivel superior que configuran cosas como esta para usted automáticamente, pero no sé si nadie lo ha hecho todavía para yaml => markdown => html.
Para que esto suceda, deberá sumergirse en los documentos de Gatsby y mirar los complementos para comprender cómo hacer lo que quiere hacer.
KyleAMathews
en 7 nov. 2017
gracias por el consejo, no creo que esté listo para dedicar tanto tiempo esencialmente a hacer un complemento de gatsby en este momento. Tengo mi solución ingenua así:
import data from './_data.yaml'
import markdownIt from 'markdown-it'
const md = markdownIt({
html: true,
linkify: true
})
const loadedData = data.map(item => ({
...item,
image: item.image && require(item.image),
description: md.render(item.description)
}))
esto todavía puede suceder durante la etapa de construcción, por lo que funciona para mis propósitos. Creo que el problema es que graphql tiene como objetivo construir datos primero y usar una plantilla similar para varias páginas. Estoy siguiendo una estructura de 'módulo' así:
''
páginas /
una página/
index.js
_data.yml
activos/
img1.png
otra página/
...
andykais
en 8 nov. 2017
Una forma sencilla de hacer esto sería compilar los campos de rebajas usando onCreateNode. https://www.gatsbyjs.org/tutorial/part-four/#programically -creating-pages-from-data y agregue el campo compilado como un nuevo campo con createNodeField .
Simplemente harías eso en tu gatsby-node.js
KyleAMathews
en 9 nov. 2017
Temas relacionados
dustinhorton
·
3Comentarios
mikestopcontinues
·
3Comentarios
jaanhio
·
3Comentarios
hobochild
·
3Comentarios
theduke
·
3Comentarios
Comentario más útil
En las imágenes, si usa gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp / gatsby-plugin-sharp, puede consultar estas imágenes.
Vea, por ejemplo, cómo gatsbyjs.org consulta los avatares de los autores
https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 y https://github.com/gatsbyjs/gatsby/blob/master/docs/ blog / author.yaml
Al ejecutar campos yaml a través de markdown, puede crear subnodos que especifique su tipo de medio como markdown y luego gatsby-transformer-comment los convertirá a html, por ejemplo, https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84f5e2a/packages /gatsby-source-contentful/src/normalize.js#L143
Lo siento si eso es de muy alto nivel y no es muy procesable. Gatsby se centra en facilitar la configuración de canalizaciones de transformación de datos personalizadas. Para tareas comunes, las personas pueden crear complementos de nivel superior que configuran cosas como esta para usted automáticamente, pero no sé si nadie lo ha hecho todavía para yaml => markdown => html.
Para que esto suceda, deberá sumergirse en los documentos de Gatsby y mirar los complementos para comprender cómo hacer lo que quiere hacer.