如何使用jekyll＆liquid更有效地创建此画廊？

Question

我有画廊是基于我的twitter引导CSS文件。我最终使用了内联HTML + Markdown的Kramdown，因为我无法按照我希望的方式在Liquid中工作。

通过Kramdown解析的降价模板看起来是这样的：

--- 
layout: gallery 
title: Gallery 
group: dropnavigation 
root: .\ 
--- 

{% include root %} 

{::options parse_block_html="true" /} 


<li class="span3"> 
<div class="thumbnail"> 
[![image](http://placehold.it/260x180)](#) 

#####Thumbnail label 

Thumbnail caption right here... 
</div> 
</li> 

<li class="span3"> 
<div class="thumbnail"> 
[![image](http://placehold.it/260x180)](#) 

#####Thumbnail label 

Thumbnail caption right here... 
</div> 
</li> 

画廊布局是这样的：

--- 
layout: core 
--- 
{% include root %} 

<div class="page-header"> 
    <h1 class="well">{{ page.title }} <small>{{ site.tagline }}</small></h1> 
</div> 


<ul class="thumbnails"> 
{{ content }} 
</ul> 

有没有办法做到这一点，这样我只包括图像标签和标签，然后通过模板获取ul，li和div类的样式？也许通过某种循环？

Answer 1

是的。您可以通过定义一个包含每张图片信息的list来循环。

--- 
layout: gallery 
title: Gallery 
group: dropnavigation 
root: .\ 

pictures: 
    - url: http://placehold.it/260x180 
    label: Label 1 
    caption: Caption 1 
    - url: http://placehold.it/260x180 
    label: Label 2 
    caption: Caption 2 
    - url: http://placehold.it/260x180 
    label: Label 3 
    caption: Caption 3 
--- 

{% include root %} 

{::options parse_block_html="true" /} 

{% for pic in page.pictures %} 
<li class="span3"> 
    <div class="thumbnail"> 
    [![image]({{ pic.url }})](#) 

    ##### {{ pic.label }} 

    {{ pic.caption }} 
    </div> 
</li> 
{% endfor %} 

（这甚至可以通过仅仅有YAML头与列表完成，循环等加工的画廊布局完成，所以你只需要改变pictures列表中有多个画廊（这将意味着，标题和标签都必须用HTML编写的，而不是降价）编辑：例如，每个库文件是像这样：

--- 
layout: gallery 
title: Gallery 
group: dropnavigation 
root: .\ 

pictures: 
    - url: http://placehold.it/260x180 
    label: Label 1 
    caption: Caption 1 
    - url: http://placehold.it/260x180 
    label: Label 2 
    caption: Caption 2 
    - url: http://placehold.it/260x180 
    label: Label 3 
    caption: Caption 3 
--- 

和画廊模板的样子：

--- 
layout: core 
--- 
{% include root %} 

<div class="page-header"> 
    <h1 class="well">{{ page.title }} <small>{{ site.tagline }}</small></h1> 
</div> 


<ul class="thumbnails"> 
{% for pic in page.pictures %} 
<li class="span3"> 
    <div class="thumbnail"> 
    <a href="#"><img src="{{ pic.url }}" alt="image" /></a> 
    <h5>{{ pic.label }}</h5> 
    <p>{{ pic.caption }}</p> 
    </div> 
</li> 
{% endfor %} 
</ul> 

）