آموزش گتسبی JS | با استفاده از gatsbyJS یک وبلاگ شخصی بسازید

سرفصل ها و درس ها

معرفی Introduction

• معرفی Introduction

• گتسبی چیست؟ What is Gatsby?

برپایی Setup

• گتسبی CLI Gatsby CLI

• ساختار پوشه Folder Structure

• نصب وابستگی ها Installing Dependencies

• راه اندازی پلاگین ها و فایل پیکربندی Setting up Plugins and Config file

• واردات مطلق Absolute Imports

فناوری - اختیاری Tech - Optional

• Markdown چیست؟ What is Markdown?

• ایجاد پرونده های Markdown و موارد مهم برای پروژه ما Creating Markdown files and front matter for our project

• GraphQL چیست؟ What is GraphQL?

• انواع پرس و جو GraphQL در گتسبی GraphQL Query types in Gatsby

• GraphQL Editor GraphQL Editor

• اجزای سبک شده Styled Components

سبک های جهانی Global Styles

• رنگها و مضامین Colors and themes

• افزودن CSS برای وب سایت ما Adding CSS for our website

چیدمان Layout

• چیدمان توضیح داده شده است Layout Explained

• پاکسازی پروژه Project Cleanup

• فهرست مطالب Index

• استفاده از قلاب سفارشی ایجاد کنیدMetaDataQueryHook Create custom hook useMetaDataQueryHook

سرتیتر Header

• استفاده از قلاب سفارشی را ایجاد کنید: SiteConfigQueryHook create custom hook useSiteConfigQueryHook

• کامپوننت سرصفحه ایجاد کنید Create Header Component

• عنصر سربرگ یک ظاهر طراحی شده Styling Header Component

• کامپوننت منو ایجاد کنید Create Menu Component

• م Menلفه منوی استایل Styling Menu Component

• ایجاد جزء همبرگر Create Hamburger Component

• یکپارچه سازی کامپوننت همبرگر Styling Hamburger Component

• سربرگ - منوی موبایل - فهرست Header - Mobile Menu - Index

• سربرگ - منوی موبایل - سبک ها Header - Mobile Menu - Styles

• ایجاد صفحه اصلی Creating Home Page

• ایجاد پرس و جو صفحه Creating Page Query

• پرس و جو تصویر Image Query

• صفحه اول بنر صفحه اصلی Home Banner Index

• ایجاد قلاب سفارشی برای تصویر بنر creating custom hook for banner image

• ایجاد شاخص برای تصویر پس زمینه Creating Index for Background Image

• یک ظاهر طراحی تصویر پس زمینه Styling Background Image

• یک ظاهر طراحی شده برای بنر صفحه اصلی Styling Home Banner Component

• ایجاد فهرست برای م Cardلفه کارت پستال بلاگ Creating Index for Blog Post Card Component

• کارت پستال وبلاگ یک ظاهر طراحی شده Styling Blog Post Card

• در حال اتمام صفحه اصلی Finishing Home Page

تنظیم حالت روشن و تاریک Setting Light and Dark Mode

• ModeProvider و زمینه ModeProvider and Context

• API مرورگر گتسبی Gatsby Browser APi

• فهرست و سبک دکمه تم Theme Button Index and Styles

• پیاده سازی دکمه سوئیچ تم Implementing Theme Switch Button

• ایجاد Slugs برای پست ها و صفحات Creating Slugs for Posts and Pages

• صفحات و ارسالها پرس و جو Graphql Pages and Posts Graphql query

• ایجاد الگوهای صفحه و پست Creating Page and Post templates

• به طور پویا صفحات و پست ها را ایجاد کنید Dynamically create pages and posts

• ایجاد صفحه بندی در گره Creating Pagination in Node

• الگوی صفحه اصلی Home page template

• ایجاد م Navلفه پیمایش صفحه Creating Page Navigation Component

• یک ظاهر طراحی شده در مرور صفحه Styling Page Navigation

• منابع Resources