ec007d73c0
* docs(blog): prepare for v0.10 release post * Update v0.10.md * Update v0.10.md to refine upgrade instructions and enhance blog features. Added synchronized tab switching and pagination controls, while improving the search experience and table of contents navigation. * Enhance v0.10 release documentation with detailed upgrade instructions and migration guide. Added Tailwind theme variable customization section and clarified breaking changes. Improved clarity on CSS class prefix changes for better user experience. * Update v0.10.md to enhance upgrade instructions, clarify breaking changes, and improve overall readability. Adjusted formatting for consistency and added details on asset management and user experience improvements. * Add notable new features to v0.10.md, including dropdown menu support, enhanced search experience, and blog list pagination. Updated FlexSearch upgrade details for clarity and improved migration guide by removing redundant breaking change notes. * chore: update zh-cn translation * chore: update ja translation * chore: update fa and ja translations * chore: prepare release
115 lines
6.3 KiB
Markdown
115 lines
6.3 KiB
Markdown
---
|
||
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`.
|
||
|
||
برای اطلاعات بیشتر در مورد دستورات، روشها و تنظیمات پردازش تصویر هوگو، به [مستندات پردازش تصویر](https://gohugo.io/content-management/image-processing/) آنها مراجعه کنید.
|
||
|
||
## تگها
|
||
|
||
کارت از افزودن تگها پشتیبانی میکند که میتواند برای نمایش اطلاعات وضعیت اضافی مفید باشد.
|
||
|
||
{{< 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 */>}}
|
||
``` |