Gatsby: تساعد في جعل ملفات yaml أكثر قوة

في الصور ، إذا كنت تستخدم 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/ بلوق / المؤلف

عند تشغيل حقول yaml من خلال تخفيض السعر - يمكنك إنشاء العقد الفرعية التي تحدد نوعها الوسيط على أنها علامة تخفيض ثم ستقوم gatsby-transformer-note بتحويلها إلى html ، على سبيل المثال https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84f5e2a/packages /gatsby-source-contentful/src/normalize.js#L143

آسف إذا كان هذا على مستوى عالٍ للغاية وليس قابلاً للتنفيذ. يركز Gatsby على تسهيل إعداد خطوط أنابيب مخصصة لتحويل البيانات. بالنسبة للمهام الشائعة ، يمكن للأشخاص إنشاء مكونات إضافية ذات مستوى أعلى والتي تقوم بإعداد أشياء مثل هذه تلقائيًا ولكني لا أعرف أن أي شخص لديه بعد yaml => markdown => html.

لتحقيق ذلك ، ستحتاج إلى الغوص في مستندات Gatsby وإلقاء نظرة على المكونات الإضافية لفهم كيفية القيام بما تريد القيام به.

شكرًا على النصيحة ، لا أعتقد أنني مستعد لتخصيص الكثير من الوقت في إنشاء مكون إضافي لبرنامج gatsby الآن. لدي حل naiive مثل ذلك:

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

لا يزال من الممكن أن يحدث هذا أثناء مرحلة الإنشاء ، لذا فهو يعمل من أجل أغراضي. أعتقد أن المشكلة هي أن Graphql تهدف إلى بناء البيانات أولاً واستخدام نموذج مماثل لصفحات متعددة. أنا أتبع هيكل "وحدة" كالتالي:
""
صفحات /
صفحة واحدة/
index.js
_data.yml
الأصول/
img1.png
صفحة أخرى /
...

تتمثل إحدى الطرق البسيطة للقيام بذلك في تجميع حقول العلامات التجارية باستخدام onCreateNode. https://www.gatsbyjs.org/tutorial/part-four/#programmatically -creating-pages-from-data وأضف الحقل المترجم كحقل جديد مع createNodeField .

كنت ستفعل ذلك في gatsby-node.js