Gatsbyjs：如何使用 gatsby-remark-images 和 markdown 实现高级图像样式？

Question

我有一个建立在 Gatsby 上的博客。帖子是用markdown写的。我也在使用 gatsby-remark-images。到目前为止一切都很棒。我想添加更多选项来对齐/格式化博客文章中的图像。即一排两三个图像的画廊，每个图像的不同尺寸选项等。到目前为止，我的研究没有带来任何解决方案。我可以直接在 Markdown 文件中使用 HTML，但是我失去了 gatsby-remark-images 的所有优势，因为 HTML 的内容没有作为 Markdown 处理。

<div class="gallery">
    <div class="gallery__item">
        ![image to the left](./left.jpg) <- is not processed
    </div>
    <div class="gallery__item">
        ![image to the right](./right.jpg)
    </div>
</div>

我也不能向图像添加任何 CSS 类。我在一些“markdown-extra”编译器中看到了如下解决方案。

![image](./image.jpg){.some-class}

Gatsby 支持自定义组件 ( https://using-remark.gatsbyjs.org/custom-components/ )。自定义组件是否仍允许将子组件作为降价处理？像下面的例子那样可能吗？

<image-gallery>
    ![image1](./1.jpg)
    ![image2](./2.jpg)
</image-gallery>

你能推荐任何其他解决方案吗？我只想更灵活地使用图像样式，并为每个图像或一组图像提供选项。与在 Medium 上添加图像相比。您可以使它们全屏显示、适合容器或浮动到一侧。我想我只需要能够将不同的 CSS 类传递给图像或其容器，其余的都很容易。

有任何想法吗？

Answer 1

这比预期的要容易，只需使用 HTML，gatsby-remark-images 也会正确转换标签

<div class="gallery">
    <div class="gallery__item">
        <img alt="01" src="./01.jpg" />
    </div>
    <div class="gallery__item">
        <img alt="02" src="./02.jpg" />
    </div>
</div>