Как я могу создать эту галерею более эффективно, используя jekyll & liquid? - PullRequest
Новая
       43

Как я могу создать эту галерею более эффективно, используя jekyll & liquid?

2 голосов
/ 25 марта 2012

У меня галерея основана на моих файлах начальной загрузки Twitter. Я закончил тем, что использовал Kramdown со встроенным HTML + Markdown, потому что не мог заставить его работать в 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 через шаблон? Возможно по какой-то петле?

1 Ответ

5 голосов
/ 25 марта 2012

Да. Вы можете сделать это с помощью цикла, определив список , который содержит информацию для каждого изображения. 

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

)

...