我如何使用jekyll&液体? [英] how can i create this gallery more efficiently using jekyll & liquid?

问题描述

我的画廊基于我的twitter引导css文件.我最终将Kramdown与内联HTML + Markdown结合使用，因为我无法像我希望的那样使它在Liquid中工作.

I have gallery is based on my twitter bootstrap css files. I ended up using Kramdown with inline HTML+Markdown because I couldnt get it to work in Liquid the way I had hoped.

Kramdown解析的markdown模板如下:

The markdown template parsed by Kramdown looks like this:

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

有没有一种方法可以让我只包含image标记和标签，然后通过ul，li和div类通过模板设置样式?也许是某种循环?

Is there a way to do this so that I only include The image tag and label, then it gets styled by the ul, li and div classes via the template? Perhaps by some kind of loop?

推荐答案

是.您可以通过定义包含每个图片信息的列表来循环执行此操作.

Yes. You can do it via a loop by defining a list that contains the information for each picture.

---
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编写.例如，每个图库文件都是这样的:

(This could even by done by just having the YAML header with the list, and the loop and other processing done in the gallery layout, so that you only need to change the pictures list to have multiple galleries (this would mean that the caption and labels would have to be written in HTML rather than markdown). e.g. each gallery file is like so:

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

)

这篇关于我如何使用jekyll&液体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！