فك اقتران دروبال 8 وجاتسبي جي إس: الثنائي عالي السرعة

يحب فريقنا استكشاف واستخدام الاتجاهات الساخنة في التنمية ، أحدها هو هندسة دروبال المنفصلة. تم تخصيص مقالنا السابق لاستخدام دروبال المنفصل مع JSON.API ، وسيكون بطل قصتنا اليوم هو "غاتسبي العظيم". هل يبدو مثل بطل الكتاب الشهير؟ لا ، Gatsby.JS هي أداة جافا سكريبت جديدة وساخنة ، لكنها تعد بأن تكون مشهورة بنفس القدر وتستحق مائة كتاب! في هذا المنشور ، سنناقش مبدأ عملها وفوائد استخدام دروبال 8 المنفصل و Gatsby.JS. وبالطبع ، يمكنك دائمًا الاعتماد على خبراء دروبال في تنفيذ كل ذلك.

Gatsby.JS: ما هو وكيف يعمل

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

• React.JS - مكتبة JavaScript المشهورة بشكل مذهل لبناء واجهات معقدة
• GraphQL - لغة الاستعلام فائقة الكفاءة
• Webpack - أداة تجميع وحدات JavaScript الرائعة

تم تصميم Gatsby.JS لبناء مواقع ثابتة سريعة النيران. يقوم بجلب البيانات إليهم من أي مصادر على الإطلاق وينشئ محتوى ثابتًا باستخدام GraphQL. في الوقت الحالي ، هناك أكثر من 500 مكون إضافي للمصدر لتأسيس الاتصال بين مصادر بيانات معينة و Gatsby. تشمل المصادر YouTube و Twitter و Hubspot و Shopify و Trello و Vimeo و Google Sheets وأنظمة إدارة المحتوى مثل Drupal و WordPress وما إلى ذلك.

فصل دروبال 8 وجاتسبي جي إس: الثنائي العظيم وفوائده

تعد Gatsby و Drupal 8. واحدة من أكثر التوليفات فائدة وأكثرها إثارة في الوقت الحالي هي Gatsby و Drupal 8. وفقًا لبنية Drupal المنفصلة أو بدون رأس ، فإن Drupal يعمل كخلفية فقط ، بينما Gatsby.JS يتعامل مع طبقة العرض التقديمي.

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

ما الذي يجعل هذه المجموعة مفيدة للغاية؟ تجمع بساطة وسرعة الموقع الثابت بشكل مثالي مع قوة ومرونة الواجهة الخلفية التي يوفرها دروبال 8 CMS. فيما يلي بعض الميزات التي سنحصل عليها في النهاية على الأقل:

• سرعة لا مثيل لها. يجلب Gatsby.JS جميع صفحات الموقع مسبقًا بدلاً من الاستعلام عن قاعدة البيانات في كل مرة عند الطلب ، مما يجعل التنقل ممتعًا وسريعًا بشكل مذهل. Gatsby هو مولد PWA ثابت (تطبيق ويب تقدمي). يجلب بكفاءة ملفات HTML و CSS و JS الهامة فقط.
• خطوه سهله. لن تكون هناك حاجة لعمليات نشر وإعداد مرهقة مع Gatsby. يبني موقعك كملفات ثابتة يمكن نشرها بسرعة في أي مكان.
• ميزات التخصيص الرائعة. يمكن لمجموعات دروبال وجاتسبي أن تتميز بإمكانيات رائعة لتخصيص المستخدم والمصادقة.
• تحرير محتوى رائع. عادة ، تحتاج مولدات المواقع الثابتة إلى كتابة محتوى في Markdown ، مما قد يكون مرهقًا لمحرري المحتوى. ولكن تم حل المشكلة باستخدام دروبال 8 كخلفية! تعد ميزات إنشاء محتوى دروبال 8 متعة لأي محرر محتوى.

أحد الأمثلة على استخدام دروبال 8 وجاتسبي المنفصلين هو الموقع التجريبي لمجلة Umami Food Magazine. تم بناء الموقع على توزيع دروبال بدون رأس Contenta CMS مع Gatsby.JS.

إذا كان هذا يبدو فاتح للشهية بدرجة كافية ، فاتصل بفريق Drupal الآن للجمع بين Drupal 8 المنفصل مع Gatsby.JS من أجلك! أو تابع القراءة حول بعض تفاصيل التنفيذ.

بعض تفاصيل استخدام دروبال 8 و Gatsby.JS

في الإعداد المنفصل ، يجب أن يكون موقعي Drupal 8 و Gatsby مستعدين للعمل معًا. سيتم توصيلهم عن طريق البرنامج المساعد المصدر الخاص بـ Gatsby لـ Drupal الذي يجلب البيانات ، بما في ذلك الصور ، من مواقع ويب Drupal 8 مع تثبيت JSON API.

لذلك من الضروري تثبيت وتمكين JSON API و JSON API الإضافات التي ساهمت بوحدات دروبال ، بالإضافة إلى تمكين وحدة التسلسل الأساسية على موقع دروبال الخاص بنا.

وجهتنا التالية هي التكوين - خدمات الويب - الكتابة فوق واجهة برمجة تطبيقات JSON .

في الإعدادات ، نحتاج إلى التأكد من أن بادئة المسار لـ JSON API هي / jsonapi . هذا ما سيحتاج موقع Gatsby إلى معرفته.

في الأشخاص - الأدوار - الأذونات نمنح حق الوصول إلى قائمة موارد واجهة برمجة تطبيقات JSON للمستخدمين بكل الأدوار ، بما في ذلك المجهول.

موقع Drupal الخاص بنا جاهز لتكامل Gatsby ، ونحتاج الآن إلى إعداد موقع Gatsby الخاص بنا. يبدأ بتثبيت Gatsby's CLI:

تثبيت npm - gatsby-cli العالمي

ثم نتبع جميع خطوات إنشاء الموقع في وثائق "البدء". يوفر Gatsby أيضًا مشغلات معدة مسبقًا لإنشاء الموقع.

ثم نقوم بتشغيل Gatsby بالأمر ، وبعد ذلك يجب أن يصبح موقع Gatsby متاحًا على المضيف المحلي: 8000:

غاتسبي

يجب بعد ذلك تثبيت البرنامج المساعد المصدر المذكور أعلاه لدروبال على موقع Gatsby. بعد ذلك ، نضيف قطعة الكود من وثائق البرنامج المساعد إلى ملف gatsby-config.js. يجب تغيير عنوان URL إلى أحد مواقع Drupal الخاصة بنا.

المكونات الإضافية: [
{
حل: "جاتسبي-مصدر-دروبال" ،
والخيارات: {
baseUrl: `` https: // our-site-name.com / `،
apiBase: `api` ، // اختياري ، يتم تعيينه افتراضيًا على` jsonapi`
} ،
} ،
]

ثم نقوم بتهيئة موقع Gatsby الخاص بنا لجلب المحتوى الذي نحتاجه بالضبط من Drupal. نحتاج إلى إنشاء الصفحات المناسبة في / src / pages على موقع Gatsby وإضافة الكود الخاص باستيراد React إلى ملف JS.

وقمنا بتكوين GraphQL على المضيف المحلي: 8000 / ___ graphql للاستعلام عن موقع دروبال بالطريقة التي نريدها بالضبط.

كل هذا يتوج مع الأمر الأخير لنشر موقع Gatsby الخاص بنا مع بيانات دروبال:

بناء غاتسبي

هذا مجرد وصف موجز للحصول على عمل دروبال 8 مع غاتسبي. خبراؤنا مستعدون لإجراء الإعداد وفقًا لرغباتك تمامًا.

استمتع بمزيج من دروبال 8 المنفصل و Gatsby.JS!

إذا كنت مهتمًا باستخدام Drupal 8 و Gatsby.JS المنفصلين ، إما في مشروع قائم أو في مشروع جديد ، فاتصل بمطوري Drupal. يتمتع فريق Drupal 8 لدينا بخبرة كبيرة في تكامل الجهات الخارجية. سننصحك بأفضل إعداد منفصل ونقوم بتنفيذه بسلاسة بالطبع. لنستمتع بأحدث وأروع التقنيات!