如何阻止Gatsby将Markdown图片包裹在<p>标签中并正常显示图片说明

实现方案 #

你可以通过以下两种低成本方式实现需求，全程保留gatsby-remark-images的响应式优化、懒加载等所有原有特性：

方案1：使用gatsby-remark-figure-caption插件 #

这是改造成本最低的方案，专门用于将gatsby-remark-images生成的图片外层的<p>标签替换为<figure>，同时自动提取图片的alt属性作为<figcaption>的内容：

1. 安装插件

npm install gatsby-remark-figure-caption
# 或使用yarn安装
yarn add gatsby-remark-figure-caption

2. 修改gatsby-config.js配置，调整插件加载顺序：

module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // 建议放在gatsby-remark-images之前加载，不生效可调整顺序重试
          {
            resolve: `gatsby-remark-figure-caption`,
            options: {
              // 可自定义figure标签的类名，方便后续写样式
              figureClassName: `post-image-figure`,
              // 可自定义figcaption标签的类名
              captionClassName: `post-image-caption`,
            }
          },
          `gatsby-remark-images`,
          // 其余remark插件按原有顺序放在后面即可
        ],
      },
    },
  ]
}

配置完成后重启Gatsby开发服务即可生效，原有结构会自动转换为：

<figure class="post-image-figure">
  <!-- gatsby-remark-images生成的所有响应式相关标签完整保留 -->
  <span class="gatsby-resp-image-wrapper">...</span>
  <figcaption class="post-image-caption">
    Tøyen barnehage er en av fem kommunale barnehager i Nittedal. <cite>Nittedal kommune</cite>
  </figcaption>
</figure>

方案2：自定义MDX组件（适用于已升级到MDX的站点） #

如果你使用的是新版Gatsby starter，已经切换为MDX解析内容，可以直接自定义图片组件覆盖默认渲染规则，灵活度更高：

1. 在站点的MDXProvider配置中添加自定义img组件：

import { MDXProvider } from "@mdx-js/react"

const components = {
  img: ({ alt, ...restProps }) => (
    <figure>
      <img {...restProps} alt={alt} />
      {/* alt不为空时才显示figcaption */}
      {alt && <figcaption>{alt}</figcaption>}
    </figure>
  )
}

// 将MDXProvider套在全局布局组件的外层即可
const BaseLayout = ({ children }) => {
  return <MDXProvider components={components}>{children}</MDXProvider>
}

自定义开发说明 #

如果你不想引入第三方插件，也可以自行开发一个简单的remark插件：遍历Markdown抽象语法树中的段落节点，如果段落内仅包含图片节点，就将段落节点替换为figure节点，同时提取图片的alt属性生成figcaption子节点即可，逻辑和上述第三方插件完全一致。

内容的提问来源于stack exchange，提问作者Magnus Kolstad