فیلم یادگیری کامل Gatsby

در این دوره آموزشی با Gatsby آشنا شده و کدنویسی آن را در پروژه های واقعی و همراه با مدرس دوره تجربه و تمرین خواهید کرد.

عنوان اصلی : The Gatsby Masterclass

سرفصل ها :

شروع شدن :
آنچه برای این دوره نیاز دارید
ایجاد پروژه گتسبی ما:
با استفاده از اسناد گتسبی
ایجاد پروژه ما با Gatsby CLI
گتسبی شروع به راه‌اندازی آسان پروژه‌های جدید می‌کند
کاوش پروژه گتسبی ما:
ساختار فایل پروژه گتسبی
فایل‌های Gatsby API / استفاده از Git برای ردیابی فایل
صفحات و اجزای سازنده در گتسبی:
ایجاد صفحات، مسیرها و مسیرهای تودرتو در گتسبی
افزودن ساختار برنامه با مؤلفه طرح‌بندی / پیوندها در گتسبی
جستجوی داده با GraphQL / GraphiQL IDE:
دریافت ابرداده سایت با GraphQL و Queries Static
استفاده از GraphiQL IDE برای اجرای Queries GraphQL
اجرای پرس و جوهای GraphQL در اجزای گتسبی ما
افزودن / پرس و جو برای فیلدهای سفارشی در فراداده سایت
افزونه های منبع و پرس و جوهای استاتیک:
پرس و جو برای داده های سیستم فایل با gatsby-source-filesystem
اجرای کوئری های استاتیک از ابتدا
پلاگین های Transformer / ایجاد وبلاگ از فایل های Markdown:
پلاگین های ترانسفورماتور / استفاده از gatsby-transformer-remark برای تبدیل Markdown
نمایش پیش نمایش پست های Markdown در صفحه وبلاگ
ایجاد صفحات به صورت برنامه ای با گتسبی:
ایجاد اسلاگ برای پست های وبلاگ با gatsby-node به صورت برنامه ای
ایجاد صفحات به صورت برنامه ای با gatsby-node
آرگومان ها، متغیرها و جستارهای صفحه GraphQL:
استفاده از آرگومان ها و متغیرهای GraphQL برای دریافت پست های فردی
واکشی داده های پست فردی توسط Slug با جستجوهای صفحه
صفحه بندی در گتسبی:
پیوندهایی به پست‌های وبلاگ / ایجاد برنامه‌ای صفحات وبلاگ
افزودن صفحه بندی با پیوندهای صفحه قبلی / صفحه بعدی
اضافه کردن صفحه بندی شماره دار
مرتب سازی و فیلتر کردن با کوئری های GraphQL / قالب بندی تاریخ ها و متن:
مرتب‌سازی، فیلتر کردن، محدود کردن، پرش از آرگومان‌های GraphQL / فهرست‌بندی پست‌های وبلاگ
قالب بندی تاریخ ها در گتسبی / قالب بندی تابع در لحظه
قالب بندی گزیده ها
زمان خواندن برای هر پست / قالب بندی تاریخ در صفحات وبلاگ ما است
تصاویر در گتسبی / تصاویر واکنشگرا شگفت انگیز با تصویر گتسبی:
وارد کردن تصاویر در گتسبی / اضافه کردن لوگوی سایت ما
تصویر گتسبی چیست / چرا از تصویر گتسبی استفاده کنیم؟
جستجو برای تصاویر در GraphiQL / افزونه gatsby-transformer-sharp در عمل
مفاهیم پیشرفته تصویر در قطعات گتسبی / GraphQL:
قطعات GraphQL برای پرس و جوهای تصویر ساده تر / نمایش تصاویر با تصویر گتسبی
جزئیات کلیدی در مورد تصاویر ارائه شده با تصویر گتسبی
تعبیه تصاویر در فایل های Markdown با تصاویر gatsby-remark
Contentful به عنوان CMS بدون سر ما / ایجاد و مدیریت محصولات با Contentful:
مقدمه ای بر CMS بدون سر و محتوا / ایجاد مدل محتوا برای محصولات ما
مدیریت متغیرهای محیطی در گتسبی / واکشی محصولات از Contentful
ایجاد صفحات محصول فردی ما / نمایش تصاویر محتوایی
پرس و جو / پیش نمایش همه محصولات در صفحه محصولات
ایجاد یک سبد خرید / عملکرد پرداخت با Snipcart:
امکان خرید محصولات با Snipcart را اضافه کنید
نمایش خلاصه سبد خرید در سربرگ
افزودن NavLinks سفارشی در کامپوننت هدر
استقرار سایت های گتسبی ما با Netlify / راه اندازی یکپارچه سازی مداوم:
استفاده از Netlify برای استقرار / استقرار مداوم با Github
احراز هویت کاربر در Gatsby / Netlify Identity:
استفاده از Netlify Identity برای احراز هویت چند عاملی در سایت ما
نمایش محصولات خصوصی برای کاربران Auth