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

Question

我的画廊基于我的 twitter 引导 css 文件。我最终将 Kramdown 与内联 HTML+Markdown 一起使用，因为我无法让它以我希望的方式在 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 类设置样式？也许通过某种循环？

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 而不是 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>

)