【问题标题】：Using an image caption in Markdown Jekyll在 Markdown Jekyll 中使用图片标题
【发布时间】：2013-10-20 07:32:34
【问题描述】：

我在 Github 上托管一个 Jekyll 博客，并使用 Markdown 写我的帖子。当我添加图像时，我会这样做：

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

然后在文本中显示图像。

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

【问题讨论】：

标签： github markdown jekyll

【解决方案1】：

我知道这是一个老问题，但我想我仍然会分享我添加图片说明的方法。您将无法使用caption 或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 之外的任何标签。只要确保有标签，否则您将无法对其进行样式设置。

【讨论】：

太棒了！无需记住一些愚蠢的 jekyll 语法:)
我是这个的忠实粉丝
谢谢！只是在寻找那个
您好！我不太确定将 CSS 部分放在哪里以及如何放置……如果有人能提供帮助，那就太好了。
@ChriiSchee 将它放在主 CSS 文件中，或者您可以创建自己的并将其链接到默认布局。例如，我的默认布局链接到 main.css 文件 <link href="{{ site.baseurl }}/assets/css/main.css" rel="stylesheet">，所以我只需在该文件的底部添加我的自定义 CSS 定义：// My custom css img + em { display: block; text-align: center; } //image captions

【解决方案2】：

您可以为此使用表格。它工作正常。

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

结果：

【讨论】：

这个答案是最好的。. 使用纯降价并获得你需要的东西。谢谢！
有点离题，但这也适用于 Jupyter Notebooks。
它对我来说将宽度从 100% 减少了。如何扩大它？
如果您想让表格居中，请使用，然后是一个新行 table，然后是一个新行，。

【解决方案3】：

如果你不想使用任何插件（也就是说你可以直接push到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." %}

【讨论】：

这是个好主意！但是，site_root 不被接受为有效变量。渲染后最终为src="{{ site.url_root }}...。
啊，对了，那是Octopress中添加的变量。我对其进行了编辑，因此示例代码只使用了图像的相对 URL。
Jekyll 现在包含一个 site.url 变量。
更好的标记是：<figure class="image"><img src="{{ include.url }}" alt="{{ include.description }}"><figcaption>{{ include.description }}</figcaption></figure>
有没有办法将标题格式化为降价而不仅仅是文本？我想使用 markdown 语法进行超链接，但它不起作用。也试过 kramdown

【解决方案4】：

用于带有标题的图像的正确 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...

The Markdown spec encourages you to embed HTML in cases like this, 所以它会显示得很好。它也比乱用插件简单得多。

如果您尝试使用其他 Markdown-y 功能（如表格、星号等）来生成字幕，那么您只是在琢磨如何使用 Markdown。

【讨论】：

这个答案没有引起任何关注真是太糟糕了——我真的认为它是最简单和语义上最正确的。我对所有建议使用表格进行格式化的答案感到特别苦恼，这只是 1990 年代的混乱。 ;-)
我同意。但是，Bitbucket 似乎还不支持它。可惜了。
我喜欢@Andrew 提供的聪明而简单的答案，但我必须选择这个答案，因为它是明确的，使用适当的 HTML 标签，并且不需要太多输入。
非常感谢，我是 jekyll 的新手，不知道 markdown 可以与 html 一起使用。

【解决方案5】：

对top voted answer 的一个小改动，我发现更明确一点是使用 jekyll 语法向某事物添加类，然后以这种方式设置样式。

所以在帖子中你会有：

![My image](/images/my-image.png)

{:.image-caption}
*The caption for my image*

然后在您的 CSS 文件中，您可以执行以下操作：

.image-caption {
  text-align: center;
  font-size: .8rem;
  color: light-grey;

出来看起来不错！

【讨论】：

【解决方案6】：

这个问题有两种语义正确的解决方案：

使用插件
创建自定义包含

1。使用插件

我已经尝试了几个这样做的插件和my favourite is 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：

figure（用于图片和标题）
figure img（仅用于图片）
figcaption（仅用于字幕）

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="" 更改为 srcabs=""）

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 -->
%}

一个可点击的图片：（添加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：

figure（用于图片和标题）
figure img（仅用于图片）
figcaption（仅用于字幕）

【讨论】：

为了完整起见，如果你想使用 jekyll-figure，你必须将 jekyll-figure 添加到 _config.yml 中的插件

【解决方案7】：

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

但你必须推送编译好的站点，因为 github 不允许在 Github 页面中使用插件以保证安全。

【讨论】：

谢谢。所以单靠markdown是不能创建字幕的？
我相信这取决于您使用的转换器，但是，降价标准不支持添加字幕。

【解决方案8】：

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>降价：

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

【讨论】：

【解决方案9】：

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

这是基本的字幕使用。不需要使用额外的插件。

【讨论】：

【解决方案10】：

这是最简单（但不是最漂亮）的解决方案：围绕整个事物制作一张桌子。显然存在缩放问题，这就是为什么我用 HTML 给出我的示例，以便您可以轻松地修改图像大小。这对我有用。

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

【讨论】：

【解决方案11】：

对于 Kramdown，您可以使用 {:refdef: style="text-align: center;"} 对齐中心

{:refdef: style="text-align: center;"}
![example](https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg){: width="50%" .shadow}
{: refdef}
{:refdef: style="text-align: center;"}
*Fig.1: This is an example image. [Source](https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg)*
{: refdef}

您需要在帖子开头添加{::options parse_block_html="true" /} 才能使用。

【讨论】：

【解决方案12】：

这个选项表面上看起来很复杂，但它根本不解决 Jekyll Markdown 渲染器（Kramdown）的其他问题。基本上，此选项会更改使用可扩展的 python 制作的渲染器，允许您安装扩展（例如，有大量的 markdown-captions）并扩展它（它具有扩展 API）。

第一步是定义一个自定义的降价处理器。您必须将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

您还需要在plugins 内创建一个文件夹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 渲染类似的输出。唯一没有与 python-markdown 捆绑的扩展是 markdown_captions，它可以发挥魔力。要安装 python 渲染器和扩展，您只需运行 pip install Markdown markdown-captions。

应该可以了，现在您的 markdown 正在由 Python-Markdown 翻译。一些 html 元素现在可能会有所不同（根据我的经验，只有少数）所以也许你必须在 css 中做一些小的改动。

这是我在camptions中使用的css：

figure{
  margin: 0px;
}

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

流程尽量简单，以便于理解和修改。我已经尽可能地描述了这个过程。如果有人有问题，请发表评论，我会更新答案。

【讨论】：

【解决方案13】：

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

【讨论】：

1。使用插件

1.1。安装jekyll-figure

1.2。使用jekyll-figure

1.3。样式化它

2。创建自定义包含

2.1。创建_includes/image.html

2.2。在 Markdown 中，使用 Liquid 包含图像

2.3。样式化它

1.1。安装`jekyll-figure`

1.2。使用`jekyll-figure`