我在Github上主持一个Jekyll博客,用Markdown写我的帖子。当我添加图像时,我这样做:

![图片名称](http://link.com/image.jpg)

然后显示文本中的图像。

然而,我怎么能告诉Markdown添加一个标题是下面或上面的图像?


当前回答

你可以用表格。它工作得很好。

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

结果:

其他回答

我知道这是一个老问题,但我想我仍然要分享我的方法添加图片字幕。您将无法使用标题或figcaption标签,但这将是一个简单的替代方案,无需使用任何插件。

在你的标记中,你可以用强调标签包装标题,并将其直接放在图像的下面,而不需要插入新的行,如下所示:

![](path_to_image)
*image_caption*

这将生成以下HTML:

<p>
    <img src="path_to_image" alt>
    <em>image_caption</em>
</p>

然后在你的CSS中,你可以使用下面的选择器来设置它的样式,而不会干扰页面上的其他em标签:

img + em { }

注意,在图片和标题之间不能有空行,因为那样会生成:

<p>
    <img src="path_to_image" alt>
</p>
<p>
    <em>image_caption</em>
</p>

除了em,你也可以使用任何你想要的标签。只要确保有一个标签,否则你将无法设置它的样式。

你可以用表格。它工作得很好。

| ![space-1.jpg](http://www.storywarren.com/wp-content/uploads/2016/09/space-1.jpg) | 
|:--:| 
| *Space* |

结果:

对于带标题的图像,正确的HTML是<figure> with <figcaption>。

没有相应的Markdown,所以如果你只是偶尔添加标题,我建议你只添加html到你的Markdown文档:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<figure>
  <img src="{{site.url}}/assets/image.jpg" alt="my alt text"/>
  <figcaption>This is my caption text.</figcaption>
</figure>

Vestibulum eu vulputate magna...

Markdown规范鼓励您在这种情况下嵌入HTML,这样就可以很好地显示。它也比摆弄插件简单得多。

如果你试图使用其他Markdown特性(如表格、星号等)来生成标题,那么你只是在改变Markdown的使用方式。

如果你不想使用任何插件(这意味着你可以直接将它推送到GitHub,而不需要先生成站点),你可以在_includes中创建一个名为image.html的新文件:

<figure class="image">
  <img src="{{ include.url }}" alt="{{ include.description }}">
  <figcaption>{{ include.description }}</figcaption>
</figure>

然后显示图像从您的markdown:

{% include image.html url="/images/my-cat.jpg" description="My cat, Robert Downey Jr." %}

你可以使用这个javascript从图像的alt自动生成一个图标题。

您可以添加一些css使底部文本看起来更真实。

这同样适用于降价。[HERE]()会出现在图像下方。

var images = document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    var altText = images[i].getAttribute("alt");
    var figcaption = document.createElement("figcaption");
    figcaption.innerHTML = altText;
    images[i].insertAdjacentElement("afterend", figcaption);
}

var images = document.getElementsByTagName(“img”); for (var i = 0; i < images.length; i++) { var altText = images[i].getAttribute(“alt”); var figcaption = document.createElement(“figcaption”); figcaption.innerHTML = altText; images[i].insertAdjacentElement(“afterend”, figcaption); } <img src=“https://www.w3schools.com/tags/img_girl.jpg” alt=“穿夹克的女孩”>