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

使用插件 创建自定义包含

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(仅供图片使用) 图标题(仅供标题使用)

您可以尝试使用pandoc作为您的转换器。这里有一个jekyll插件来实现这一点。Pandoc将能够自动添加与您的alt属性相同的图形标题。

但你必须推送编译后的网站，因为github不允许在github页面中使用插件。

在_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."

这个选项表面上看起来可能很复杂，但实际上一点也不复杂，它解决了Jekyll markdown渲染器(Kramdown)的其他问题。基本上，这个选项改变了一个用python制作的可扩展的渲染器，允许你安装扩展(有很多，例如markdown-字幕)和展开它(它有一个扩展API)。

第一步是定义一个自定义markdown处理器。你必须将markdown: CustomProcessor添加到_config.yml。 然后，我们必须创建CustomProcessor。创建一个名为_plugins的文件夹并添加一个名为MyConverter的文件。Rb与此内容:

class Jekyll::Converters::Markdown::CustomProcessor

    def initialize(config)

    end

    def matches(ext)
        ext =~ /^\.(md|markdown)$/i
    end

    def output_ext(ext)
        ".html"
    end

    def convert(content)

      puts "EXECUTED"

      md_path = "./_plugins/temp/temp.md"
      html_path = "./_plugins/temp/temp.html"
      
      File.write(md_path, content, mode: "w")
      system("python ./_plugins/MyConverter.py")

      content = File.read(html_path)
      content
    end
end

你还需要在插件中创建一个文件夹temp。

所有这些代码所做的就是将我们正在处理的文件的所有内容写入temp.md，调用一个python脚本，等待它完成，读取temp.html，并将其作为转换器的输出返回。

现在是时候用python创建转换器了。我选择使用Python-Markdown。它很容易使用，并且有大量的扩展。要使用转换器，我们必须在_plugins文件夹中创建一个名为MyConverter.py的文件，并将以下内容放在里面:

import markdown

markdown_extensions = [
    'markdown_captions',
    'def_list',
    'nl2br',
    'tables',
    'codehilite',
    'fenced_code',
    'md_in_html',
    'attr_list'
]

md_file = open("./_plugins/temp/temp.md", "r")
md_string = md_file.read()
md_file.close()

html_string = markdown.markdown(md_string, extensions=markdown_extensions, extension_configs =extension_configs)

html_file = open("./_plugins/temp/temp.html", "w")
html_file.write(html_string)
html_file.close()

这段代码只是加载扩展，读取temp.md文件，将其转换为html，并将其写入temp.html。使用所有这些扩展应该生成与默认的jekyll markdown renderere类似的输出。唯一没有与python-markdown捆绑在一起的扩展是markdown_captions，它发挥了神奇的作用。要安装python渲染器和扩展，你只需要运行pip install Markdown Markdown -captions。

这样就可以了，现在你的markdown被Python-Markdown翻译了。一些html元素我是不同的现在(在我的经验只有几个)，所以也许你必须在css做一些小的改变。

这是我使用的css营地:

figure{
  margin: 0px;
}

figcaption { 
  color: gray;
  font-size: 0.8rem;
}

这个过程尽量简单，以便于理解和修改。我已经尽我所能描述了这个过程。如果任何人有问题，请留下评论，我会更新答案。

你可以使用这个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=“穿夹克的女孩”>

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*