Gatsby: membantu membuat file yaml lebih kuat

Dibuat pada 6 Nov 2017 · 3Komentar · Sumber: gatsbyjs/gatsby

Hai semua, bisakah saya mendapatkan bantuan untuk menulis penurunan harga di halaman yaml? Saya mencoba beralih dari jekyll ke gatsby, tetapi salah satu fitur bagus dari jekyll adalah bahasa templating cair yang memungkinkan Anda meneruskan string apa pun (misalnya dari file yaml) melalui pipa markdownify . Ini berguna ketika saya memiliki beberapa informasi yang saya inginkan terstruktur pada halaman tetapi diatur bersama dalam file yaml. Contoh:

- 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 ...

Pada catatan yang sama, memuat gambar dengan cara ini tampaknya tidak mungkin, saya memiliki solusi peretasan untuk itu, seperti mengimpor semua gambar di tempat lain dalam file, tetapi apakah ada cara untuk memberi tahu webpack untuk menyalin gambar apa pun di pages/ folder bahkan jika mereka 'tampak' tidak digunakan?

Sumber

andykais

👍3

Komentar yang paling membantu

Pada gambar, jika Anda menggunakan gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp, Anda dapat mengkueri gambar ini.

Lihat misalnya bagaimana gatsbyjs.org menanyakan avatar penulis

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/ blog/penulis.yaml

Saat menjalankan bidang yaml melalui penurunan harga — Anda dapat membuat sub-simpul yang Anda tentukan jenis medianya sebagai penurunan harga dan kemudian gatsby-transformer-remark akan mengonversinya menjadi html misalnya https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84f5e2a/packages /gatsby-source-contentful/src/normalize.js#L143

Maaf jika itu tingkat super tinggi dan tidak dapat ditindaklanjuti. Gatsby berfokus untuk mempermudah penyiapan jalur transformasi data kustom. Untuk tugas-tugas umum, orang dapat membuat plugin tingkat tinggi yang mengatur hal-hal seperti ini untuk Anda secara otomatis, tetapi saya tidak tahu apakah ada yang belum memiliki yaml => markdown => html.

Untuk mewujudkannya, Anda harus mempelajari dokumen Gatsby dan melihat plugin untuk memahami cara melakukan apa yang ingin Anda lakukan.

KyleAMathews pada 7 Nov 2017

👍3

Semua 3 komentar

Pada gambar, jika Anda menggunakan gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp, Anda dapat mengkueri gambar ini.

Lihat misalnya bagaimana gatsbyjs.org menanyakan avatar penulis

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/ blog/penulis.yaml

Untuk mewujudkannya, Anda harus mempelajari dokumen Gatsby dan melihat plugin untuk memahami cara melakukan apa yang ingin Anda lakukan.

KyleAMathews pada 7 Nov 2017

👍3

terima kasih atas sarannya, saya rasa saya tidak siap untuk menghabiskan banyak waktu untuk membuat plugin gatsby sekarang. Saya punya solusi naif saya seperti:

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)
}))

ini masih bisa terjadi selama tahap pembuatan sehingga berfungsi untuk tujuan saya. Saya pikir masalahnya adalah graphql ditujukan untuk membangun data terlebih dahulu dan menggunakan templat serupa untuk banyak halaman. Saya mengikuti struktur 'modul' seperti:
```
halaman/
satu halaman/
index.js
_data.yml
aktiva/
img1.png
halaman lain/
...

andykais pada 8 Nov 2017

👍2

Cara sederhana untuk melakukannya adalah dengan mengkompilasi bidang penurunan harga menggunakan onCreateNode. https://www.gatsbyjs.org/tutorial/part-four/#programmatically -creating-pages-from-data dan tambahkan bidang yang dikompilasi sebagai bidang baru dengan createNodeField .

Anda cukup melakukannya di gatsby-node.js . Anda

KyleAMathews pada 9 Nov 2017

👍2

Apakah halaman ini membantu?

0 / 5 - 0 peringkat