Gatsby: yaml फ़ाइलों को और अधिक शक्तिशाली बनाने में सहायता करें

को निर्मित 6 नव॰ 2017 · 3टिप्पणियाँ · स्रोत: gatsbyjs/gatsby

हाय सब, क्या मुझे यमल पेज के भीतर मार्कडाउन लिखने में कुछ मदद मिल सकती है? मैं jekyll से gatsby पर स्विच करने का प्रयास कर रहा हूं, लेकिन jekyll की अच्छी विशेषताओं में से एक तरल टेम्प्लेटिंग markdownify पाइप के माध्यम से किसी भी स्ट्रिंग (उदाहरण के लिए yaml फ़ाइल से) को पारित करने की अनुमति दी थी। यह तब उपयोगी था जब मेरे पास जानकारी के कई टुकड़े थे जिन्हें मैं पृष्ठ पर संरचित करना चाहता था लेकिन एक yaml फ़ाइल में एक साथ व्यवस्थित किया गया था। उदाहरण:

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

एक समान नोट पर, इस तरह से एक छवि लोड करना संभव नहीं लगता है, मेरे पास इसके लिए हैकी समाधान हैं, जैसे फ़ाइल में कहीं और सभी छवियों को आयात करना, लेकिन क्या वेबपैक को pages/ में किसी भी छवि की प्रतिलिपि बनाने का कोई तरीका है

स्रोत

andykais

👍3

सबसे उपयोगी टिप्पणी

छवियों पर, यदि आप gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp का उपयोग करते हैं, तो आप इन छवियों को क्वेरी कर सकते हैं।

उदाहरण के लिए देखें कि कैसे gatsbyjs.org लेखक अवतारों से पूछताछ करता है

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/ ब्लॉग/author.yaml

मार्कडाउन के माध्यम से yaml फ़ील्ड चलाने पर - आप उप-नोड्स बना सकते हैं जिन्हें आप मार्कडाउन के रूप में उनके मीडियाटाइप को निर्दिष्ट करते हैं और फिर gatsby-transformer-remark उन्हें html में बदल देंगे जैसे https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84f5e2a/packages /gatsby-source-contentful/src/normalize.js#L143

क्षमा करें यदि यह सुपर हाई-लेवल है और बहुत कार्रवाई योग्य नहीं है। Gatsby कस्टम डेटा ट्रांसफ़ॉर्मेशन पाइपलाइनों को सेटअप करना आसान बनाने पर केंद्रित है। सामान्य कार्यों के लिए, लोग उच्च-स्तरीय प्लगइन्स बना सकते हैं जो आपके लिए इस तरह की सामग्री को स्वचालित रूप से सेटअप करते हैं लेकिन मुझे नहीं पता कि किसी के पास अभी तक yaml => मार्कडाउन => html के लिए है।

ऐसा करने के लिए आपको Gatsby के डॉक्स में जाना होगा और यह समझने के लिए प्लगइन्स को देखना होगा कि आप जो करना चाहते हैं उसे कैसे करें।

KyleAMathews 7 नव॰ 2017

👍3

सभी 3 टिप्पणियाँ

उदाहरण के लिए देखें कि कैसे gatsbyjs.org लेखक अवतारों से पूछताछ करता है

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/ ब्लॉग/author.yaml

KyleAMathews 7 नव॰ 2017

👍3

सलाह के लिए धन्यवाद, मुझे नहीं लगता कि मैं अनिवार्य रूप से अभी एक गैट्सबी प्लगइन बनाने में इतना समय देने के लिए तैयार हूं। मेरे पास मेरा बेवकूफ समाधान है:

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

यह अभी भी निर्माण चरण के दौरान हो सकता है इसलिए यह मेरे उद्देश्यों के लिए काम करता है। मुझे लगता है कि समस्या यह है कि ग्राफिकल का उद्देश्य पहले डेटा बनाना और एकाधिक पृष्ठों के लिए समान टेम्पलेट का उपयोग करना है। मैं इस तरह एक 'मॉड्यूल' संरचना का अनुसरण कर रहा हूं:
```
पृष्ठ/
एक पेज/
index.js
_data.yml
संपत्तियां/
img1.png
एक अन्य पेज/
...

andykais 8 नव॰ 2017

👍2

ऐसा करने का एक आसान तरीका onCreateNode का उपयोग करके मार्कडाउन फ़ील्ड को संकलित करना होगा। https://www.gatsbyjs.org/tutorial/part-four/#programmatically -creating-pages-from-data और संकलित फ़ील्ड को createNodeField साथ एक नए फ़ील्ड के रूप में जोड़ें।

आप बस अपने gatsby-node.js . में ऐसा करेंगे

KyleAMathews 9 नव॰ 2017

👍2

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Gatsby: yaml फ़ाइलों को और अधिक शक्तिशाली बनाने में सहायता करें

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों