Andrew的@andrew-wei回答很好。你也可以把几个链接在一起，这取决于你想要做什么。这，例如，让你的图像与alt，标题和标题与换行和粗体和斜体在标题的不同部分:

img + br + strong {margin-top: 5px; margin-bottom: 7px; font-style:italic; font-size: 12px; }
img + br + strong + em {margin-top: 5px; margin-bottom: 7px; font-size: 12px; font-style:italic;}

使用以下<img> markdown:

![description](https://img.jpg "description")
***Image:*** *description*

这个问题有两个语义上正确的解决方案:

使用插件 创建自定义包含

1. 使用插件

我已经尝试了几个这样做的插件，我最喜欢的是jekyll-figure。

1.1. 安装jekyll-figure

安装jekyll-figure的一种方法是将gem "jekyll-figure"添加到插件组的Gemfile中。

然后从终端窗口运行bundle install。

1.2. 使用jekyll-figure

只需将标记包装在{% figure %}和{% endfigure %}标记中。

你的标题在开始{% figure %}标签，你甚至可以用markdown样式它!

例子:

{% figure caption:"Le logo de **Jekyll** et son clin d'oeil à Robert Louis Stevenson" %}
    ![Le logo de Jekyll](/assets/images/2018-08-07-jekyll-logo.png)
{% endfigure %}

1.3. 风格,

现在，你的图像和标题在语义上是正确的，你可以应用CSS，如你所愿:

图(图像和标题) 图img(仅供图片使用) 图标题(仅供标题使用)

2. 创建自定义包含

你需要在你的_includes文件夹中创建一个image.html文件，并使用Markdown中的Liquid将其包含在内。

2.1. 创建_includes / image.html

在你的_includes文件夹中创建image.html文档:

<!-- _includes/image.html -->
<figure>
    {% if include.url %}
    <a href="{{ include.url }}">
    {% endif %}
    <img
        {% if include.srcabs %}
            src="{{ include.srcabs }}"
        {% else %}
            src="{{ site.baseurl }}/assets/images/{{ include.src }}"
        {% endif %}
    alt="{{ include.alt }}">
    {% if include.url %}
    </a>
    {% endif %}
    {% if include.caption %}
        <figcaption>{{ include.caption }}</figcaption>
    {% endif %}
</figure>

2.2. 在Markdown中，使用Liquid包含一张图像

在/assets/images中带有标题的图像:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="jekyll-logo.png" <!-- image filename (placed in /assets/images) -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

使用绝对URL的(外部)图像:(将src=""更改为srcab ="")

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    srcabs="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

一个可点击的图像:(add url=""参数)

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    url="https://jekyllrb.com" <!-- destination url -->
    alt="Jekyll's logo" <!-- alt text -->
    caption="This is Jekyll's logo, featuring Dr. Jekyll's serum!" <!-- Caption -->
%}

图片:没有标题的图片:

This is [Jekyll](https://jekyllrb.com)'s logo :

{% include image.html
    src="https://jekyllrb.com/img/logo-2x.png" <!-- absolute URL to image file -->
    alt="Jekyll's logo" <!-- alt text -->
%}

2.3. 风格,

现在，你的图像和标题在语义上是正确的，你可以应用CSS，如你所愿:

图(图像和标题) 图img(仅供图片使用) 图标题(仅供标题使用)

对于带标题的图像，正确的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的使用方式。

在_config. conf文件中添加如下配置。yml文件

# prose.io config
prose:
  rooturl: '_posts'
  media: 'img'
  ignore:
    - 404.html
    - LICENSE
    - feed.xml
    - _config.yml
    - /_layouts
    - /_includes
    - /css
    - /img
    - /js
  metadata:
    _posts:
      - name: "layout"
        field:
          element: "hidden"
          value: "post"
      - name: "title"
        field:
          element: "text"
          label: "Post title"
          placeholder: "Title"
          alterable: true
      - name: "subtitle"
        field:
          element: "textarea"
          label: "Subtitle"
          placeholder: "A description of your post."
          alterable: true
      - name: "date"
        field:
          element: "text"
          label: "Date"
          help: "Enter date of post."
          placeholder: "yyyy-mm-dd"
          alterable: true
      - name: "image"
        field:
          element: "text"
          label: "Image"
          help: "Add a thumbnail image to your post."
          placeholder: "Thumbnail"
          alterable: true
      - name: "published"
        field:
          element: "checkbox"
          label: "Publish"
          help: "Check to publish post, uncheck to hide."

我知道这是一个老问题，但我想我仍然要分享我的方法添加图片字幕。您将无法使用标题或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，你也可以使用任何你想要的标签。只要确保有一个标签，否则你将无法设置它的样式。

如果你不想使用任何插件(这意味着你可以直接将它推送到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." %}