سرزمین‌های دیدنی کانادا با برگ‌های افرا، کوه‌های پوشیده از برف، دریاچه‌های فیروزه‌ای و تورنتو. از این نمایشگاه گالری عکس لذت ببرید و ببینید چقدر آسان است که با کمی جادوی MDX و کلاس‌های tailwind تکرار شود.

تصاویر با استفاده از کامپوننت next/image سرو می‌شوند. تصاویر ذخیره شده محلی در پوشه‌ای با مسیر زیر قرار دارند: /static/images/canada/[filename].jpg

از آنجایی که از mdx استفاده می‌کنیم، می‌توانیم یک grid flexbox واکنش‌گرا ساده برای نمایش تصاویر خود با چند کلاس tailwind css ایجاد کنیم.

---

گالری

پیاده‌سازی

<div className="-mx-2 flex flex-wrap overflow-hidden xl:-mx-2">
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Maple](/static/images/canada/maple.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Lake](/static/images/canada/lake.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Mountains](/static/images/canada/mountains.jpg)
  </div>
  <div className="my-1 w-full overflow-hidden px-2 xl:my-1 xl:w-1/2 xl:px-2">
    ![Toronto](/static/images/canada/toronto.jpg)
  </div>
</div>

با MDX v2، می‌توان markdown را در jsx به هم آمیخت همانطور که در کد مثال نشان داده شده است.

اعتبار عکس‌ها