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

مقدمه 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

• یک Starters Gatsby را نصب کنید 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