کامپوننت کارت‌ها

مثال

کارت تصویر

یک چشم‌انداز Unsplash

تصویر محلی

تصویر خام در دایرکتوری استاتیک است.

تصویر محلی

تصویر در دایرکتوری assets می‌باشد و پردازش توسط Hugo شده است.

استفاده

{{< cards >}}
  {{< card link="../callout" title="فراخوانی" icon="warning" >}}
  {{< card link="/fa" title="بدون آیکون" >}}
{{< /cards >}}

{{< cards >}}
  {{< card link="/" title="کارت تصویر" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="یک چشم‌انداز Unsplash" >}}
  {{< card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک است." >}}
  {{< card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets می‌باشد و پردازش توسط Hugo شده است." method="Resize" options="600x q80 webp" >}}
{{< /cards >}}

پارامترهای کارت

کارت تصویر

علاوه بر این، کارت از افزودن تصویر و پردازش از طریق این پارامترها پشتیبانی می‌کند:

کارت از سه نوع تصویر پشتیبانی می‌کند:

1. تصویر از راه دور: نشانی اینترنتی کامل در پارامتر image.
2. تصویر استاتیک: از مسیر نسبی در دایرکتوری static/ Hugo استفاده کنید.
3. تصویر پردازش شده: از مسیر نسبی در دایرکتوری assets/ Hugo استفاده کنید.

هگزترا در صورت نیاز به پردازش تصویر در حین ساخت، به طور خودکار تشخیص می‌دهد و پارامتر options یا تنظیمات پیش‌فرض را اعمال می‌کند (تغییر اندازه، 800x، کیفیت 80، فرمت WebP). در حال حاضر این method را پشتیبانی می‌کند: Resize، Fit، Fill و Crop.

برای اطلاعات بیشتر در مورد دستورات، روش‌ها و گزینه‌های پردازش تصویر داخلی Hugo به مستندات پردازش تصویر آن‌ها مراجعه کنید.