어떻게 지킬 & 액체를 사용하여이 갤러리를보다 효율적으로 만들 수 있습니까?

Question

갤러리는 내 트위터 부트 스트랩 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로 작성해야한다는 것을 의미 편집이 :. 예를 들어, 각 갤러리 파일과 같이이다 :

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

)