لطفا جهت اطلاع از آخرین دوره ها و اخبار سایت در
کانال تلگرام
عضو شوید.
آموزش پردازش تصویر و عکسهای واکنشگرا با Hugo مولد سایت استاتیک
Image Processing & Responsive Images with Hugo the static site generator
نکته:
آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره:
این دوره شما را در روند بازگشایی قابلیتهای عالی پردازش تصویر HUGO راهنمایی میکند.
من همه روشها و گزینهها را به شما نشان میدهم و برخی از پیادهسازیهای رایج را مرور میکنم.
وقتی این دوره را به پایان رساندید، مهارت هایی را خواهید داشت که نمونه هایی را که در پروژه کلاس تکمیل کرده اید، اصلاح کنید.
این پروژه شامل یادگیری در مورد:
است
روش های دریافت منبع تصویر.
روش های پردازش تصویر.
گزینه های پردازش تصویر.
پیاده سازی های رایج.
ایجاد یک پردازش تصویر جزئی.
ایجاد یک کد کوتاه پردازش تصویر و قلاب رندر (برای علامت گذاری)
برای تکمیل پروژه باید کلاس ها را دنبال کنید، من شما را با نحوه استفاده از توابع پردازش تصویر Hugo آشنا می کنم.
شما یک وب سایت نمونه کار خواهید ساخت که تمام قابلیت های پردازش تصویر Hugo و پیاده سازی های رایج را به نمایش می گذارد.
سپس می توانید کد را مطابق با نیاز خود سفارشی کنید. (با استفاده از مهارت های آموخته شده در دوره) اسکرین شات های نتایج خود را به اشتراک بگذارید (و پیوندهایی به کد شما) و من و سایر دانش آموزان می توانیم به شما بازخورد بدهیم.
مخزن GitHub برای کد: https://github.com/future-wd/course-hugo-image
پیوندها به اسناد ارجاع شده در دوره:
درس 3-6 (منابع) https://gohugo.io/hugo-pipes/introduction/ https://gohugo.io/content-management/page-resources/
درس 7-19 (روشها، گزینهها، فایل پیکربندی) https://gohugo.io/content-management/image-processing/
درس 30 (کد کوتاه) https://gohugo.io/templates/shortcode-templates/
درس 31 (قلاب رندر) https://gohugo.io/templates/render-hooks/
سرفصل ها و درس ها
درس ها
Lessons
فرمت تصویر WebP را با فرمت تصویر بازگشتی اضافه کنید
Add WebP image format with fallback image format
فایل پیکربندی
Config File
منابع. دریافت کنید
resources.Get
ایجاد render-hook برای استفاده از نشانه گذاری
Create render-hook for markdown use
ایجاد پردازش تصویر جزئی
Create image processing partial
قابلیت تراکم پیکسلی را اضافه کنید
Add pixel density functionality
قابلیت نسبت ابعاد را اضافه کنید
Add aspect ratio functionality
اعتبار سنجی ورودی های کاربر
Validate user inputs
رنگ پس زمینه
Background Colour
ورودی های پیکربندی را ایجاد کنید
Create configuration entries
.فیلتر
.Filter
نمونه مجدد فیلتر
Resample Filter
.منابع.GetMatch
.Resources.GetMatch
سفارشی کردن کد، و outro
Customise code, and outro
لنگر
Anchor
.برش
.Crop
کیفیت
Quality
چرخش
Rotate
ایجاد کد کوتاه برای استفاده از علامت گذاری
Create shortcode for markdown use
تغییر تصویر و متن عنوان
Image alt and title text
مقدمه
Intro
فرمت هدف
Target Format
سرعت ساخت و اندازه پروژه را بهینه کنید
Optimise Build Speed and Project Size
.مناسب
.Fit
SRCSET برای تراکم پیکسل
SRCSET for pixel densities
کد شکل تصویر را ایجاد کنید
Create image figure code
SRCSET تصاویر پاسخگو برای عرض صفحه
SRCSET Responsive images for screen widths
اشاره
Hint
.منابع.ByType
.Resources.ByType
نسبت تصویر
Aspect Ratio
.منابع.مطابقت
.Resources.Match
پروژه را از اینجا شروع کنید
Start Project Here
تغییر اندازه
.Resize
درس ها
Lessons
سرعت ساخت و اندازه پروژه را بهینه کنید
Optimise Build Speed and Project Size
فرمت هدف
Target Format
.برش
.Crop
سفارشی کردن کد، و outro
Customise code, and outro
اشاره
Hint
اعتبار سنجی ورودی های کاربر
Validate user inputs
پروژه را از اینجا شروع کنید
Start Project Here
SRCSET تصاویر پاسخگو برای عرض صفحه
SRCSET Responsive images for screen widths
قابلیت نسبت ابعاد را اضافه کنید
Add aspect ratio functionality
SRCSET برای تراکم پیکسل
SRCSET for pixel densities
فایل پیکربندی
Config File
کد شکل تصویر را ایجاد کنید
Create image figure code
مقدمه
Intro
ایجاد پردازش تصویر جزئی
Create image processing partial
لنگر
Anchor
ورودی های پیکربندی را ایجاد کنید
Create configuration entries
.منابع.ByType
.Resources.ByType
منابع. دریافت کنید
resources.Get
تغییر تصویر و متن عنوان
Image alt and title text
.فیلتر
.Filter
کیفیت
Quality
ایجاد render-hook برای استفاده از نشانه گذاری
Create render-hook for markdown use
چرخش
Rotate
.منابع.GetMatch
.Resources.GetMatch
رنگ پس زمینه
Background Colour
ایجاد کد کوتاه برای استفاده از علامت گذاری
Create shortcode for markdown use
.منابع.مطابقت
.Resources.Match
.مناسب
.Fit
نسبت تصویر
Aspect Ratio
نمونه مجدد فیلتر
Resample Filter
تغییر اندازه
.Resize
فرمت تصویر WebP را با فرمت تصویر بازگشتی اضافه کنید
Add WebP image format with fallback image format
قابلیت تراکم پیکسلی را اضافه کنید
Add pixel density functionality
نمایش نظرات