Gatsby: Pertanyaan - Bagaimana membaca penurunan harga dari frontmatter

Tutorial berjalan melalui ini, terutama bagian 5-7 https://www.gatsbyjs.org/tutorial/

Anda mungkin juga ingin memulai dengan salah satu permulaan - banyak di antaranya memiliki dukungan penurunan harga yang sudah disiapkan - https://www.gatsbyjs.org/docs/gatsby-starters/

Pertanyaannya lebih bernuansa dan tidak tercakup dalam tutorial, jadi saya akan membukanya kembali.

Menurut saya, Anda memiliki 2 pilihan:

1. Anda dapat memisahkan konten penurunan harga untuk memisahkan file dan menggunakan tautan jalur:

Separate file - let's call it `someContent.md`
```md
### This is the actual content in **MarkDown** format.

- This is the first row
- This is second row
- This is third row
```
and reference that file in your main file (by relative path):
```md
halfBlocks:
  - title: This is first title
    content: "./someContent.md"
```
then in query you could
```
halfBlocks {
  content {
    childMarkdownRemark {
      html
    }
}
```

1. Pendekatan lain akan menangani ini secara terprogram - membuat node penurunan harga untuk bidang frontmatter Anda dan menambahkannya melalui createNodeField . Ini lebih terlibat. Anda mungkin perlu menelusuri plugin sumber Contentful untuk melihat cara membuat node MarkdownRemark.

Hai @KAMAMews terima kasih atas saran Anda. Saya memang membacanya tetapi sulit bagi saya untuk sepenuhnya memahami bagaimana melakukan hal ini. Saya menggunakan starter tetapi ini lebih rumit. Pemula digunakan: https://github.com/v4iv/gatsby-starter-business

@pieh Terima kasih banyak telah membimbing saya. Kamu benar. Saya pikir saya akan memiliki terlalu banyak file kecil jadi saya mendapatkan ini bekerja dengan kode di bawah ini. Saya mendokumentasikannya di sini sehingga jika orang lain memiliki masalah yang sama, mereka juga dapat melihatnya.

Langkah 1: Membaca konten

Saya membaca konten secara normal melalui Graphql. Ini memberi saya penurunan harga sebagai string. Saya masih perlu mengubahnya.

Langkah 2: Mengonversi ke HTML

Untuk ini saya memutuskan untuk membiarkan konten dari sebagai string sampai kita mencapai komponen sebenarnya yang akan menampilkan ini. Di sana saya mengubahnya menjadi penurunan harga.

Tambahkan komentar untuk melakukan ini secara terprogram. Anda mungkin dapat mengabaikan komentar-preset-lint-recommended:

Instal Remark

yarn add remark remark-preset-lint-recommended remark-html

Impor

import remark from 'remark';
import recommended from 'remark-preset-lint-recommended';
import remarkHtml from 'remark-html';

Memberikan
Kemudian di bagian render dengan asumsi content adalah penurunan harga yang dibaca sebagai string:

content = remark()
      .use(recommended)
      .use(remarkHtml)
      .processSync(content).toString();

Sekarang saya dapat menafsirkan ulang konten sebagai HTML.

Langkah 3: Menambahkan konten dalam penurunan harga

Ada satu gotcha lagi yang saya temui. Formatnya tidak tepat ketika saya menggunakan multiline dengan >- :

content: >-
    ### This is the actual content in **MarkDown** format.
    - This is the first row
    - This is second row

Tetapi dengan simbol pipa | itu berfungsi dengan baik.

content: |
    ### This is the actual content in **MarkDown** format.
    - This is the first row
    - This is second row

Untuk saat ini saya menutup ini. Silakan buka kembali jika Anda mau.

Terima kasih!!

Saya ingin menggunakan penurunan harga untuk frontmatter (judul, dan kutipan tepatnya) juga, dan menurut saya itu harus didukung secara default.

Akan sangat bagus untuk memiliki konvensi penamaan, sehingga gatsby-transformer-remark dapat memahami bahwa misalnya title.md adalah bidang penurunan harga.

@omeid @ thorn0 ini mungkin sesuatu yang kami dukung langsung di gatsby-transformer-comment tetapi sementara itu, Anda dapat membuat plugin yang melakukan ini untuk Anda misalnya https://github.com/gatsbyjs/gatsby/issues/5729#issuecomment -395701042 dan createNodeField

Mohon maaf karena mengomentari masalah yang sudah ditutup, tetapi hanya ingin membagikan cuplikan yang saya gunakan di gatsby-node.js saya sendiri yang berhasil untuk saya, mengikuti apa yang telah Anda rujuk:

// Need to `yarn add remark remark-html`, then include the following code in
// gatsby-node.js.
const remark = require('remark');
const remarkHTML = require('remark-html');

exports.onCreateNode = ({ node }) => {
  // Conditionals, etc. can be used here, but I omitted those just for example's sake.
  const markdown = node.frontmatter.my_field;
  node.frontmatter.my_field = remark()
    .use(remarkHTML)
    .processSync(markdown)
    .toString();
  return node;
};

Jadi, apakah boleh melakukannya tanpa menggunakan createNodeField ? Saya bingung.

@ thorn0 lebih baik menggunakan createNodeField daripada node.frontmatter.my_field = karena mutasi node dapat mengakibatkan bug yang sulit di-debug

@amitjindal @nshki Ini bekerja dengan baik tetapi benar-benar merusak proses pembuatan produksi saya karena saya telah menginstal pustaka "react-flickity-component":

success delete html and css files from previous builds — 0.626 s
success open and validate gatsby-config — 0.018 s
success copy gatsby files — 0.075 s
success onPreBootstrap — 2.782 s
error UNHANDLED EXCEPTION


  TypeError: Cannot set property 'Compiler' of null

  - index.js:16 plugin
    [blog]/[remark-html]/index.js:16:17

  - index.js:271 Function.use
    [blog]/[unified]/index.js:271:25

  - gatsby-node.js:63 exports.onCreateNode.postscriptumsMarkdown.forEach.postscr    iptum
    /home/projects/blog/gatsby-node.js:63:12

  - Array.forEach

  - gatsby-node.js:61 Object.exports.onCreateNode
    /home/projects/blog/gatsby-node.js:61:29

  - api-runner-node.js:110 runAPI
    [blog]/[gatsby]/dist/utils/api-runner-node.js:110:36

  - api-runner-node.js:187 
    [blog]/[gatsby]/dist/utils/api-runner-node.js:187:33

  - map.js:27 
    [blog]/[async]/internal/map.js:27:9

  - eachOfLimit.js:66 replenish
    [blog]/[async]/internal/eachOfLimit.js:66:17

  - eachOfLimit.js:50 iterateeCallback
    [blog]/[async]/internal/eachOfLimit.js:50:17

  - onlyOnce.js:12 module.exports
    [blog]/[async]/internal/onlyOnce.js:12:16

  - map.js:29 
    [blog]/[async]/internal/map.js:29:13

  - util.js:16 tryCatcher
    [blog]/[bluebird]/js/release/util.js:16:23

  - nodeify.js:23 Promise.successAdapter
    [blog]/[bluebird]/js/release/nodeify.js:23:30

  - promise.js:566 Promise.module.exports.Promise._settlePromise
    [blog]/[bluebird]/js/release/promise.js:566:21

  - promise.js:606 Promise.module.exports.Promise._settlePromiseCtx
    [blog]/[bluebird]/js/release/promise.js:606:10


Waiting for the debugger to disconnect...

Process finished with exit code 130 (interrupted by signal 2: SIGINT)

Mencoba mengecualikan perpustakaan dari Webpack tidak berfungsi ( @see https://github.com/gatsbyjs/gatsby/issues/7599)

Hai David (@comxd), Maaf saya bepergian.
Sayangnya saya tidak memiliki wawasan tentang ini. Saya mencoba untuk memeriksa kode. Compiler di null tampaknya berasal dari library komentar.

Anda tampaknya menggunakan loop di file gatsby-node.js Anda.
Ini mungkin terkait dengan beberapa konten yang masuk yang bukan penurunan harga atau lebih buruk lagi kosong dan Anda mencoba memprosesnya. Coba letakkan beberapa pernyataan console.log di dalamnya dan lihat apakah Anda menemukan pola di mana sesuatu yang kosong menyebabkan ini.

Ini bisa benar-benar tidak aktif tetapi tidak bisakah Anda membuat komponen penurunan harga seperti di bawah ini yang kemudian dapat Anda gunakan di templat Anda di mana pun penurunan harga diperlukan untuk dikonversi ke HTML

import React from 'react'
import PropTypes from 'prop-types'
import showdown from 'showdown'

const converter = new showdown.Converter()

const MarkdownContent = ({ content, className }) => (
  <div className={className} dangerouslySetInnerHTML={{ __html: converter.makeHtml(content) }} />
)

MarkdownContent.propTypes = {
  content: PropTypes.string,
  className: PropTypes.string,
}


export default MarkdownContent

@blakenoll pasti tidak sepenuhnya mati! Itu pendekatan yang masuk akal.

Meskipun demikian, salah satu manfaat besar Gatsby adalah Anda melakukan operasi tersebut pada waktu pembuatan, yang bagus karena dengan demikian kita tidak perlu menyimpan parser Penurunan harga kepada pengguna akhir!

@DSchau Tidakkah parser penurunan harga benar-benar dikirim ke pengguna saat aplikasi dihidrasi ulang?

@blakenoll Suka cara berpikir yang out-of-the-box!

Apakah kami memiliki sesuatu yang tersedia bagi kami untuk menarik semua plugin komentar / konfigurasi yang kami sertakan dalam gatsby-config.js jadi kami tidak perlu menduplikasi semua fungsi yang dilakukan di belakang layar. Implementasi komentar Gatsby menyediakan bagi kami ? Itu akan membuat pembuatan bidang node sedikit lebih mudah; tetapi sangat merepotkan jika Anda memikirkan tentang bidang bersarang yang dapat diulang dan variasi konten per halaman.

@blakenoll Terima kasih banyak atas tip pertikaian Anda. Sangat membantu dan melakukan apa yang saya butuhkan untuk menggunakan HTML di frontmatter. Yang mengatakan, tampaknya pendekatan kikuk menggunakan penurunan harga untuk membuat halaman web yang perlu meneruskan potongan konten yang berbeda ke bagian halaman yang berbeda.

Adakah cara agar kita dapat menerapkan semacam fungsi markdownParser dalam bagian frontmatter dari kueri graphQL kita (mirip dengan cara kita memanipulasi gambar) yang akan mengurai string penurunan harga yang masuk di frontmatter dan mengubahnya menjadi HTML? Bukan ahli graphQL ... hanya mencoba berpikir.

Ini adalah masalah penting IMO b / c jika seseorang menggunakan Gatsby dengan Netifly CMS, Netifly menyediakan opsi agar berbagai bidang frontmatter menerima penurunan harga sebagai nilai. Namun saat membuat kueri bidang tersebut, mereka dikembalikan sebagai penurunan harga dalam string, bukan diurai ke HTML. Solusi @amitjindal dan @blakenoll berfungsi, tetapi seperti yang disebutkan @DSchau , tidak disarankan untuk mengirimkan parse penurunan harga kepada pengguna jika kita dapat menghindarinya. Adakah pendapat dari seseorang yang lebih akrab dengan Gatbsy daripada saya?

@skylarweaver Saya pasti satu halaman dengan ya. Meskipun saya memahami sifat dari membuat bidang node yang dapat memiliki informasi ini diurai, ini juga menjadi sedikit berat dengan data CMS yang mungkin memiliki bidang berulang dan sejumlah besar variasi nama bidang untuk disaring; selain tidak memiliki cara yang jelas untuk menggunakan kembali salah satu / semua plugin Gatsby Remark pada saat itu.

Beri +1 apa yang dikatakan @skylarweaver !

@amitjindal Mungkin pertanyaan bodoh tapi apa fungsi "> -"? Menggunakan starter cms netlify dan tampaknya sama sekali tidak membuat perbedaan dalam output yang dihasilkan apakah saya memiliki>,> -, |, atau tidak sama sekali.

@ nol13 Lihat skalar blok , ini tentang baris baru.

Bagaimana saya bisa menyisipkan tabel? Ini tidak bekerja

content: |
        |   |   |   |   |   |
        |---|---|---|---|---|
        |   |   |   |   |   |
        |   |   |   |   |   |
        |   |   |   |   |   |

@ qnguyen12 Saya akan mencoba menggunakan alat seperti https://jmalarcon.github.io/markdowntables/ untuk membantu Anda melakukan konversi.

Ya, maksud saya itu ditampilkan sebagai sumber, bukan tabel
Sebagai contoh:

text: |
        test   
        ### This is the actual content in **MarkDown** format.  
        |Month|Savings|Spending|
        |--- |--- |--- |
        |January|$100|$900|
        |July|$750|$1000|
        |December|$250|$300|
        |April|$400|$700|

itu menghasilkan:
uji

Ini adalah konten sebenarnya dalam format Markdown .

| Bulan | Tabungan | Pengeluaran | | --- | --- | --- | | Januari | $ 100 | $ 900 | | Juli | $ 750 | $ 1000 | | Desember | $ 250 | $ 300 | | April | $ 400 | $ 700 |

@KyleAMews Terima kasih, pekerjaan semacam itu, tetapi jelas Anda perlu membalas konfigurasi plugin komentar dan plugin atau Anda mendapatkan hasil yang berbeda. Ada rencana untuk mendukung markdown frontmatter? Mungkin bidang frontmattermd bersama dengan frontmatter mentah?

@omeid Saya tidak punya rencana tidak - ini akan menjadi plugin yang bagus bagi seseorang untuk membuat dan berbagi dengan komunitas!

Saya membuat plugin yang harus melakukan ini: gatsby-transformer-comment-frontmatter . Tampaknya berfungsi dari pengujian saya, dan saya berencana menggunakannya dalam proyek yang saya lakukan untuk klien, tetapi saya akan menghargai jika kalian mau melihat dan memberi tahu saya jika ada sesuatu yang terlihat salah , karena ini pertama kalinya saya menulis plugin gatsby. Ini mengambil rute yang disarankan oleh @omeid dan menambahkan bidang frontmattermd ke simpul MarkdownRemark.

Awalnya, sebelum saya menyadari bahwa saya bisa membuat node file penurunan harga baru untuk digunakan oleh gatsby-transformer-comment, saya datang dengan solusi yang benar-benar hacky yang melibatkan pemanggilan resolver yang diekspor oleh fungsi setFieldsOnGraphQLNodeType gatsby-transformer-comment, dan meneruskan fungsi baru node penurunan harga dibuat dalam resolver lain. Ini memungkinkan kueri bidang apa pun pada simpul MarkdownRemark menggunakan enum bidang seperti yang digunakan untuk fungsi grup, yang sangat saya sukai, tetapi rasanya seperti banyak peretasan untuk benar-benar digunakan untuk apa pun. Saya telah menyimpannya di sini untuk anak cucu.

hai @WhiteAbeLincoln saya mencoba menginstal dan menguji:
npm i gatsby-transformer-remark-frontmatter npm ERR! code ENOVERSIONS npm ERR! No valid versions available for gatsby-transformer-remark-frontmatter

Maaf, saya menyadari belum menerbitkan ke npm. Saya akan menerbitkannya setelah saya selesai bekerja dan memberi tahu Anda.

- Abe White

Pada 17 Juni 2019, pukul 22:53, broeker [email protected] menulis:

hai @WhiteAbeLincoln saya mencoba menginstal dan menguji:
npm i gatsby-transformator-komentar-frontmatter npm ERR! kode ENOVERSIONS npm ERR! Tidak ada versi valid yang tersedia untuk gatsby-transformer-comment-frontmatter

-
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub, atau nonaktifkan utasnya.

@WhiteAbeLincoln Saya mencoba gatsby-transformer-comment-frontmatter tetapi memberi saya kesalahan.

KESALAHAN # 11325

"Gatsby-node.js" situs Anda membuat halaman dengan komponen yang tidak ada.

Apakah Anda mendapatkan kesalahan ini?

Ini awalnya dilaporkan oleh @obeid di log masalah repo Anda.

Mungkin saya tidak menggunakannya dengan benar. Jadi, beberapa bantuan dihargai.

Membangun di atas jawaban @nshki dan dengan komentar @pieh tentang mutasi node. Ini benar-benar berhasil untuk saya:

const remark = require("remark");
const remarkHTML = require("remark-html");

exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
  const my_field = node.frontmatter.my_field;

  if (my_field) {
    const value = remark()
      .use(remarkHTML)
      .processSync(my_field)
      .toString();

    // new node at:
    // fields {
    //   my_field_html
    // }
    createNodeField({
      name: `my_field_html`,
      node,
      value
    });
  }
};

edit: my_field => my_field_html

@aziaziazi Bagaimana saya bisa melakukan hal yang sama tetapi untuk bidang bersarang dalam array?

---
pressEventsList:
  - body: >-
      *My md content...*
    image: 'https://res.cloudinary.com/press/01.jpg'
  - body: >-
      *My md content...*
    image: 'https://res.cloudinary.com/press/02.jpg'
---

Saya perlu mengonversi setiap pressEventsList[i].body .

@alexeychikk saya rasa Anda mungkin mencari pressEventList dan kemudian memetakan melalui konten untuk membuat array hasil:

const remark = require("remark");
const remarkHTML = require("remark-html");

exports.onCreateNode = ({ node, actions: { createNodeField } }) => {
const pressEventList = node.frontmatter.pressEventList;

if (pressEventList) {
  const value = pressEventList.map(event =>
     remark()
    .use(remarkHTML)
    .processSync(event.body)
    .toString()
  )

  createNodeField({
    name: `pressEventList`,
    node,
    value
  });
}
};

Saya tertarik untuk membuat plugin untuk mengurai tag YAML kustom untuk mencapai hal di atas tanpa menggunakan createNodeField (dengan cara yang sama tajam mem-parsing URL gambar).
Adakah yang bisa mengarahkan saya ke kode tempat URL gambar diuraikan untuk melihat contoh bagaimana hal ini dilakukan dengan tajam?

👋 Bagi mereka yang menggunakan MDX, saya membuat plugin untuk menambahkan dukungan frontmatter https://www.gatsbyjs.org/packages/gatsby-plugin-mdx-frontmatter/

@zslabs , Anda jarang melihat solusi yang diposting "9 jam yang lalu"! Saya akan mencobanya! Kerja bagus.

Saya telah berjuang dengan ini karena saya ingin menggunakan struktur data yang lebih kompleks untuk salah satu halaman saya.
Di bagian depan saya memiliki serangkaian bagian, dengan beberapa bidang seperti judul dan gambar unggulan, dan kemudian pada masing-masing bagian saya membuat badan dengan penurunan harga.
Menggunakan createNodeField tidak melakukannya untuk saya karena saya kesulitan menautkannya secara logis karena dibuat di bidangnya sendiri, tidak ditambahkan ke struktur frontmatter yang ada.
Saya akhirnya menggunakan createFieldExtension sehingga ketika section.body saya ditanyai, itu dikembalikan dalam HTML.
Tolong seseorang mengoreksi saya jika ini bukan solusi yang baik, tampaknya berhasil untuk saya tetapi saya memiliki perasaan yang mengganggu itu adalah cara yang salah untuk melakukan hal ini.

struktur frontmatter saya terlihat seperti ini:

templateKey: project-entry
date: 2020-06-22T13:16:57.702Z
featuredproject: true
title: Project title
description: Description for listing the project on other pages
featuredimage: Image for listing the project on other pages
featuredpost: false
sections:
  - heading: Section heading
    standout: false
    intro: >-
      Introduction to be displayed separately to body
    body: >-
       ## section title
       * bullet point
       * bullet point
       Some other text here

Dan kode yang saya gunakan di gatsby-node.js

exports.createSchemaCustomization = ({actions}) => {
  const { createTypes, createFieldExtension} = actions

  createFieldExtension({
    name: 'toHTML',
    extend:() => ({
        resolve(source) {
          return remark().use(remarkHTML).processSync(source.body).toString()
        }
      })
  })
  const typeDefs = `
  type MarkdownRemark implements Node {
    frontmatter: Frontmatter
  }
  type Frontmatter <strong i="14">@infer</strong> {
    sections: [section]
  }
  type section <strong i="15">@infer</strong> {
    body: String <strong i="16">@toHTML</strong>
  }
  `
  createTypes(typeDefs)
}

Bagi siapa pun yang tertarik, saya menyelesaikannya menggunakan jenis YAML khusus untuk memungkinkan penguraian bidang arbitrer apa pun sebagai penurunan harga seperti:

---
title: My Page
inline: !md Some **bold** and _italic_ text
block: !md |
  ## I'm a H2 title
  [I'm an inline-style link](https://www.google.com)
---

Untuk melakukannya, buat jenis kustom lalu ganti parser YAML materi abu-abu:

// custom-yaml.js
const yaml = require('js-yaml')
const remark = require('remark')
const remarkHTML = require('remark-html')

const MarkdownYamlType = new yaml.Type('!md', {
  kind: 'scalar',
  construct: data => remark().use(remarkHTML).processSync(data).toString(),
})

const MARKDOWN_SCHEMA = yaml.Schema.create(MarkdownYamlType)

module.exports = doc => yaml.safeLoad(doc, { schema: MARKDOWN_SCHEMA })

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        engines: { yaml: require("path/to/custom-yaml.js") },
      },
    }
  ]
}

Saya menyelesaikan ini sedikit berbeda. Saya membuat ekstensi bidang yang disebut @md dan menggunakannya dalam definisi tipe frontmatter yang dikombinasikan dengan penggantian nama bidang, kami dapat mencapai abstraksi yang diinginkan.

exports.createSchemaCustomization = ({ actions }) => {
  actions.createFieldExtension({
    name: "md",
    args: {
      from: {
        type: "String!",
        defaultValue: true,
      },
    },

    extend() {
      return {
        args: {
          from: "String!",
        },
        resolve(source, args) {
          const fieldValue = source[args.from]
          return convertToHTML(fieldValue)
        },
      }
    },
  })
  const typeDefs = `
    type MarkdownRemark implements Node <strong i="7">@infer</strong> {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      markdownField: String! <strong i="8">@md</strong>
    }
  `
  actions.createTypes(typeDefs)
}

berikut adalah contoh penggunaan:

...
frontmatter {
        title: markdownField(from: "title")
        subtitle: markdownField(from: "subtitle")
}

Saya menyelesaikan ini sedikit berbeda.

Ini tidak cukup berhasil untuk saya. Pertama saya mendapatkan kesalahan saat menolak defaultValue: true untuk argumen from - itu harus berupa string. Mengubahnya menjadi defaultValue: '' , saya kemudian mendapatkan kesalahan ini:

Encountered an error parsing the provided GraphQL type definitions:
Argument "from" of required type "String!" was not provided.

  1 |
  2 |     type MarkdownRemark implements Node <strong i="11">@infer</strong> {
  3 |       frontmatter: Frontmatter
  4 |     }
  5 |     type Frontmatter {
> 6 |       markdownField: String! <strong i="12">@md</strong>
    |                              ^
  7 |     }

Ini saya tidak tahu bagaimana menyelesaikannya.

Bagi siapa pun yang tertarik, saya menyelesaikannya menggunakan jenis YAML khusus untuk memungkinkan penguraian bidang arbitrer apa pun sebagai penurunan harga seperti:

---
title: My Page
inline: !md Some **bold** and _italic_ text
block: !md |
  ## I'm a H2 title
  [I'm an inline-style link](https://www.google.com)
---

Untuk melakukannya, buat jenis kustom lalu ganti parser YAML materi abu-abu:

// custom-yaml.js
const yaml = require('js-yaml')
const remark = require('remark')
const remarkHTML = require('remark-html')

const MarkdownYamlType = new yaml.Type('!md', {
  kind: 'scalar',
  construct: data => remark().use(remarkHTML).processSync(data).toString(),
})

const MARKDOWN_SCHEMA = yaml.Schema.create(MarkdownYamlType)

module.exports = doc => yaml.safeLoad(doc, { schema: MARKDOWN_SCHEMA })

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        engines: { yaml: require("path/to/custom-yaml.js") },
      },
    }
  ]
}

Saya mendapatkan 'Opsi plugin tidak valid untuk "gatsby-transformer-comment":' jika saya mencoba metode ini?