رفتن به محتوا
هگزترا v0.12 منتشر شد! 🎉 تازه‌ها را ببینید

تب‌ها

مثال

macOS: یک سیستم عامل دسکتاپ توسط اپل.

نحوه استفاده

پیش‌فرض

{{< tabs >}}

  {{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
  {{< tab name="YAML" >}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{< /tab >}}
  {{< tab name="TOML" >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}

{{< /tabs >}}

مشخص کردن ایندکس انتخاب شده

از ویژگی selected برای مشخص کردن تب انتخاب شده استفاده کنید.

{{< tabs >}}

  {{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
  {{< tab name="YAML" selected=true >}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{< /tab >}}
  {{< tab name="TOML" >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}

{{< /tabs >}}

تب YAML به طور پیش‌فرض انتخاب خواهد شد.

YAML: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.

افزودن آیکون

با استفاده از پارامتر icon برای هر tab می‌توانید قبل از عنوان تب آیکون نمایش دهید. برای مشاهده لیست آیکون‌های موجود، صفحه شورت‌کد آیکون را ببینید.

{{< tabs >}}

  {{< tab name="Photos" icon="photograph" >}}مدیریت و سازماندهی کتابخانه عکس‌های شما.{{< /tab >}}
  {{< tab name="Music" icon="music-note" >}}مرور و پخش آهنگ‌های مورد علاقه شما.{{< /tab >}}
  {{< tab name="Videos" icon="film" >}}تماشا و پخش محتوای ویدیویی.{{< /tab >}}

{{< /tabs >}}
مدیریت و سازماندهی کتابخانه عکس‌های شما.

استفاده از Markdown

نحو Markdown شامل بلوک کد نیز پشتیبانی می‌شود:

{{< tabs >}}

  {{< tab name="JSON" >}}
  ```json
  { "hello": "world" }
  ```
  {{< /tab >}}

  ... سایر تب‌ها را به همین ترتیب اضافه کنید

{{< /tabs >}}
{ "hello": "world" }

همگام‌سازی تب‌ها

تب‌هایی که لیست name یکسانی دارند می‌توانند همگام‌سازی شوند. وقتی فعال باشد، انتخاب یک تب تمام تب‌های دیگر با name یکسان را به‌روز می‌کند و انتخاب را در بین صفحات به خاطر می‌سپارد.

به صورت جهانی در فایل hugo.yaml در بخش page فعال کنید:

hugo.yaml
params:
  page:
    tabs:
      sync: true

با فعال کردن این گزینه، دو بلوک تب زیر همیشه آیتم انتخاب شده یکسانی را نمایش خواهند داد:

{{< tabs >}}

  {{< tab name="A" >}}محتوای A{{< /tab >}}
  {{< tab name="B" >}}محتوای B{{< /tab >}}

{{< /tabs >}}

{{< tabs >}}

  {{< tab name="A" >}}محتوای دوم A{{< /tab >}}
  {{< tab name="B" >}}محتوای دوم B{{< /tab >}}

{{< /tabs >}}
آخرین به‌روزرسانی در