آموزش یادگیری گتسبی (2020)

معرفی Introduction

• وب را با گتسبی مدرن کنید Modernize the web with Gatsby

• آنچه شما باید بدانید What you should know

1. راه اندازی گتسبی برای اولین بار 1. Setting Up Gatsby for the First Time

• گتسبی: یک مولد سایت ایستا Gatsby: A static site generator

• راه اندازی اولیه Initial setup

• یک استارت گتسبی نصب کنید Install a Gatsby starter

• سایت گتسبی محلی خود را راه اندازی و متوقف کنید Start and stop your local Gatsby site

2. شکستن سایت گتسبی 2. Breaking Down a Gatsby Site

• از صفر شروع کنید Start from scratch

• پروژه را کاوش کنید Explore the project

• اصول اصلی گتسبی Core Gatsby principles

• چالش: عنوان سایت و سایر مطالب را تغییر دهید Challenge: Change the site title and other content

• راه حل: عنوان سایت و سایر مطالب را تغییر دهید Solution: Change the site title and other content

3. صفحات، مؤلفه ها و سبک ها 3. Pages, Components, and Styles

• صفحات استاتیک Static pages

• دارایی های ثابت Static assets

• اجزا و نحوه استفاده از آنها Components and how to use them

• جزء طرح The layout component

• CSS در گتسبی: چند رویکرد CSS in Gatsby: Multiple approaches

• مثال: ماژول های CSS و CSS مدرن Example: CSS modules and modern CSS

• چالش: یک جزء ناوبری ایجاد کنید Challenge: Create a navigation component

• راه حل: یک جزء ناوبری ایجاد کنید Solution: Create a navigation component

4. پلاگین ها و تبدیل ها 4. Plugins and Transformations

• گتسبی را با افزونه ها گسترش دهید Extend Gatsby with plugins

• گزینه های افزونه Plugin options

• پلاگین های تبدیل Transformation plugins

• چالش: اضافه کردن دو تصویر جدید به یک صفحه Challenge: Add two new images to a page

• راه حل: دو تصویر جدید به یک صفحه اضافه کنید Solution: Add two new images to a page

5. داده ها 5. Data

• گتسبی و GraphQL Gatsby and GraphQL

• دو نوع کوئری GraphQL Two types of GraphQL queries

• چالش: یک منوی پیمایش پویا ایجاد کنید Challenge: Make a dynamic navigation menu

• راه حل: یک منوی پیمایش پویا بسازید Solution: Make a dynamic navigation menu

6. ایجاد صفحات به صورت پویا 6. Create Pages Dynamically

• تبدیل داده ها به صفحات Transform data into pages

• داده ها را از طریق ترانسفورماتور در دسترس قرار دهید Make data available through transformers

• پردازش داده های تبدیل شده Process transformed data

• صفحاتی را از فایل های علامت گذاری ایجاد کنید Generate pages from markdown files

• صفحات فهرست بندی شده ایجاد کنید Create paginated index pages

• چالش: فهرست های برچسب صفحه بندی شده را اضافه کنید Challenge: Add paginated tag indexes

• راه حل: فهرست های برچسب صفحه بندی شده را اضافه کنید Solution: Add paginated tag indexes

7. پخش زنده 7. Going Live

• ساخت سایت تولید Build the production site

• PWA و عملکرد آفلاین را اضافه کنید Add PWA and offline functionality

نتیجه Conclusion

• اطلاعات بیشتر Further information