三（展示怎么链接图片）

22 May 2013

Reading time ~1 minute

这里将展示如何添加照片用 figure 与适当的 class. 的每个实例 figure 自动编号并显示在标题中.

数据（图像或视频）

一

title="Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr">Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr</a>.</figcaption>

二

应用 half 类，以便并排显示共享同一标题的两个图像

<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.

三

应用 third 类，以便并排显示三个共享同一标题的图像.

<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.

替代方式

实现相同结果的另一种方法是 gallery 液体模板。在这种情况下，你

无需编写任何HTML标记–只需复制一小段代码，调整参数（见下文）。

并用任意数量的图像链接填充块。可以混合使用相对链接和外部链接.

这是你可能想用的:

{% 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: 设置库下的标题 (看 figcaption HTML 上面的标签);
cols: 设置库的列数. 可用值: [1..3].

看起来像这样:

Test images