Как мне запретить Гэтсби оборачивать изображения Markdown в теги <p> и скрывать подписи к изображениям?

Я создал свой сайт с помощью шаблона стартового блога Gatsby .

В моих файлах Markdown я использую обычную нотацию Markdown для вставки изображений с подписями. По какой-то причине - я полагаю, это из-за gatsby-remark-imagesплагин и др. др. - мои изображения автоматически заключаются в теги вместе с множеством других вещей, которые я не понимаю.

Это источник в Safari:

      <p>
<span class="gatsby-resp-image-wrapper" style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 630px; ">
<span class="gatsby-resp-image-background-image" style="padding-bottom: 75.31645569620254%; position: relative; bottom: 0px; left: 0px; background-image: url(&quot;data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQBAgP/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/aAAwDAQACEAMQAAABrpLFiI6H/8QAGRAAAwEBAQAAAAAAAAAAAAAAAAIDEwES/9oACAEBAAEFApUZV9NwWlEXChgYH//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EAB4QAAIBAwUAAAAAAAAAAAAAAAABIQISMREiMlFh/9oACAEBAAY/AraXA92ey3VR6Q0cjJ//xAAfEAACAQIHAAAAAAAAAAAAAAAAAREhMUFRYXGBkaH/2gAIAQEAAT8hRKV2NBJU8xWRKzQFhvcc7+DXM//aAAwDAQACAAMAAAAQeP8A/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEB/9oACAEDAQE/EKuP/8QAFhEBAQEAAAAAAAAAAAAAAAAAAQAR/9oACAECAQE/EAsb/8QAHBABAQACAgMAAAAAAAAAAAAAAREAITFRYXHB/9oACAEBAAE/ELQqcxD8xRBQRCaSnWANCBRPWIa6O6WmNO5Cb9fPjJeJ9on3P//Z&quot;); background-size: cover; display: block; transition: opacity 0.5s 0.5s; opacity: 0;"></span><img class="gatsby-resp-image-image" alt="Tøyen barnehage er en av fem kommunale barnehager i Nittedal. <cite>Nittedal kommune</cite>" title="Tøyen barnehage er en av fem kommunale barnehager i Nittedal. <cite>Nittedal kommune</cite>" src="/static/6c4a2d09ef212e5058dc411fbe918fb9/828fb/toyen-barnehage-2.jpg" srcset="/static/6c4a2d09ef212e5058dc411fbe918fb9/ff44c/toyen-barnehage-2.jpg 158w,
/static/6c4a2d09ef212e5058dc411fbe918fb9/a6688/toyen-barnehage-2.jpg 315w,
/static/6c4a2d09ef212e5058dc411fbe918fb9/828fb/toyen-barnehage-2.jpg 630w,
/static/6c4a2d09ef212e5058dc411fbe918fb9/0ede0/toyen-barnehage-2.jpg 945w,
/static/6c4a2d09ef212e5058dc411fbe918fb9/6a068/toyen-barnehage-2.jpg 960w" sizes="(max-width: 630px) 100vw, 630px" style="width: 100%; height: 100%; margin: 0px; vertical-align: middle; position: absolute; top: 0px; left: 0px; opacity: 1; transition: opacity 0.5s; color: inherit; box-shadow: white 0px 0px 0px 400px inset;" loading="lazy" decoding="async">
</span>
</p>

Я пробовал исследовать это. Я понимаю, что это набор функций для более эффективной загрузки изображений и, следовательно, лучшего и так далее.

Необычные функции в порядке, но мне нужно, чтобы мое изображение было завернуто в figure с figcaption- не <p>ярлык. (А div с p для подписи, конечно, тоже подойдет.)

Как мне этого добиться?

Источник

1 ответ

Поскольку это конфигурация по умолчанию, и в gatsby-remark-imagesчто для настройки вывода вам необходимо добавить рендеринг настраиваемого компонента. К счастью, есть плагин, который упрощает эту настройку:gatsby-remark-figure-caption. Просто добавьте его в gatsby-transformer-remark:

      // In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-figure-caption`,
        },
      ],
    },
  },
]

И выведет:

      <figure>
  <img src="path-to-image.jpg">
  <figcaption>image with description</figcaption>
</figure>
Источник
Другие вопросы по тегам