لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش گتسبی جی اس | با استفاده از 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
من سرفراز کسمانی هستم، یک توسعه دهنده Front End و بازاریاب دیجیتال از بمبئی، هند. من بیش از 7 سال تجربه در زمینه توسعه Front End و دیجیتال مارکتینگ دارم.
من هیجان زده هستم که اینجا هستم و به مردم کمک می کنم تا در جالب ترین و قدرتمندترین زمینه جهان با تجربه تر شوند.
نمایش نظرات