我如何使用 jekyll & Liquid 更有效地创建这个画廊？

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

Kramdown 解析的 markdown 模板如下所示：

---
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 类设置样式？也许通过某种循环？

是的。您可以通过定义一个循环来完成此操作list https://en.wikipedia.org/wiki/YAML#Hierarchical_combinations_of_elements其中包含每张图片的信息。

---
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 而不是 Markdown 编写）。编辑：例如每个画廊文件都是这样的：

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

)