كيفية مصدر المحتوى مع Gatsby.js

راية كتبها ارتور ديدينكو (peacebot)

Gatsby.js هو مولد موقع ثابت قوي (مع قدرات ديناميكية) والذي يمكن استخدامه لإنشاء مواقع ويب فائقة الأداء. يحتوي على وظيفة مكون إضافي غني ومثالي لمدونتك الشخصية التالية أو هبوط المنتج أو صفحة المحفظة أو تطبيق التجارة الإلكترونية الصغير.

مصادر المحتوى

من الواضح إلى حد ما أنه عند إنشاء موقع الويب الخاص بك ، وبصرف النظر عن منطق الأعمال والأداء والأمان والرسومات ، فإنك تهتم بالمحتوى الفعلي المقدم للمستخدم النهائي.

قد تكون الحالة بسيطة إلى حد ما: فلنفترض أن لديك صفحة منتج بها أقسام تحتاج إلى تحريرها بواسطة فريق التسويق الذي لا يريد تعديل هاتين الجملتين h1 و p في محرر الشفرة.

قد يكون هناك سيناريو آخر هو صفحة المدونة الشخصية التي تحتوي على الكثير من المنشورات ، حيث يكون لكل منشور عنوان ومحتوى وأطنان من المعلومات الأخرى التي قد ترغب في عرضها.

بفضل الكثير من الإضافات التي كتبها المجتمع والمحافظون على Gatsby ، نحن محظوظون للاختيار من بين مجموعة واسعة من الخيارات للحصول على المحتوى الخاص بنا على الصفحة.

مصادر من مجلد المشروع مع نظام ملفات gatsby-source و gatsby-markdown-note

واحدة من أسهل الطرق للاستيلاء على المحتوى لدينا هو مصدره مباشرة من مجلد مشروعنا. يمكننا الحصول على أصول مثل الصور ، وأنواع المحتوى الأكثر تعقيدًا مثل منشورات المدونة المكتوبة في تخفيض السعر.

السيناريو 1: الوصول إلى الصور من مجلد الأصول لعرضها على الصفحة

نحتاج أولاً إلى تثبيت نظام ملفات gatsby-source-وإعداده في gatsby-config.js.

npm تثبيت نظام ملفات غاتسبي المصدر

في gatsby-config.js:

مع الأسطر أعلاه ، نقول لـ Gatsby أننا نريد السماح لـ GraphQL بالاستعلام عن كل مجلدات الأصول في مشروعنا الموجود في المسار المحدد.

الآن وقد تم إعداد المكون الإضافي ، يمكننا في الواقع الاستعلام عن مجلد أصولنا باستخدام استعلام graphQL التالي (sourceInstanceName هو معلمة عامل تصفية يتوافق مع الاسم في التكوين أعلاه):

لاحظ أنه لتتمكن من استخدام الصور التي يتم إرجاعها بواسطة هذا الاستعلام داخل المكون بدلاً من داخل الصفحة ، نحتاج إلى استخدام StaticQuery المتاحة من Gatsby.

يقبل StaticQuery سند الاستعلام حيث يمكننا استخدام استعلام GraphQL الخاص بنا من الأعلى وتقديم prop الذي يقدم كل ما نقوم بتزويده به والذي لديه حق الوصول إلى البيانات التي لا تعدو أن تكون مجمّعًا لملفاتنا التي تم الاستعلام عنها.

إذا كنت تستفسر عن نفس الصور ولكنك تريد استخدامها داخل إحدى صفحاتك ، فيمكنك الوصول إليها مباشرةً من props.data

السيناريو 2: الوصول إلى صورة واحدة معينة لعرضها على الصفحة

للوصول إلى صورة واحدة معينة باسمها ، يتعين علينا تكييف استعلام GraphQL الخاص بنا قليلاً. وإلا يمكننا استخدامه بالطرق الموضحة أعلاه في السيناريو الأول باستخدام StaticQuery في المكون و props.data في الصفحة.

دعنا نحدد المسار المطلق للملف ونستخدم regex لكرز اختيار الصورة المطلوبة.

السيناريو 3: الوصول إلى منشور المدونة المكتوب بالتخفيض إلى جانب المادة الأمامية

نظرًا لأن غاتسبي يستخدم غالبًا كقالب للمدونة ، فإنه يوفر طريقة ملائمة للغاية للعمل مع مدونات المدونات المكتوبة في تخفيض السعر. للوصول إلى منشورات تخفيض السعر ، نحتاج أولاً إلى تعديل إعداداتنا قليلاً حتى يعرف Gatsby مكان تواجد ملفات تخفيض السعر لدينا.

نحن نستخدم نظام ملفات gatsby-source-لتحقيق ذلك:

لتكون قادرًا على العمل مع ملفات تخفيض السعر بطريقة مريحة حقًا ، نحتاج أيضًا إلى إعداد المكون الإضافي gatsby-transformer-الملاحظة. لاحظ كيف نضيف المكونات الإضافية الأخرى داخل gatsby-transformer-الملاحظة مثل gatsby-الملاحظة-images أو gatsby-الملاحظة-prismjs. هذه موجودة هنا حتى نتمكن من تضمين الصور مباشرةً في عمليات تخفيض السعر الخاصة بنا وتسليط الضوء على مقاطع الكود باستخدام prismjs ، على التوالي.

مع إعداد كل ما سبق ، يمكننا الآن الاستعلام عن منشورات تخفيض السعر لدينا مع الاستعلام (يمكننا استخدام الفرز بطريقة ملائمة للحصول على منشورات المدونة الخاصة بنا بترتيب زمني وتصفية للتأكد من أننا لا نستفسر إلا عن عمليات تخفيض السعر الموجودة في مجلد المدونة الخاص بـ مشروعنا):

نحن نعلم بالفعل أنه يمكننا الآن الوصول إلى منشورات مدونات تخفيض السعر لدينا في أي صفحة عبر هذا الموقع فقط.

على سبيل المثال ، لدينا إمكانية الوصول إلى المادة الأمامية التي لا تعدو كونها هيكلًا يشبه JSON ندرجه في عملية تخفيض السعر لدينا.

هنا هو مثال سريع:

لقد قمنا بتضمين العنوان والتاريخ ، ولكن لا يمكنك إضافة أي معلمات أخرى تريد الوصول إليها من خلال الاستعلام (مثل العلامات في شكل صفيف):

CMS مقطوعة الرأس

في بعض الأحيان ، ليس من المناسب حقًا تغيير جميع أنواع المحتوى مثل الصور أو منشورات المدونة في محرر الشفرة. علاوة على ذلك ، قد لا يكون المستخدم النهائي على دراية بكيفية التنقل عبر التعليمات البرمجية وقد يتطلب حلاً أكثر وضوحًا.

السيناريو 4: الوصول إلى نموذج المحتوى المعقد من CMS وعرض المحتويات على الصفحة

هذا هو المكان الذي تأتي فيه CMS مقطوعة الرأس. تخيل سيناريو حيث تقوم بإنشاء صفحة منتج ثابت مع Gatsby وتمريرها إلى قسم التسويق المسؤول عن كتابة النصوص والصور على الصفحة. لقد قمت بإنشائها باستخدام الكود - فهي تتفاعل مع واجهة مستخدم سهلة الاستخدام تسهل تغيير أي محتوى. مدهش!

دعونا نستكشف كيف سنفعل ذلك مع Gatsby.js!

من مصادر قانع

لتتمكن من الحصول على مصدر من Contentful ، ستحتاج إلى حساب على https://www.contentful.com/. بعد التسجيل ، سوف تحصل على مثال بسيط للمشروع سنستخدمه لأغراض التعلم.

الآن لنبدأ بتثبيت gatsby-source-contentful وإضافته إلى config الخاصة بنا.

تثبيت npm - حفظ غاتسبي المصدر قانع

في gatsby-config.js ، نحتاج إلى إضافة المكون الإضافي وتوفير spaceId و accessToken الخاصين بنا ويمكن العثور عليهما في الإعدادات -> مفاتيح API بلوحة معلومات مشروعنا:

لوحة القيادة محتوى

لاحظ أنه ليس من الجيد تعريض accessToken لملف التكوين الخاص بك مباشرةً ، بحيث يكون مرئيًا للجميع على GitHub. لأغراض التدريب ، سأدرجه في الكود الخاص بهذا البرنامج التعليمي ، لكن حاول استخدام متغيرات البيئة لحماية مفاتيحك كما يمكن رؤيته في المثال أعلاه. إذا كانت هذه هي المرة الأولى التي ترى فيها متغير البيئة ، فلا تقلق ، فيمكنك فهم المفهوم من هذا المنشور.

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

يعد gatsby-node.js الخاص بنا مسؤولاً عن إنشاء صفحات برمجيًا من منشورات تخفيض الأسعار الموجودة لدينا في مجلد المدونة. بشكل افتراضي ، يستخدم allMarkdownRemark استعلامًا ، والذي سيصدر أيضًا تخفيض المحتوى الجيد الذي لا نحتاج إليه. دعنا نتكيف مع طلب البحث الخاص بنا لتزويد فقط بالملفات الموجودة في مجلد مشروعنا:

في gatsby-node.js أضفنا مرشحًا وضبطناه على / blog /:

نحن الآن على استعداد لمصدر المحتوى من Contentful. في صفحة جديدة باسم contentful.js ، نريد أولاً الاستعلام عن أصولنا التي أنشأها Contentful بالنسبة لنا. في ذلك الوقت ، لدينا نوع محتوى واحد مثير للاهتمام يسمى الدورة التدريبية والذي يحتوي على جميع العناصر اللازمة لتدريبنا.

نوع المحتوى - الدورة

من السهل الاستعلام عن الأصول المضمونة باستخدام GraphQL ، وكل ما يتعين علينا القيام به للحصول على جميع الإدخالات التي من النوع Course هي تشغيل استعلام allContentfulCourse.

ربما تكون قد خمنت بالفعل أنه يمكننا الاستعلام عن نوع المحتوى الخاص بك باستخدام allContentfulYourCustomType. لاحظ كيف نقوم بتصفية دوراتنا على أساس اللغة ، وإلا فإننا سنحصل على نسخ مكررة من كل دورة تدريبية في كل لغة محددة في Contentful. هذا خاص بهذه الحالة ، لأن كل دورة بها ترجمة:

من استكشاف المحتوى الخاص بنا على المحتوى ، يمكننا أن نرى أن كل دورة لها عنوان ومدة ووصف قصير وصورة. لقد قمنا بتضمين تلك الموجودة في استعلامنا ويمكننا الآن الوصول إليها من خلال المكون الخاص بنا عبر this.props.data.

نموذج محتوى الدورة

خلاصة

في هذا البرنامج التعليمي الصغير ، تعلمت عدة طرق لتحديد أنواع المحتوى المختلفة في Gatsby. لقد تعلمت أيضًا كيفية دمجها في مشروع واحد ، وتجنب تعارضات المصادر المحتملة عن طريق تحديد ما نريد الاستعلام عنه بدقة من أي مصدر.

شكرا للقراءة! أتمنى أن تكون قد استمتعت بقراءة هذا المنشور بقدر ما استمتعت بكتابته! إذا كانت لديك أي أسئلة أو تريد طرح مناقشة ، فلا تتردد في التواصل معي عبر تويتر. سأكون سعيدًا إذا قمت بالضغط على زر "متابعة" حتى لا تفوت أي مشاركات في المستقبل ستصدرها

كما هو الحال دائمًا ، يمكنك العثور على رمز هذا البرنامج التعليمي هنا على github

نشرت أصلا في divdev.io