آموزش پردازش تصویر و عکس‌های واکنش‌گرا با 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

نمایش نظرات

آموزش پردازش تصویر و عکس‌های واکنش‌گرا با Hugo مولد سایت استاتیک
جزییات دوره
3h 44m
33
Skillshare (اسکیل شیر) Skillshare (اسکیل شیر)
(آخرین آپدیت)
23
4 از 5
ندارد
دارد
دارد
Sean Emerson
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Sean Emerson Sean Emerson

توسعه دهنده وب و متخصص سایت استاتیک