drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-23 06:36:42 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity
Files
d35a471e7bc0fe20f9a525c2880546b0bd6ab282
hextra_mirror/exampleSite/content/docs/guide/shortcodes/cards.fa.md
Xin b9bcf5b470 chore: update fa and ja translations
2025-08-14 22:07:15 +08:00

6.3 KiB
Raw Blame History

title, linkTitle
title linkTitle
کامپوننت کارت‌ها کارت‌ها

مثال

{{< cards >}} {{< card link="../callout" title="کال‌اوت" icon="warning" >}} {{< card link="../callout" title="کارت با تگ" icon="tag" tag="تگ سفارشی">}} {{< card link="/" title="بدون آیکون" >}} {{< /cards >}}

{{< cards >}} {{< card link="/" title="کارت تصویری" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="تصویر اینترنتی" >}} {{< card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک." >}} {{< card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets، پردازش شده توسط هوگو." method="Resize" options="600x q80 webp" >}} {{< /cards >}}

نحوه استفاده

{{</* cards */>}}
  {{</* card link="../callout" title="کال‌اوت" icon="warning" */>}}
  {{</* card link="../callout" title="کارت با تگ" icon="tag" tag= "تگ سفارشی" */>}}
  {{</* card link="/" 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، پردازش شده توسط هوگو." method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}}

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

پارامتر توضیحات
link URL (داخلی یا خارجی).
title عنوان کارت.
subtitle زیرعنوان (پشتیبانی از Markdown).
icon نام آیکون.
tag متن تگ.
tagColor رنگ تگ: gray (پیش‌فرض), yellow, red و blue.

کارت تصویری

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

پارامتر توضیحات
image آدرس تصویر کارت را مشخص می‌کند.
method روش پردازش تصویر هوگو را تنظیم می‌کند.
options تنظیمات پردازش تصویر هوگو را پیکربندی می‌کند.

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

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

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

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

تگ‌ها

کارت از افزودن تگ‌ها پشتیبانی می‌کند که می‌تواند برای نمایش اطلاعات وضعیت اضافی مفید باشد.

{{< cards >}} {{< card link="../callout" title="کارت با تگ پیش‌فرض" tag="متن تگ" >}} {{< card link="../callout" title="کارت با تگ خطا" tag="متن تگ" tagType="error" >}} {{< card link="../callout" title="کارت با تگ اطلاعات" tag="متن تگ" tagType="info" >}} {{< card link="../callout" title="کارت با تگ هشدار" tag="متن تگ" tagType="warning" >}} {{< card link="/" title="کارت تصویری" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="تصویر اینترنتی" tag="متن تگ" tagType="error" >}} {{< /cards >}}

{{</* cards */>}}
  {{</* card link="../callout" title="کارت با رنگ تگ پیش‌فرض" tag="متن تگ" */>}}
  {{</* card link="../callout" title="کارت با تگ قرمز پیش‌فرض" tag="متن تگ" tagType="error" */>}}
  {{</* card link="../callout" title="کارت با تگ آبی" tag="متن تگ" tagType="info" */>}}
  {{</* card link="../callout" title="کارت با تگ زرد" tag="متن تگ" tagType="warning" */>}}
{{</* /cards */>}}

ستون‌ها

می‌توانید حداکثر تعداد ستون‌هایی که کارت‌ها می‌توانند در آن قرار بگیرند را با ارسال پارامتر cols به شورت‌کد cards مشخص کنید. توجه داشته باشید که ستون‌ها در صفحه‌های کوچکتر همچنان جمع می‌شوند.

{{< cards cols="1" >}} {{< card link="/" title="کارت بالا" >}} {{< card link="/" title="کارت پایین" >}} {{< /cards >}}

{{< cards cols="2" >}} {{< card link="/" title="کارت چپ" >}} {{< card link="/" title="کارت راست" >}} {{< /cards >}}

{{</* cards cols="1" */>}}
  {{</* card link="/" title="کارت بالا" */>}}
  {{</* card link="/" title="کارت پایین" */>}}
{{</* /cards */>}}

{{</* cards cols="2" */>}}
  {{</* card link="/" title="کارت چپ" */>}}
  {{</* card link="/" title="کارت راست" */>}}
{{</* /cards */>}}