如何使用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> 

）