Question

我有一个基于盖茨比的博客。帖子是用降价写的。我也使用gatsby-remark-images。到目前为止一切都很棒。我想在博客文章中添加更多选项来对齐/格式化图像。即一行中有两三个图像的图库，每个图像的不同尺寸选项等。到目前为止，我的研究并没有带来任何解决方案。我可以直接在markdown文件中使用HTML，但之后我失去了gatsby-remark-images的所有优势，因为HTML的内容不会被处理为降价。

<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类添加到图像中。我在某些＆＃34; markdown-extra＆＃34;中看到了类似下面的解决方案。编译器。

![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也可以正确转换标签

www.myweb.com/usermanagement

Answer 2

gatsby-remark-image-attributes插件可以为您提供所需的功能，而无需将组件注入markdown。

基于作者的readme，以及配置的gatsby-remark-images，以下标记：

![party](./images/emojis/party.png#box-shadow=2px 2px 6px 0px;float=right)

将产生如下所示的HTML标记：

<span style="box-shadow: 2px 2px 6px 0px; float: right;">
  <span class="gatsby-resp-image-wrapper" ...>
    <span class="gatsby-resp-image-background-image" ...></span>
    <img
      class="gatsby-resp-image-image"
      alt="party"
      title="party"
      src="/static/4d415e7127c0f88799cd9f357aabc732/b7060/party.png"
      ...
  /></span>
</span>

但是，有一个outstanding issue，请防止它与gatsby: 2.24.2一起使用。

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

2 个答案: