gatsby - 如何阻止 Gatsby 将 Markdown 图像包装在
标签和隐藏图片标题?
问题描述
我已经使用Gatsby 入门博客模板设置了我的网站。
在我的 Markdown 文件中,我使用普通的 Markdown 符号来插入带有标题的图像。出于某种原因 - 我认为这是因为gatsby-remark-images
插件等。al.-我的图像自动包装在<p>
标签中,还有一堆我不明白的东西。
这是 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("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"); 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
for 标题的 A 当然也可以。)
我如何实现这一目标?
解决方案
由于它是默认配置,并且其中没有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>
推荐阅读
- python - Python [Errno 22] 将文件从一个文件夹复制到另一个文件夹时参数无效
- java - 如何使用 Hibernate 和 gradle 初始化数据库?
- javascript - 将订阅表格合并为 1
- amazon-web-services - AWS 队列限制
- sql - Athena/Presto:使用左连接取消嵌套 2 个数组
- flutter - Future.delayed 和 Timer 正在执行所有延迟的回调
- django - 当 DEBUG 为 False 时如何在 Django 中获取最后执行的查询?
- mysql - 对面的mysql数据透视表
- node.js - MissingRequiredParameter:参数中缺少必需的键“thingName”
- python - Codeforces 上的“输出格式错误,文件意外结束 - 预期令牌”错误