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

这个选项表面上看起来可能很复杂，但实际上一点也不复杂，它解决了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;
}

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

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

这里有一个最简单(但不是最漂亮)的解决方案:在整个东西周围做一个表格。显然存在缩放问题，这就是为什么我用HTML给出示例的原因，这样您就可以轻松地修改图像大小。这对我很管用。

| <img src="" alt="" style="width: 400px;"/> |
| My Caption |

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

<p align="center">
  <img alt="img-name" src="/path/image-name.png" width="300">
  <br>
    <em>caption</em>
</p>

这是基本的标题用法。不需要使用额外的插件。