在Markdown Jekyll中使用图像标题

Question

我在Github上主持了一个Jekyll博客，并用Markdown写我的帖子。当我添加图片时，我通过以下方式添加图片：

![name of the image](http://link.com/image.jpg)

这将在文本中显示图像。

但是，我如何告诉Markdown添加一个显示在图像下方或上方的标题？

Answer 1

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

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

然后使用以下命令显示您的标记中的图像：

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

Answer 2

我知道这是一个老问题，但我想我仍然会分享我添加图片标题的方法。您将无法使用caption或figcaption标记，但这将是一个不使用任何插件的简单替代方案。

在你的markdown中，你可以用emphasis标签包装你的标题，并把它直接放在图片的下面，而不需要像这样插入一个新的行：

![](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之外，您还可以使用任何您想要的标记。只要确保有一个标签，否则你将无法样式化它。

Answer 3

您可以使用table来完成此操作。它工作得很好。

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

结果：

​

​