关于在文章中插入图片

22 May 2016

Reading time ~1 minute

下面是一些图片的例子。如果您想要显示两个或三个图像，那么您就可以使用适当的“类”来响应。“图”的每个实例都自动编号并显示在标题中。

Figures (for images or video)

One Up

Two Up

举例:

<figure class="half">
    <a href="/images/image-filename-1-large.jpg"><img src="/images/image-filename-1.jpg"></a>
    <a href="/images/image-filename-2-large.jpg"><img src="/images/image-filename-2.jpg"></a>
    <figcaption>Caption describing these two images.</figcaption>
</figure>

你会得到这样的东西:

Two images.

Three Up

应用第三类，像这样显示三个图像并排在一起，共享相同的标题。

<figure class="third">
	<img src="/images/image-filename-1.jpg">
	<img src="/images/image-filename-2.jpg">
	<img src="/images/image-filename-3.jpg">
	<figcaption>Caption describing these three images.</figcaption>
</figure>

你会得到这样:

Three images.

可供选择的方法

还可以这样使用:

{% capture images %}
	http://vignette2.wikia.nocookie.net/naruto/images/9/97/Hinata.png
	http://vignette4.wikia.nocookie.net/naruto/images/7/79/Hinata_Part_II.png
	http://vignette1.wikia.nocookie.net/naruto/images/1/15/J%C5%ABho_S%C5%8Dshiken.png
{% endcapture %}
{% include gallery images=images caption="Test images" cols=3 %}

参数:

caption: Sets the caption under the gallery (see figcaption HTML tag above);
cols: Sets the number of columns of the gallery. Available values: [1..3].

你会得到这样的:

Test images

例子 markdown