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

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

然后显示文本中的图像。
然而,我怎么能告诉Markdown添加一个标题是下面或上面的图像?
当前回答
如果你不想使用任何插件(这意味着你可以直接将它推送到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 |
我知道这是一个老问题,但我想我仍然要分享我的方法添加图片字幕。您将无法使用标题或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,你也可以使用任何你想要的标签。只要确保有一个标签,否则你将无法设置它的样式。
<p align="center">
<img alt="img-name" src="/path/image-name.png" width="300">
<br>
<em>caption</em>
</p>
这是基本的标题用法。不需要使用额外的插件。
您可以尝试使用pandoc作为您的转换器。这里有一个jekyll插件来实现这一点。Pandoc将能够自动添加与您的alt属性相同的图形标题。
但你必须推送编译后的网站,因为github不允许在github页面中使用插件。
你可以使用这个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=“穿夹克的女孩”>