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

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

然后显示文本中的图像。
然而,我怎么能告诉Markdown添加一个标题是下面或上面的图像?
当前回答
这个问题有两个语义上正确的解决方案:
使用插件 创建自定义包含
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(仅供图片使用) 图标题(仅供标题使用)
其他回答
如果你不想使用任何插件(这意味着你可以直接将它推送到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." %}
这里有一个最简单(但不是最漂亮)的解决方案:在整个东西周围做一个表格。显然存在缩放问题,这就是为什么我用HTML给出示例的原因,这样您就可以轻松地修改图像大小。这对我很管用。
| <img src="" alt="" style="width: 400px;"/> |
| My Caption |
这个问题有两个语义上正确的解决方案:
使用插件 创建自定义包含
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(仅供图片使用) 图标题(仅供标题使用)
<p align="center">
<img alt="img-name" src="/path/image-name.png" width="300">
<br>
<em>caption</em>
</p>
这是基本的标题用法。不需要使用额外的插件。
你可以使用这个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=“穿夹克的女孩”>