加拿大风光

加拿大风光

加拿大的风景，包括枫叶、雪山、碧绿湖泊和多伦多。在这个照片画廊展览中欣赏风景，看看用 MDX 魔法和 Tailwind 类复制它有多容易。

使用 next/image 组件提供图片功能。本地存储的图片位于以下路径的文件夹中：/static/images/canada/[filename].jpg

由于我们使用 MDX，我们可以用几个 Tailwind CSS 类创建一个简单的响应式 flexbox 网格来展示我们的图片。

画廊

Maple
Lake
Mountains
Toronto

实现方式

<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 中，可以像示例代码那样在 JSX 中嵌入 Markdown。

照片来源

枫叶照片由 Guillaume Jaillet 拍摄于 Unsplash

山脉照片由 John Lee 拍摄于 Unsplash

湖泊照片由 Tj Holowaychuk 拍摄于 Unsplash

多伦多照片由 Matthew Henry 拍摄于 Unsplash