在Markdown Jekyll中使用图像说明

我在Github上主持一个Jekyll博客，用Markdown写我的帖子。当我添加图像时，我这样做:

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

然后显示文本中的图像。

然而，我怎么能告诉Markdown添加一个标题是下面或上面的图像?

179004 次浏览
小开

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

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

小开
最佳答案

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

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

小开

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

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

在得票最多的答案上，我发现更显式的一点是使用jekyll语法向某物添加类，然后以这种方式设置它的样式。

所以在帖子中，你可以这样写:

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


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

然后在你的CSS文件中，你可以这样做:

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

出来后看起来不错!

小开

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

小开

你可以用表格。它工作得很好。

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

结果:

enter image description here

小开

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. 使用插件
  2. 创建自定义包含

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，如你所愿:

  • figure(用于图像和标题)
  • figure img(仅用于图像)
  • figcaption(仅供说明)

2. 创建自定义包含

你需要在你的__ABC1文件夹中创建一个image.html文件和包括它使用液体Markdown。

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(仅供说明)
小开 
<p align="center">
<img alt="img-name" src="/path/image-name.png" width="300">
<br>
<em>caption</em>
</p>

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

小开

对于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" /}来实现这个功能。

小开

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

  1. 第一步是定义一个自定义markdown处理器。你必须将markdown: CustomProcessor添加到_config.yml。

  2. 然后，我们必须创建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，并将其作为转换器的输出返回。

  1. 现在是时候用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;
}

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

小开

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

提交答案