كيفية إنشاء مدونة React و Gatsby مدعومة في حوالي 10 دقائق

رفاق / صورة لجنيفيف بيرون-ميجنون على Unsplash
إخلاء المسئولية: تمت كتابة هذا الإصدار من Gatsby الإصدار 1 ، الإصدار الثاني تم إصداره للتو وله بعض التغييرات التي تم إجراؤها. سأعمل على برنامج تعليمي آخر لذلك.

Gatsby عبارة عن مولد موقع ثابت سريع يعمل على ReactJS.

منشئ موقع ثابت (SSG) هو حل وسط بين موقع ثابت ثابت HTML HTML و CMS في مهب كامل (نظام إدارة المحتوى) ، مثل وورد.

يمكن استخدام SSG لإنشاء صفحات HTML لمواقع الويب التي تعتمد على المحتوى (مثل المدونات). كل ما يتطلبه الأمر هو بيانات محتوى الصفحة والقالب المملوء بالمحتوى.

سيتم تقسيم هذه المشاركة إلى خمسة أقسام:

  1. ابدء.
  2. إنشاء مكونات التخطيط.
  3. إنشاء مشاركات المدونة.
  4. توليد صفحات جديدة من بيانات نشر المدونة.
  5. أنشئ قائمة بملفات تخفيض الأسعار في موقعنا في الصفحة المقصودة.

سنأخذ غوصًا عميقًا في Gatsby وبعض معالمه من خلال إنشاء مدونة ثابتة وهميّة تُدعى CodeStack. نموذج بالحجم الطبيعي هو مبين أدناه. لنذهب! ️

صفحة قائمة المدونة / منشور مدونة واحد

1. البدء

المتطلبات الأساسية

أولاً ، تأكد من تثبيت Node.js على نظامك. إذا لم يكن كذلك ، فانتقل إلى nodejs.org وقم بتثبيت إصدار حديث لنظام التشغيل لديك.

أيضا ، تفترض هذه المقالة أن لديك فهم ReactJS.

تثبيت CLI

يحتوي Gatsby على أداة سطر أوامر توفر أوامر مفيدة مثل:

  • gatsby new: لسقالات مشروع Gatsby جديد.
  • تطوير gatsby: لإطلاق خادم تطوير ويب يعمل على إعادة التحميل.
  • gatsby build: لبناء نسخة جاهزة للإنتاج من المشروع.

للتثبيت ، اكتب ما يلي على جهازك واضغط على إدخال:

npm install --global gatsby-cli

يتيح إنشاء مدونة codestack لمجلد مشروع والتنقل فيه.

gatsby new codestack-blog && cd $ _

إذا قمت بتنفيذ تطوير gatsby في مجلد المشروع ، فيجب أن يكون الموقع الذي تم تصميمه بالسقالة كما يلي:

مضيفا الإضافات

غاتسبي لديه مجموعة كبيرة ومتنامية من الإضافات. إنها حزم Node.js التي تتفاعل مع واجهات برمجة تطبيقات Gatsby.

يمكن تثبيتها عبر NPM (Node Package Manager) على الجهاز ، ولديها عمومًا ثلاث فئات: الإضافات الوظيفية ، والمصدرة والمحول.

الإضافات الوظيفية

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

  • gatsby-plugin-react-helmet: يسمح بتعديل علامات الرأس. لاحظ أنه مثبت بالفعل في مشروعنا سقالة.
  • gatsby-plugin-catch-links: يعترض الروابط المحلية من تخفيض السعر والصفحات الأخرى التي لا تتفاعل ، ويقوم بوظيفة الدفع من جانب العميل لتجنب قيام المتصفح بتحديث الصفحة.

قم بتثبيت المكونات الإضافية ، أو فقط المكون الإضافي الثاني فقط.

npm تثبيت gatsby-plugin-react-helmet gatsby-plugin-catch-links

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

module.exports = {
  بيانات الموقع: {
    العنوان: `Gatsby Default Starter` ،
  }،
  الإضافات: [
    `غاتسبي البرنامج المساعد في رد الفعل، helmet`،
    `غاتسبي البرنامج المساعد تجميع مياه الأمطار links`،
  ]،
}

الإضافات المصدر

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

  • gatsby-source-filesystem: مصادر البيانات حول الملفات من نظام ملفات الكمبيوتر الخاص بك.
npm تثبيت نظام ملفات غاتسبي المصدر

تحديث ملف gatsby-config.js:

module.exports = {
  بيانات الموقع: {
    العنوان: `Gatsby Default Starter` ،
  }،
  الإضافات: [
    `غاتسبي البرنامج المساعد في رد الفعل، helmet`،
    `غاتسبي البرنامج المساعد تجميع مياه الأمطار links`،
    {
      حل: `gatsby-source-filesystem` ،
      خيارات: {
        المسار: `$ {__ dirname} / src / pages` ،
        الاسم: "الصفحات" ،
      }،
    }
  ]،
}

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

ملحقات المحولات

تعمل هذه الإضافات على تحويل البيانات الأولية من العقد إلى تنسيقات بيانات قابلة للاستخدام. على سبيل المثال ، سنحتاج إلى:

  • gatsby-transformer-ملاحظه: هذا يحول منشورات المدونة المكتوبة في ملفات تخفيض السعر
npm تثبيت غاتسبي المحولات الملاحظة

قم بتحديث ملف gatsby-config.js مرة أخرى.

module.exports = {
  بيانات الموقع: {
    العنوان: `Gatsby Default Starter` ،
  }،
  الإضافات: [
    `غاتسبي البرنامج المساعد في رد الفعل، helmet`،
    `غاتسبي البرنامج المساعد تجميع مياه الأمطار links`،
    {
      حل: `gatsby-source-filesystem` ،
      خيارات: {
        المسار: `$ {__ dirname} / src / pages` ،
        الاسم: "الصفحات" ،
      }،
    }،
    `غاتسبي-محول-remark`،
  ]،
}
أحسنت! / الائتمان: نايجل باين

2. إنشاء مكونات تخطيط

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

من المجلد الجذر ، نلقي نظرة على src / تخطيطات. ستكتشف ملف index.js حيث نحدد مكونات التخطيط. index.css جاء بالفعل مع الأنماط.

بعد استكشاف ملف index.js ، سترى أنه قد تم بالفعل إنشاء مكونين: الرأس و TemplateWrapper. في TemplateWrapper ، نلف محتويات موقعنا بمكونات تخطيط نرغب في تواجدها عبر عدة صفحات.

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

بادئ ذي بدء ، قم بإنشاء مجلد جديد وملف CSS على src / styles / layout-overide.css. أضف إلى قائمة الواردات في ملف index.js. نحتاج إلى استيراده بعد index.css لتجاوز بعض قواعد الأنماط الحالية.

استيراد رد من "رد فعل"
استيراد PropTypes من "prop-types"
استيراد الرابط من "رابط gatsby"
استيراد خوذة من "رد فعل خوذة"
استيراد "./index.css"
استيراد "../styles/layout-overide.css" ؛

افتح layout-overide.css والصق قواعد الأنماط التالية. لا حاجة لمعرفة هذه.

* {
    الخلفية: # f5f5f5؛
    لون أسود؛
}
html {
    الارتفاع: 100 ٪ ؛
}
الجسم {
    الارتفاع: 100 ٪ ؛
    الحدود: 5px صلب # ffdb3a ؛
}
h1 {
    حجم الخط: 1.5rem ؛
    ارتفاع الخط: 0.5rem ؛
}
p ، div {
    حجم الخط: 16 بكسل ؛
}

تحديث مكون الرأس.

const Header = () => (
  
    
     

        <رابط إلى = "/"           النمط = {{             لون أسود'،             textDecoration: 'لا شيء' ،           }}         >           CodeStack                        

أيضًا ، قم بإنشاء مكون الشريط الجانبي.

const الشريط الجانبي = (الدعائم) => (
     {props.title}. {props.description}

نرغب في أن يتصرف الشريط الجانبي والمكونات {children ()} المقدمة بطريقة مستجيبة مثل:

نظرًا لأنه لا توجد طريقة سهلة لتحديد استعلامات الوسائط في React ، فقد وجدت مكتبة تسمى react-media ، وهي مكون لاستعلام وسائط CSS لـ React. تثبيته.

تثبيت npm - حفظ رد فعل الوسائط

يوفر مكونًا يستمع للمطابقات إلى استعلام وسائط CSS ويعرض أشياء بناءً على ما إذا كان الاستعلام مطابقًا أم لا.

إضافته إلى قائمة الواردات في ملفنا.

استيراد الوسائط من "وسائل الإعلام التفاعلية"

يتيح تخطيط كل شيء في مكونات (Header ، Sidebar ، و children ()) بالطريقة التي نرغب في TemplateWrapper. قم بإجراء التغييرات التالية (العفو عن المكونات المشينة من اسمي):

const TemplateWrapper = ({children}) => (
  
    <خوذة       title = "Gatsby Default Starter"       الفوقية = {[         {name: "description"، content: "Sample"}،         {الاسم: "الكلمات الرئيسية" ، المحتوى: "نموذج ، شيء ما"}       ]}     />     <رأس />     
               {Match =>           اعواد الكبريت ؟ (             
              
{children ()}
                       ): (             
              
                {الأطفال()}               
                <الشريط الجانبي                   عنوان = "Codestack"                   description = "مقالات عن React و Node.js. تتم كتابة جميع المقالات بواسطتي. Fullstack Web Development."                 />                 <الشريط الجانبي                   title = "حول المؤلف"                   description = "أنا مطور ويب مكدس متخصص في React و Node.js ومقره في نيجيريا."                 />                                       )         }               
حصلت على هذا! Credit / الائتمان: ليفون

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


        {Match =>
          اعواد الكبريت ؟ (
            ... أشياء لعرضها ...
          ): (
            ... أشياء لعرضها ...
          )
        }
      
وتجديد الثلاثية. إذا كانت الحالة صحيحة ، فإن المشغل بإرجاع قيمة expr1 ؛ وإلا ، فإنها تُرجع قيمة expr2.

إذا لاحظت ذلك ، فقد استخدمنا Flexbox أيضًا لتخطيط مواضع الأطفال () ومكونات الشريط الجانبي.

Run gatsby development على المحطة الطرفية وينبغي أن ننظر بلوق ثابت لدينا بهذه الطريقة الآن:

أخذ الشكل

3. إنشاء مشاركات المدونة

الآن دعنا ندخل في إنشاء مشاركات مدونة حقيقية. يستخدم Gatsby GraphQL لجلب البيانات من مصدر واحد أو عدة مصادر مثل القرص المحلي و Wordpress API وما إلى ذلك.

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

في هذا المنشور ، سنقوم بتحميل البيانات من ملفات تخفيض السعر التي سننشئها على القرص المحلي لدينا. يتوقع المكون الإضافي لنظام ملفات gatsby-source الذي قمنا بتكوينه مسبقًا أن يكون المحتوى الخاص بنا في src / pages ، لذلك نحن نضعه بالضبط!

من الممارسات المعتادة لنشر المدونات تسمية المجلد باسم MM-DD-YYYY-title. يمكنك تسميته ما تريد أو مجرد وضع ملف تخفيض السعر داخل مجلد / pages.

لنقم بإنشاء مجلد src / pages / 12–22–2017-first-post ، ووضع index.md في الداخل. كتابة:

---
المسار: "/ مرحبا العالم"
التاريخ: "2017-07-12T17: 12: 33.962Z"
العنوان: "My First Gatsby Post"
---
Oooooh-weeee ، أول وظيفة بلوق بلدي!
أول وظيفة إبسوم هو مفتاح النجاح. مبروك ، لقد لعبت بنفسك. أحط نفسك بالملائكة. احتفل بالنجاح الصحيح ، الطريقة الوحيدة ، التفاح.
 
المفتاح هو شرب جوز الهند وجوز الهند الطازج ، ثق بي. بياض البيض ونقانق الديك الرومي ونخب القمح والماء. بالطبع لا يريدون منا أن نتناول وجبة الإفطار ، لذلك سنستمتع بوجبة الإفطار لدينا.

يشار إلى الكتلة المحاطة بشرطات باسم المادة الأمامية. سيتم التعرف على البيانات التي نحددها هنا ، وكذلك ملفات Markdown الأخرى ، من خلال البرنامج المساعد gatsby-transformer-note.

سيقوم المكون الإضافي بتحويل جزء البيانات الوصفية للمادة الأولى من ملف تخفيض السعر إلى المادة الأمامية وجزء المحتوى (Yippeeee ، أول مدونة لي!) إلى HTML.

عندما نبدأ في إنشاء صفحات المدونة مباشرةً من ملفات تخفيض الأسعار في القسم 4 (القسم التالي) ، سيتم استخدام المسار لتحديد مسار عنوان URL لتقديم الملف. على سبيل المثال ، سيتم تقديم ملف تخفيض السعر أعلاه في المضيف المحلي: 8000 / hello-world.

قبل ذلك ، يتيح إنشاء قالب يعرض أي ملف تخفيض في صفحة المدونة الخاصة به. قم بإنشاء ملف src / templates / blog-post.js (يرجى إنشاء مجلد thesrc / templates).

استيراد رد فعل من "رد فعل" ؛
استيراد خوذة من "رد فعل خوذة" ؛
قالب وظيفة التصدير الافتراضية ({
  البيانات
}) {
  const post = data.markdownRemark؛
  إرجاع (
    
            
        

تحليل {post.frontmatter.title}         
              )؛ }

لقد أعددنا مكون القالب لاستلام كائن بيانات سيأتي من استعلام GraphQL الذي نحن بصدد كتابته.

مرة أخرى ، مطلوب استعلام GraphQL لجلب البيانات إلى المكون. يتم حقن نتيجة الاستعلام بواسطة Gatsby في مكون القالب كبيانات و markdownRemark.

سوف نجد أن خاصية markdownRemark تحتوي على جميع تفاصيل ملف Markdown.

يتيح الآن فعلا إجراء الاستعلام. يجب وضعه أسفل مكون القالب:

صفحة const constQuery للتصدير = graphql`
  استعلام BlogPostByPath ($ path: String!) {
    markdownRemark (frontmatter: {path: {eq: $ path}}) {
      أتش تي أم أل
      المادة الأمامية {
        التاريخ (formatString: "MMMM DD ، YYYY")
        مسار
        عنوان
      }
    }
  }
`
.

إذا لم تكن معتادًا على GraphQL ، سأحاول تفصيل ما يجري هنا. لمعرفة المزيد حول GraphQL ، ضع في اعتبارك هذا المورد الممتاز.

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

هذا يعني أنه يجب عليك إنشاء خادم GraphQL الخاص بك. لحسن الحظ بالنسبة لنا ، يأتي GatsbyJS مع خادم GraphQL الخاص به.

في التعليمة البرمجية أعلاه ، BlogPostByPath هو الاستعلام الأساسي الذي سيؤدي إلى إرجاع منشور مدونة. سيتم إرجاعها كبيانات للحقن في مكون القالب.

نجتاز BlogPostByPath وسيطة المسار $ لإرجاع منشور مدونة مرتبط بالمسار الذي نعرضه حاليًا.

وعلاوة على ذلك ، أذكر markdownRemark حولت ملفات تخفيض السعر لدينا. سيتم التعامل معها كخاصية ستتوفر محتوياتها عبر data.markdownRemark.

يمكننا الوصول إلى HTML عبر data.markdownRemark.html. أيضًا ، يمكن الوصول إلى محتوى المادة الأمامية الذي أنشأناه مع مجموعة من الأحجار عبر data.markdownRemark.title إلخ.

يجب أن يبدو blog-template.js بأكمله كما يلي:

استيراد رد فعل من "رد فعل" ؛
استيراد خوذة من "رد فعل خوذة" ؛
قالب وظيفة التصدير الافتراضية ({
  البيانات
}) {
  const post = data.markdownRemark؛
  إرجاع (
    
            
        

تحليل {post.frontmatter.title}         
              )؛ }

صفحة const constQuery للتصدير = graphql`
  استعلام BlogPostByPath ($ path: String!) {
    markdownRemark (frontmatter: {path: {eq: $ path}}) {
      أتش تي أم أل
      المادة الأمامية {
        التاريخ (formatString: "MMMM DD ، YYYY")
        مسار
        عنوان
      }
    }
  }
`
.

عند هذه النقطة:

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

حلو!

4. إنشاء صفحات جديدة من بيانات نشر المدونة.

يوفر Gatsby واجهة برمجة تطبيقات Node ، والتي توفر وظائف لإنشاء صفحات ديناميكية من منشورات المدونة. يتم عرض واجهة برمجة التطبيقات هذه في ملف thegatsby-node.js في الدليل الجذر لمشروعك. يمكن لهذا الملف تصدير العديد من واجهات برمجة التطبيقات Node لكننا مهتمون بـ createPages API.

استخدم الكتلة التالية من مقتطف الشفرة كما هو منصوص عليه في المستندات الرسمية (لاحظ أنه تم تعيين مسار blogPostTemplate ليعكس مسارنا):

const مسار = تتطلب ('مسار') ؛
export.createPages = ({boundActionCreators، graphql}) => {
  const {createPage} = boundActionCreators؛
const blogPostTemplate = path.resolve (`src / templates / blog-post.js`)؛
إرجاع graphql (`{
    allMarkdownRemark (
      رتب: {ترتيب: DESC ، الحقول: [frontmatter___date]}
      الحد: 1000
    ) {
      حواف {
        عقدة {
          مقتطفات (تقليم الطول: 250)
          أتش تي أم أل
          هوية شخصية
          المادة الأمامية {
            تاريخ
            مسار
            عنوان
          }
        }
      }
    }
  } `)
    .ثم (النتيجة => {
      if (result.errors) {
        return Promise.reject (result.errors)؛
      }
result.data.allMarkdownRemark.edges
        .forEach (({node}) => {
          createPage ({
            المسار: node.frontmatter.path ،
            المكون: blogPostTemplate ،
            السياق: {} // يمكن تمرير بيانات إضافية عبر السياق
          })؛
        })؛
    })؛
}

تحقق مما اذا كان يعمل. أوصي بإغلاق نافذة broswer الخاصة بك ، وإيقاف خادم gatsby لتطوير الخادم من المحطة الطرفية باستخدام ctrl c. الآن قم بتطوير gatsby مرة أخرى وافتح http: // localhost: 8000 / hello-world.

نعم

قم بإنشاء ملف آخر src / pages / 24–12–2017-learning-network / index.md

---
المسار: "/ آخر واحد"
التاريخ: "2017-07-12T17: 12: 33.962Z"
العنوان: "My Second Gatsby Post"
---
في الحياة ، ستكون هناك حواجز على الطرق لكننا سنأتي بها. التنبيه القماش خاص. لا تلعب نفسك أبدًا. المفتاح لتحقيق المزيد من النجاح هو الحصول على تدليك مرة واحدة في الأسبوع ، وهو أمر مهم للغاية ، ومفتاح رئيسي ، حديث القماش.
  // some css network code  

مرة أخرى ، أغلق نافذة broswer الخاصة بك ، وإيقاف gatsby تطوير الخادم. تشغيل gatsby تطوير مرة أخرى وفتح http: // localhost: 8000 / آخر واحد. هذا يظهر:

استمر إذا كنت ترغب في إنشاء صفحاتك الخاصة.

5. قم بإنشاء قائمة بملفات تخفيض علامات الموقع في الصفحة المقصودة.

توجد الصفحة المقصودة الافتراضية التي تأتي مع موقع Gatsby ذو سقالة في src / pages / index.js. هذا هو المكان الذي سنحدد فيه قالبًا ، ونجري استعلامًا لحقنه ببيانات قائمة ملفات .md. افعل هذا:

استيراد رد فعل من "رد فعل" ؛
استيراد الرابط من "رابط gatsby" ؛
استيراد خوذة من "رد فعل خوذة" ؛
استيراد '../styles/blog-listing.css' ؛
مؤشر وظيفة التصدير الافتراضية ({data}) {
  const {edges: posts} = data.allMarkdownRemark؛
  إرجاع (
    
      {المشاركات         .filter (post => post.node.frontmatter.title.length> 0)         .map (({node: post}) => {           إرجاع (             
              

                <رابط إلى = {post.frontmatter.path}> {post.frontmatter.title}                              

{post.frontmatter.date}               

{post.excerpt}                        )؛         })}        )؛ }

صفحة const constQuery للتصدير = graphql`
  استعلام IndexQuery {
    allMarkdownRemark (رتب: {order: DESC ، الحقول: [frontmatter___date]}) {
      حواف {
        عقدة {
          مقتطفات (تقليم الطول: 250)
          هوية شخصية
          المادة الأمامية {
            عنوان
            التاريخ (formatString: "MMMM DD ، YYYY")
            مسار
          }
        }
      }
    }
  }
`.

أنا على ثقة بأنك بدس في هذه المرحلة وأنك على دراية بما يحدث. لاحظ أننا كتبنا عملية استيراد أعلاه غير موجودة. الآن قم بإنشاء الملف / styles/blog-listing.css:

div.blog-post-preview {
    الحدود السفلية: 2px solid # e6e6e6؛
    الحشو أعلى: 1rem.
    الحشو أسفل: 1rem.
    الهامش السفلي: 1rem ؛
}
h1> * {
    حجم الخط: 1.2rem ؛
    خط زخرفة النص: لا شيء ؛
}
h2 {
    حجم الخط: 0.8rem!
    وزن الخط: 100!
}

أعد تشغيل الخادم ، وزيارة الصفحة المقصودة ، وسترى القائمة في العمل:

استنتاج

لقد وصلنا إلى نهاية هذا البرنامج التعليمي. شكرا لك على القراءة حتى الآن.

هذا المنشور هو مجرد قمة جبل جليدي يفكر في مقدار الأشياء التي يمكنك القيام بها مع Gatsby. لا تتردد في استكشاف كيف يمكنك تطبيق:

  • وظيفة البحث
  • استخدام العلامات لتصنيف منشورات المدونة
  • نشر موقعك غاتسبي

يمكنك الحصول على شفرة المصدر النهائية هنا. لا تتردد في دعم لي (devapparel.co) وتبدو جيدة أثناء ذلك. أيضا ، تعليق أو مشاركة هذا المنصب. شكرا للقراءة!

P.S أنا أعمل على كتاب React مع Ohans Emmanuel والذي يجعلك تتقن React من خلال بناء 30 مشروعًا صغيرًا في 30 يومًا. إذا كنت تريد أن تظل محدّثًا بهذا ، انضم إلى القائمة البريدية. شكر!