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

然后显示文本中的图像。
然而,我怎么能告诉Markdown添加一个标题是下面或上面的图像?
我在Github上主持一个Jekyll博客,用Markdown写我的帖子。当我添加图像时,我这样做:

然后显示文本中的图像。
然而,我怎么能告诉Markdown添加一个标题是下面或上面的图像?
当前回答
你可以用表格。它工作得很好。
|  |
|:--:|
| *Space* |
结果:
其他回答
这里有一个最简单(但不是最漂亮)的解决方案:在整个东西周围做一个表格。显然存在缩放问题,这就是为什么我用HTML给出示例的原因,这样您就可以轻松地修改图像大小。这对我很管用。
| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
你可以用表格。它工作得很好。
|  |
|:--:|
| *Space* |
结果:
<p align="center">
<img alt="img-name" src="/path/image-name.png" width="300">
<br>
<em>caption</em>
</p>
这是基本的标题用法。不需要使用额外的插件。
我知道这是一个老问题,但我想我仍然要分享我的方法添加图片字幕。您将无法使用标题或figcaption标签,但这将是一个简单的替代方案,无需使用任何插件。
在你的标记中,你可以用强调标签包装标题,并将其直接放在图像的下面,而不需要插入新的行,如下所示:

*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,你也可以使用任何你想要的标签。只要确保有一个标签,否则你将无法设置它的样式。
这个问题有两个语义上正确的解决方案:
使用插件 创建自定义包含
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" %}

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