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

دانلود Gatsby JS | Build a personal blog using gatsbyJS

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: Gatsby JS و GraphQL را بیاموزید تا دانش خود را در توسعه وب مدرن افزایش دهید. Gatsby Fundamentals React Hooks API با کامپوننت های کاربردی GraphQL و ویرایشگر GraphQL داخلی اجزاء، اجزاء و دستورات و دستورات JSX حالت و عبارات Markdown Styled Components پیش نیاز: دانش اولیه در مورد React، جاوا اسکریپت و توسعه وب قبل از ثبت نام در این دوره

با استفاده از گتسبی، یک ژنراتور PWA (برنامه وب پیشرو) ایستا، ساخت برنامه‌ها و وب‌سایت‌های سریع با React را بیاموزید! با شروع از ابتدا، یاد خواهید گرفت که یک برنامه وبلاگ کامل بسازید

Gatsby یک مولد سایت استاتیک مبتنی بر React است که مبتنی بر GraphQL است. بهترین بخش‌های React، webpack، react-router، GraphQL و دیگر ابزارهای جلویی را با هم ترکیب می‌کند تا تجربه توسعه‌دهنده عالی را ارائه دهد. اگرچه گتسبی بسیار بیشتر از مولد سایت استاتیک معمولی است. می توانید آن را بیشتر شبیه یک فریم ورک جلویی مدرن در نظر بگیرید.

نحوه کار با صفحات، دارایی‌ها و مؤلفه‌های گتسبی و استایل دادن به سایت‌های خود را با استفاده از مؤلفه‌های سبک‌دار بیابید.

از GraphQL در Gatsby برای ذخیره و بازیابی داده ها استفاده کنید، صفحات و پست ها را با Markdown ایجاد کنید، تصاویر خود را به طور خودکار با gatsby-image بهینه کنید.

Gatsby JS را بیاموزید و یکی از رقبای اصلی مشاغل مدرن توسعه دهنده Front End باشید!

می‌خواهید یکی از داغ‌ترین چیزها را در توسعه وب در سال 2021 بیاموزید؟

آیا قبلاً مقداری React می‌شناسید و می‌خواهید از آنجا به جلو حرکت کنید؟

آیا از دوره های پروژه محور و سریع لذت می برید؟

آیا می خواهید سریع و مستقیم به اصل مطلب یاد بگیرید؟

آیا می‌خواهید بینش، احترام خود را بهبود ببخشید و یکی از رقبای برتر در اقدامات ثبت نام باشید؟

پس این دوره برای شماست!


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

معرفی 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

نمایش نظرات

آموزش گتسبی جی اس | با استفاده از gatsbyJS یک وبلاگ شخصی بسازید
جزییات دوره
5 hours
52
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
110,350
4.4 از 5
دارد
دارد
دارد
Sarfaraz K
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Sarfaraz K Sarfaraz K

توسعه دهنده Front End و بازاریاب دیجیتال

من سرفراز کسمانی هستم، یک توسعه دهنده Front End و بازاریاب دیجیتال از بمبئی، هند. من بیش از 7 سال تجربه در زمینه توسعه Front End و دیجیتال مارکتینگ دارم.

من هیجان زده هستم که اینجا هستم و به مردم کمک می کنم تا در جالب ترین و قدرتمندترین زمینه جهان با تجربه تر شوند.

من عاشق تدریس هستم!